js 动画补间 Tween

/* RunningList (触发过程中可以安全的删除自己)
    如果触发过程中删除(回调函数中删除正在遍历的数组), 不仅 len 没有变(遍历前定义的len没有变, 真实的len随之减少), 而且还会漏掉一个key;

*/
class RunningList{

    static getProxy(runName){

        return new Proxy(new RunningList(runName), {

            get(tar, key){
                
            },

            set(tar, key, val){
                
            }
            
        });

    }

    constructor(runName = 'update'){
        this._running = false;
        this._list = [];
        this._delList = [];
        this._runName = runName;

    }

    get length(){
        return this._list.length;
    }

    push(v){
        this._list.push(v);

    }

    splice(v){
        if(this._running === true) this._delList.push(v);

        else{
            const i = this._list.indexOf(v);
            if(i !== -1) this._list.splice(i, 1);
        }

    }

    update(){
        var k, len = this._list.length;

        this._running = true;
        for(k = 0; k < len; k++) this._list[k][this._runName]();
        this._running = false;

        len = this._delList.length;
        for(k = 0; k < len; k++) this.splice(this._delList[k]);
        this._delList.length = 0;
        
    }

}




/* TweenValue (从 原点 以规定的时间到达  终点)

parameter: origin, end, time, onUpdate, onEnd;

attribute:
    origin: Object; //原点(起点)
    end: Object; //终点
    time: Number; //origin 到 end 花费的时间
    onUpdate: Function; //更新回调; 一个回调参数 origin; 默认null;
    onEnd: Function; //结束回调; 没有回调参数; 默认null; (如果返回的是true将不从队列删除, 你可以在onEnd中更新.end不间断的继续补间)

method:
    reset(origin, end: Object): undefined; //更换 .origin, .end; 它会清除其它对象的缓存属性
    reverse(): undefined; //this.end 复制 this.origin 的原始值
    update(): undefined; //Tween 通过此方法统一更新 TweenValue

demo: 
    //init Tween:
    const tween = new Tween(),
    animate = function (){
        requestAnimationFrame(animate);
        tween.update();
    }

    //init TweenValue:
    const v1 = new Tween.Value({x:0, y:0}, {x:5, y:10}, 1000, v => console.log(v));
    
    animate();
    tween.start(v1);

*/
class TweenValue{

    constructor(origin = {}, end = {}, time = 500, onUpdate = null, onEnd = null, onStart = null){
        this.origin = origin;
        this.end = end;
        this.time = time;

        this.onUpdate = onUpdate;
        this.onEnd = onEnd;
        this.onStart = onStart;
        
        //以下属性不能直接设置
        this._r = null;
        this._t = 0;
        this._v = Object.create(null);

    }

    _start(){
        var v = "";
        for(v in this.origin) this._v[v] = this.origin[v];

        this._t = Date.now();
        //this.update();

    }

    reset(origin, end){
        this.origin = origin;
        this.end = end;
        this._v = Object.create(null);

    }

    reverse(){
        var n = "";
        for(n in this.origin) this.end[n] = this._v[n];

    }

    update(){
        if(this["_r"] !== null){

            var ted = Date["now"]() - this["_t"];

            if(ted >= this["time"]){

                for(ted in this["origin"]) this["origin"][ted] = this["end"][ted];
                if(this["onUpdate"] !== null) this["onUpdate"](this["origin"]);

                if(this["onEnd"] !== null){

                    if(this["onEnd"]() !== true){
                        if(this["_r"] !== null) this["_r"]["stop"](this);
                    }

                    else this["_start"]();
                    
                }

                else this["_r"]["stop"](this);

            }

            else{
                let n = "";
                ted = ted / this["time"];
                for(n in this["origin"]) this["origin"][n] = ted * (this["end"][n] - this["_v"][n]) + this["_v"][n];
                if(this["onUpdate"] !== null) this["onUpdate"](this["origin"]);

            }

        }

    }

}

