javascript匀速动画和缓冲动画详解

2024-03-20 17:58:13

关于网页中的动画，在css3中我们已经可以使用一些属性快速的做出来，但是有时候为了浏览器的兼容性我们还是需要使用js来制作网页中的动画。

使用js做动画最重要的一个函数就是setInterval函数，这里不再赘述，不懂可以直接百度用法。本文主要讲动画的原理已经在制作过程中的要点。

老规矩，先上代码，能直接看懂的可以节省时间。

html部分：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>move</title>
  <link rel="stylesheet" href="move1.css">
</head>
<body>
  <input type="button" value="匀速移动" id="move1">
  <input type="button" value="渐变移动" id="move2">
  <div id="box1" class="box"></div>
  <div id="box2" class="box"></div>
  <script type="text/javascript" src="move1.js"></script>
</body>
</html>

css部分：

*{
  margin: 0px;
  padding: 0px;
}
.box{
  width: 100px;
  height: 100px;
  background-color: green;
  position: relative;
  margin-top: 10px;
}

js部分：

/**
 * Created by siri on 2016/9/10.
 */
window.onload=function () {
  var btn1 = document.getElementById('move1');
  var btn2 = document.getElementById('move2');
  var box1 = document.getElementById('box1');
  var box2 = document.getElementById('box2');
  btn1.onclick = function () {
    animate1(box1,500);
  }
  btn2.onclick = function () {
    animate2(box2,500);
  }
  //匀速动画
  function animate1(ele,target){
    //要用定时器，先清除定时器
    //一个盒子只能有一个定时器，这样儿的话，不会和其他盒子出现定时器冲突
    //而定时器本身讲成为盒子的一个属性
    clearInterval(ele.timer);
    //我们要求盒子既能向前又能向后，那么我们的步长就得有正有负
    //目标值如果大于当前值取正，目标值如果小于当前值取负
    var speed = target>ele.offsetLeft?3:-3;
    ele.timer = setInterval(function () {
      //在执行之前就获取当前值和目标值之差
      var val = target - ele.offsetLeft;
      ele.style.left = ele.offsetLeft + speed + "px";
      //目标值和当前值只差如果小于步长，那么就不能再前进了
      //因为步长有正有负，所有转换成绝对值来比较
      console.log(val);
      if(Math.abs(val)<=Math.abs(speed)){
        ele.style.left = target + "px";
        clearInterval(ele.timer); 

      }
    },30);
  } 

  //缓动动画封装
  function animate2(ele,target) {
    clearInterval(ele.timer); //清楚历史定时器
    ele.timer = setInterval(function () {
      //获取步长 确定移动方向(正负值) 步长应该是越来越小的，缓动的算法。
      var step = (target-ele.offsetLeft)/10;
      //对步长进行二次加工(大于0向上取整,小于0项下取整)
      step = step>0?Math.ceil(step):Math.floor(step);
      //动画原理： 目标位置 = 当前位置 + 步长
      console.log(step);
      ele.style.left = ele.offsetLeft + step + "px";
      //检测缓动动画有没有停止
      if(Math.abs(target-ele.offsetLeft)<=Math.abs(step)){
        ele.style.left = target + "px"; //直接移动指定位置
        clearInterval(ele.timer);
      }
    },30);
  } 

}

html和css基本就是为了我们的js部分搭框架，不讲太多，要注意的是，一定要对全局的margin和padding清零，否则的话他在计算的时候初始的margin和padding会影响计算，从而导致有时候运动不停止的情况。

javascript部分代码的解析在源码中已经很详细了，下面主要讲解原理。

匀速运动：

通过setInterval函数我们控制每多少毫秒运动的距离，然后在快要到达指定位置的时候，判断步长（每多少毫秒运动的距离）和此时和目标位置的距离，如果步长大于此时和目标位置的距离，则直接定位到目标位置，这样做是为了避免步长和总距离不是整数倍关系而产生最后到达位置和目标位置有差值的错误。

缓冲运动：

缓冲运动的基本函数是和匀速运动一样的，只是缓冲运动的步长我们是通过和目标位置的距离来确定的，这样我们的步长是不断变小的，从而实现缓冲运动的效果。在确定步长的时候我们使用Math.ceil和Math.floor对步长值进行取整是为了避免出现小数，因为如果出现小数后面最后到达的位置肯定是和目标位置有误差的。

