Javascript缓动动画原理

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Javascript缓动动画原理相关的知识,希望对你有一定的参考价值。

匀速动画的原理:   盒子本身的位置  +  步长  

  缓动动画的原理:    盒子本身的位置  +  步长 (不断变化的)

  封装代码:

 

1   function animate(obj,target){  //  第一个参数 动谁   第二个参数  动多少
2          clearInterval(obj.timer);
3          obj.timer = setInterval(function() {
4                // 计算步长   动画的原理    盒子本身的位置  +  步长
5                var step = (target - obj.offsetLeft) / 10;  // 步长
6                step =  step > 0 ? Math.ceil(step) : Math.floor(step);  //  取整步长
7                // obj.style.left = 盒子本身的位置  +  步长
8                obj.style.left = obj.offsetLeft + step + "px";
9                if(obj.offsetLeft == target){
10                    clearInterval(obj.timer);
11                }
12          },30)
13      }

 

  

 

以上是关于Javascript缓动动画原理的主要内容,如果未能解决你的问题,请参考以下文章

js缓动动画原理

JavaScript-动画原理如何使用js进行动画效果的实现

Web API (scroll系列)(仿淘宝侧边栏效果实现)(mouseenter与mouseover的区别)(动画的原理)(缓动动画)

div盒子的缓动函数封装

tween 缓动动画

分享一个即插即用的私藏缓动动画JS小算法