Object.defineProperties(TweenValue.prototype, {

    isTweenValue: {
        configurable: false,
        enumerable: false,
        writable: false,
        value: true,
    }

});




/* TweenAlone (相对于 TweenValue 此类可以独立补间, 不需要 Tween)

demo:
    const v1 = new TweenAlone({x:0, y:0}, {x:5, y:10}, 1000, v => console.log(v)),
    animate = function (){
        requestAnimationFrame(animate);
        v1.update();
    }

    animate();
    v1.start();

*/
class TweenAlone extends TweenValue{

    constructor(origin, end, time, onUpdate, onEnd, onStart){
        super(origin, end, time, onUpdate, onEnd, onStart);
        
    }

    start(){
        if(this.onStart !== null) this.onStart();
        this._r = this;
        this._start();

    }

    stop(){
        this._r = null;
        
    }

}





/* Tween 动画补间 (TweenValue 的root, 可以管理多个TweenValue)

parameter:
attribute:
method:
    start(value: TweenValue): undefined;
    stop(value: TweenValue): undefined;

static:
    Value: TweenValue;

demo:
    //init Tween:
    const tween = new Tween(),
    animate = function (){
        requestAnimationFrame(animate);
        tween.update();
    }

    //init TweenValue:
    const v2 = new Tween.Value({x:0, y:0}, {x:5, y:10}, 1000, v => console.log(v), v => {
        v2.reverse(); //v2.end 复制起始值
        return true; //返回true表示不删除队列, 需要继续补间
    });
    
    animate();
    tween.start(v2);

*/
class Tween extends RunningList{

    static Value = TweenValue;

    constructor(){
        super();

    }

    start(value){
        if(value.onStart !== null) value.onStart();
        if(value._r === null) this.push(value);
        value._r = this;
        value._start(this);

    }

    stop(value){
        if(value._r !== null) this.splice(value);
        value._r = null;
        
    }

}




/* TweenTargetChange 朝着轴插值(有效的跟踪动态目标)
parameter:    
    v1 = {x: 0}, 
    v2 = {x: 100}, 
    distance = 1,        //每次移动的距离
    onUpdate = null,    //
    onEnd = null

attribute:
    v1: Object;             //起点
    v2: Object;             //终点
    onUpdate: Function;        //
    onEnd: Function;         //

method:
    update(): undefined;                        //一般在动画循环里执行此方法
    updateAxis(): undefined;                     //更新v1至v2的方向轴 (初始化时构造器自动调用一次)
    setDistance(distance: Number): undefined;     //设置每次移动的距离 (初始化时构造器自动调用一次)

demo:
    const ttc = new TweenTargetChange({x:0, y:0}, {x:100, y:100}, 10),

    //计时器模拟动画循环函数, 每秒执行一次.update()
    timer = new Timer(() => {
        ttc.update();
        console.log('update: ', ttc.v1);

    }, 1000, Infinity);

    ttc.onEnd = v => {
        timer.stop();
        console.log('end: ', v);
    }

    timer.start();
    console.log(ttc);

*/
class TweenTargetChange{

    #distance = 1;
    #distancePow2 = 1;
    #axis = {};

    constructor(v1 = {x: 0}, v2 = {x: 100}, distance, onUpdate = null, onEnd = null){
        this.v1 = v1;
        this.v2 = v2;
        this.onUpdate = onUpdate;
        this.onEnd = onEnd;
    
        this.setDistance(distance);
        this.updateAxis();
    }

    setDistance(v = 1){
        this.#distance = v;
        this.#distancePow2 = Math.pow(v, 2);

    }

    updateAxis(){ //更新轴
        var n, v, len = 0;

        for(n in this.v1){
            v = this.v2[n] - this.v1[n];
            len += v * v;
            this.#axis[n] = v;

        }

        len = Math.sqrt(len);

        if(len !== 0){
            
            for(n in this.v1) this.#axis[n] *= 1 / len;

        }
        
    }