注意事项：在每次移动开始前一定要使用clearInterval清除定时器。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

js实现缓冲运动效果的方法

本文实例讲述了js实现缓冲运动效果的方法.分享给大家供大家参考.具体分析如下: 该实例可实现一开始速度很快,然后慢下来,直到停止的效果. 要点: var speed = (target-box.offsetLeft)/8; 目标点减去元素的当前位置的值除以8,因为offsetleft的值是一直在变大,所以速度的值也是一直的变小 speed = speed>0?Math.ceil(speed):Math.floor(speed); 正向速度的时候向上取整,反向速度的时候向下取整代码: <!DO
原生js实现返回顶部缓冲效果

运行原理通过定时器30毫秒执行一次滚动条上升,每次上升的高度为当前高度的80%,这样就达到了上升缓冲的动画效果. 判断当滚动条高度超过一屏时,按钮显示,默认隐藏知识要点 scrollTop//获取滚动条高度需要写兼容 clientHeight//可视窗口高度需要写兼容 setInterval//定时器 window.onscroll//滚动触发事件完整代码 <!DOCTYPE html> <html lang="en"> <head> &l
JS实现物体带缓冲的间歇运动效果示例

本文实例讲述了JS实现物体带缓冲的间歇运动效果.分享给大家供大家参考,具体如下: <!DOCTYPE HTML> <html> <head> <meta http-equiv="content-type" charset="utf-8" /> <meta http-equiv="content-type" content="text/html" /> <titl
javascript 缓冲运动框架的实现

javascript 缓冲运动框架的实现框架的使用,大大的提高了我们的编码的效率,下面分享一个缓冲运动框架. 实例代码: /** * Created by wang on 2016/8/3. */ //获取非行间样式和行间样式 function getStyle(obj,name) { if(obj.currentStyle){ return obj.currentStyle[name]; } else { return getComputedStyle(obj,false)[name]; }
JS实现侧边栏鼠标经过弹出框+缓冲效果

可能这个标题起得不够恰当,简单来说就是:当鼠标移到最左侧时,移出一个框. 首先,我们用两个div来简单布局以下页面: <div id="box"> <div id="share">分享到</div> </div> 这个分享框的弹出原理是:把内层div定位到外层div最右侧紧贴,然后把外层div定位到屏幕左外测,left的值与宽度相等,刚好隐藏掉就可以.当鼠标经过时,再通过改变left的值使外层div显示出来. <
JS+CSS实现鼠标经过弹出一个DIV框完整实例(带缓冲动画渐变效果)

本文实例讲述了JS+CSS实现鼠标经过弹出一个DIV框效果.分享给大家供大家参考,具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml">
JavaScript缓冲运动实现方法(2则示例)

本文实例讲述了JavaScript缓冲运动实现方法.分享给大家供大家参考,具体如下: 实现原理:(目标距离-当前距离) / 基数 = 速度(运动距离越大速度越小,运动距离和速度成反比) 复制代码代码如下: (500 - oDiv.offsetLeft) / 7 = iSpeed; 需要注意:当计算出来的速度有小数时需要取整: 复制代码代码如下: (500 - oDiv.offsetLeft) / 7 = iSpeed; iSpeed = iSpeed>0?Math.ceil(iSpeed):
Android属性动画之ValueAnimator代码详解

