yu-model

本模块收集了TWEEN的补间动画

安装

cnpm install yu-model --save

引入

import TWWEN from 'yu-model';

使用

//比如：设置dom元素的width：
let div = document.getElementById('div_id');
let obj = { width:100 };
//设置动画
new TWEEN.Tween(obj)
    .delay(1000)           //延迟1秒后执行
    .to({ width:500 }, 1000)    //1秒完成
    .repeat(重复次数)       //重复次数
    .easing(TWEEN.Easing.Elastic.InOut)  //动画效果
    .onUpdate(function(){        //每一帧都会触发的函数
        div.style.width = obj.width+'px';
    }).start();      //开启动画

function fn(){
    if(TWEEN.update()){  //更新动画状态，当TWEEN里没有动画队列时，TWEEN.update()返回false
        requestAnimationFrame(fn);
    }
}
fn();

设置多个动画，按队列顺序执行

let tween1 = new TWEEN.Tween(目标对象).to({num:500},1000).start();
let tween2 = new TWEEN.Tween(目标对象).to({num:0},1000);
let tween3 = new TWEEN.Tween(目标对象).to({num:0},1000);
tween1.chain(tween2);  //执行完tween1，再执行tween2
tween2.chain(tween3);  //执行完tween2，再执行tween3

function fn(){
    if(TWEEN.update()){  //更新动画状态
        requestAnimationFrame(fn);
    }
}
fn();