    update(){
        var n, len = 0;

        for(n in this.v1) len += Math.pow(this.v1[n] - this.v2[n], 2);

        if(len > this.#distancePow2){

            for(n in this.v1) this.v1[n] += this.#axis[n] * this.#distance;
            if(this.onUpdate !== null) this.onUpdate(this.v1);

        }

        else{
            for(n in this.v1) this.v1[n] = this.v2[n];
            if(this.onEnd !== null) this.onEnd(this.v1);
            
        }

    }

}

 

 

 

TweenValue (从 原点 以规定的时间到达  终点)

parameter: origin, end, time, onUpdate, onEnd;

attribute:

    origin: Object; //原点(起点)

    end: Object; //终点

    time: Number; //origin 到 end 花费的时间

    onUpdate: Function; //更新回调; 一个回调参数 origin; 默认null;

    onEnd: Function; //结束回调; 没有回调参数; 默认null; (如果返回的是true将不从队列删除, 你可以在onEnd中更新.end不间断的继续补间)

method:

    reset(origin, end: Object): undefined; //更换 .origin, .end; 它会清除其它对象的缓存属性

    reverse(): undefined; //this.end 复制 this.origin 的原始值

    update(): undefined; //Tween 通过此方法统一更新 TweenValue

demo:

    //init Tween:

    const tween = new Tween(),

    animate = function (){

        requestAnimationFrame(animate);

        tween.update();

    }

    //init TweenValue:

    const v1 = new Tween.Value({x:0, y:0}, {x:5, y:10}, 1000, v => console.log(v));

   

    animate();

    tween.start(v1);

 

 

 

 

 

TweenAlone (相对于 TweenValue 此类可以独立补间, 不需要 Tween)

demo:

    const v1 = new TweenAlone({x:0, y:0}, {x:5, y:10}, 1000, v => console.log(v)),

    animate = function (){

        requestAnimationFrame(animate);

        v1.update();

    }

    animate();

    v1.start();

 

 

 

 

 

Tween 动画补间 (TweenValue 的root, 可以管理多个TweenValue)

parameter:

attribute:

method:

    start(value: TweenValue): undefined;

    stop(value: TweenValue): undefined;

static:

    Value: TweenValue;

demo:

    //init Tween:

    const tween = new Tween(),

    animate = function (){

        requestAnimationFrame(animate);

        tween.update();

    }

    //init TweenValue:

    const v2 = new Tween.Value({x:0, y:0}, {x:5, y:10}, 1000, v => console.log(v), v => {

        v2.reverse(); //v2.end 复制起始值

        return true; //返回true表示不删除队列, 需要继续补间

    });

   

    animate();

    tween.start(v2);

 

 

 

 

 

TweenTargetChange 朝着轴插值(有效的跟踪动态目标)

parameter:  

    v1 = {x: 0},

    v2 = {x: 100},

    distance = 1,       //每次移动的距离

    onUpdate = null,    //

    onEnd = null

attribute:

    v1: Object;             //起点

    v2: Object;             //终点

    onUpdate: Function;     //

    onEnd: Function;        //

method:

    update(): undefined;                        //一般在动画循环里执行此方法

    updateAxis(): undefined;                    //更新v1至v2的方向轴 (初始化时构造器自动调用一次)

    setDistance(distance: Number): undefined;   //设置每次移动的距离 (初始化时构造器自动调用一次)

demo:

    const ttc = new TweenTargetChange({x:0, y:0}, {x:100, y:100}, 10),

    //计时器模拟动画循环函数, 每秒执行一次.update()

    timer = new Timer(() => {

        ttc.update();

        console.log('update: ', ttc.v1);

    }, 1000, Infinity);

    ttc.onEnd = v => {

        timer.stop();

        console.log('end: ', v);

    }

    timer.start();

    console.log(ttc);