JS实现匀速慢速运动动画效果封装示例

本文通过一个例子来说明JS在实现匀速和慢动作时的动画效果。分享给大家参考，如下：

！doctype html htmlheadlang=' en ' metacarset=' utf-8 ' titlewww.jb51.net JS匀速/减速运动/title style * { margin : 0；padd : 0；} . box 1 { width : 100 px；高度： 100像素；背景-颜色：粉色；margin-top : 10px；相对位置：} . box 2 { width : 100 px；高度： 100像素；背景-颜色：红色；margin-top : 10px；相对位置：}/style/header dybutton匀速移动/buttonbutton慢速移动/button div class=' box 1 '/div div class=' box 2 '/div script//动画原理=box位置步长。//1.闪烁。(瞬间到达)//2。匀速行驶。(一次走同样的距离)//3。慢点。(刚开始的时候，快车速度越来越慢，步长越来越小)//(类似刹车、电梯停止、压缩弹簧.)//好处：//1。有非常逼真的慢动作效果，动画效果更加细腻。//2.如果计时器未被清除，对象将始终与目标一起移动。var box 1=document . getelementsbyclassname(' box 1 ')[0]；var box 2=document . getelementsbyclassname(' box 2 ')[0]；var but 1=document . getelementsbytagname(' button ')[0]；var but 2=document . getelementsbytagname(' button ')[1]；console . log(box 1 . offsetleft)；but 1 . onclick=function(){ animate 1(box 1，200)；} but 2 . onclick=function(){ animate 2(box 2，500)；}//匀速动画功能Animate 1 (Ele，target){//要使用计时器，请先清除计时器。//一个盒子只能有一个定时器，所以不会和其他盒子有定时器冲突。//定时器本身成为盒子的属性clearInterval(ele . timer)；//我们要求盒子既可以向前也可以向后，所以我们的步长必须是正的或者负的。//如果目标值大于当前值，取正值，如果目标值小于当前值，取负值var speed=targetele.offsetLeft？3:-3;埃勒。timer=setinterval(函数(){//执行前获取当前值与目标值的差值。var val=target-ele . offsetleft；ele.style.left=ele.offsetLeft速度' px '；//目标值和当前值的差值只有小于步长，那么就不能前进。//因为步长有正值和负值，所以如果(数学)的话，所有的步长都会转换成绝对值进行比较。绝对值=数学。防抱死制动系统(速度))。风格。left=目标“px”；clearInterval(ele . timer)；} }，30)} //慢速动画包函数Animate 2 (Ele，目标){ClearInterval (Ele。计时器)；//清除历史计时器元素。timer=setinterval(函数(){//获取确定移动方向的步长(正负值)。步长应该越来越小，这是一个缓慢的算法。var step=(target-ele . offsetleft)/10；//对步长进行二次处理(大于0则向上舍入，小于0则向上舍入)步长=步长0？math . ceil(step): path . floor(step)；//动画原理：目标位置=当前位置step console . log(step)；ele . style . left=ele . offsetleft step ' px '；//检查慢速动画是否停止如果(math . ABS(target-ele . offset ft)=math . ABS(step)){ ele . style . left=target ' px '；//直接移动指定位置clearInterval(ele . timer)；} },30);}/script/body/HTML使用在线HTML/CSS/JavaScript代码运行工具：http://tools.jb51.net/code/HtmlJsRun,您可以获得以下运行结果：

更多对JavaScript相关内容感兴趣的读者可以查看本网站的主题：《JavaScript运动效果与技巧汇总》、《JavaScript切换特效与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript动画特效与技巧汇总》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》、《JavaScript数学运算用法总结》、0103010。

希望本文对JavaScript编程有所帮助。