TWEEN动画

TWEEN动画黄金法则四条:

一.边界判断加步长
二.清掉没有用的定时器
三.在大move要传参的情况下在里面写一个 小_move来避免不销毁作用域的累积
四.把定时器的返回值放在自定义属性上,来防止一个元素同时有多个动画来运行

需求:实现一个匀速运动,在指定时间内完成动画:计算出总距离\总时间,根据总距离和总时间求出对应的步长(每走10ms走一步的话需要走多远)
设置一个定时器,让元素每一次都在当前的基础上累加步长即可

var maxLeft =pablic.win("clientWidth")-oDiv.offsetWidth;
var duration=2000,step=(maxLeft/duration)*10;
var timer=window.setIntrval(function(){
var curLeft = utils.css(oDiv,"left");
if(curLeft>=maxLeft){
window.clearIntrval(timer);
return;
}
curLeft+=step;
utils.css(oBox,"left",curLeft);
},10)

实现一个匀速运动,在指定时间内完成动画,根据当前走的时间't',总时间'd',总距离,计算出我们当前元素应该在的位置,让当前的元素运动到这个位置即可.

公式:

function Linear(t,b,c,d){
  retrun c*t/d+b;
}

示例:

var oBox =document.getElementById('box');
var target =public.win('clientWidth')-oBox.offsetWidth,begin=public.css(oBox,'left'),change=target-begin;
var duration=window.setInterval(function(){
time+=10;
if(time>=duration){
pablic.css(oBox,'left',target);
window.clearInterval(timer);
return;
}
var curPos =Linear(time,begin,change,duration);
public.css(oBox,'left',curPos);
},10)
这样会出现一个问题:当总距离/我的设定的步长=不是一个整数时 ,不论少走一步还是多走一步都会有少许偏差,不是超出目标区域就是还没到
var step=5;
var timer=window.setInterval(function(){
var curLeft=utils.css(oBox,'left');
if(curLeft+step>=maxLeft){边界判断加上步长计算
public.css(oBox,'left',maxLeft);
window.clearInterval(timer);
return;
}
curLeft+=step;
public.css(oBox,'left',curLeft);
},10)

也何以使用setTimeout来设置动画
使用递归思想完成setTimeout的轮播动画:每一次在执行动画之前首先把上一次设置的那个没有用的定时器清除掉,节约我们的内存

var time=null;
function move(){
window.clearTimeout(timer);
var curLeft=public.css(oBox,'left');
if(curLeft+step>=maxLift){
public.css(oBox,'left',maxLeft);
return;
}
curLeft+=step;
public.css(oBox,"left",curLeft);
timer=window.setTimeout(move,10);
}
move();

转载于:https://www.cnblogs.com/Jiazexin/p/7080278.html