首页 > 代码库 > Javascript缓动动画原理
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缓动动画原理
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。