属性动画通过改变一个对象的属性值来进行动画,属性动画包含了以下几个特性: 1.持续时间(Duration) 主要用来定义动画的持续时间,默认值为300ms. 2.时间插值器(Time interpolation) 指定时间变化的百分比,就是当前流逝时间除以指定的持续时间,这个可以自定义,继承Interpolator,重写getInterpolation方法. 3.重复次数和行为(Repeat count and behavior) 指定动画的执行次数和动画的重复模式 4.动画集(Animator
Android 属性动画ValueAnimator与插值器详解

Android 属性动画ValueAnimator与插值器详解一.ValueAnimator详解: ValueAnimator是整个动画的核心,ObjectAnimator即是继承自ValueAnimator来实现. ValueAnimator更像是一个数值发生器,用来产生具有一定规律的数字,从而让调动者来控制动画的实现过程. 1.ValueAnimator的使用: ValueAnimator valueAnimator = ValueAnimator.ofFloat(0, 100); val
Android TextView渐变颜色和方向及动画效果的设置详解

GradientTextView Github点我一个非常好用的库,使用kotlin实现,用于设置TexView的字体渐变颜色.渐变方向和动画效果添加依赖之前仓库发布在 jcenter,但是因为它即将不可用,近期已完成迁移.建议大家使用 mavenCentral 的配置. 使用 jcenter implementation 'com.williamyang:gradienttext:1.0.1' 使用 mavenCentral buildscript { repositories {
Jetpack Compose实现动画效果的方法详解

目录概述低级别动画API animate*AsState 使用Animatable实现颜色变化效果使用updateTransition实现颜色和圆角动画 rememberInfiniteTransition TargetBasedAnimation 自定义动画 AnimationSpec Easing AnimationVector 高级动画概述 compose 为支持动画提供了大量的 api,通过这些 api 我们可以轻松实现动画效果 ps:这些 api 的原理与 Flutter 很接
Android Flutter实现GIF动画效果的方法详解

目录前言交错动画机制代码实现 Interval 介绍总结前言我们之前介绍了不少有关动画的篇章.前面介绍的动画都是只有一个动画效果,那如果我们想对某个组件实现一组动效,比如下面的效果,该怎么办? staggered animation 这个时候我们需要用到组合动效, Flutter 提供了交错动画(Staggered Animation)的方式实现.对于多个 Anmation 对象,可以共用一个 AnimationController,然后在不同的时间段执行动画效果.这就有点像 GIF
Vue3之元素和组件的动画切换实现示例详解

目录前言实例解析元素间的动画切换组件间的动画切换总结前言当我们使用某个软件或者网站完成一些交互的时候,会发现做得很好的网站和软件都少不了动画的润色,完成的功能都是从一个界面跳转到另一个界面,但是加动画和不加动画完全是两种不同的体验,而且动画还可以遮住一些缺陷,比如相机预览从16:9切换到4:3时会出现黑边的情况,这时加一个转场动画,用户就不会看到这个黑边了,同样在网站开发中如果说加载的另一个页面网络不太好时,我们可以使用一个加载动画,让用户感觉当前系统仍然正常.不会出现“卡死”的假
JavaScript axios安装与封装案例详解

1.下载axios插件 cnpm install axios -S 2.在main.js引入axios import axios from 'axios' Vue.prototype.$http = axios 3.创建axios实例 let service = axios.create({ baseURL: baseUrl, // url = base api url + request url withCredentials: true, // send cookies when cross
关于JavaScript和jQuery的类型判断详解

对于类型的判断,JavaScript用typeof来进行. 栗子: console.log(typeof null); //object console.log(typeof []); //object console.log(typeof {}); //object console.log(typeof new Date()); //object console.log(typeof new Object); //object console.log(typeof function(){});
JavaScript浏览器对象之一Window对象详解

JavaScript提供了一组以window为核心的对象,实现了对浏览器窗口的访问控制.JavaScript中定义了6种重要的对象: window对象表示浏览器中打开的窗口: document对象表示浏览器中加载页面的文档对象: location对象包含了浏览器当前的URL信息: navigation对象包含了浏览器本身的信息: screen对象包含了客户端屏幕及渲染能力的信息: history对象包含了浏览器访问网页的历史信息. 除了window对象之外,其他的5个对象都是windo
Javascript类型系统之String字符串类型详解

javascript没有表示单个字符的字符型,只有字符串String类型,字符型相当于仅包含一个字符的字符串字符串String是javascript基本数据类型,同时javascript也支持String对象,它是一个原始值的包装对象.在需要时,javascript会自动在原始形式和对象形式之间转换.本文将介绍字符串String原始类型及String包装对象定义字符串String类型是由引号括起来的一组由16位Unicode字符组成的字符序列字符串类型常被用于表示文本数据,此时字符串中的

javascript匀速动画和缓冲动画详解

相关推荐

随机推荐