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缓动动画原理的主要内容,如果未能解决你的问题,请参考以下文章
JavaScript-动画原理如何使用js进行动画效果的实现
Web API (scroll系列)(仿淘宝侧边栏效果实现)(mouseenter与mouseover的区别)(动画的原理)(缓动动画)