关于Tween的chain方法由于浅拷贝出现不能启用一个tween的bug

Posted 2022-02-26 hpugisers

昨天由于版本升级把tween18.6.0升级到18.6.4结果封装的动画无法使用，究其原因是为了浅拷贝的问题
出现问题的代码示例：

            this.tween = new TWEEN.Tween(this.startParms).to(this.targetParms, options.duartion);

            this.tween.easing(TWEEN.Easing.Linear.None);
    
            this.tweenback = new TWEEN.Tween(this.targetParms).to(this.startParms, options.duartion);

            this.tweenback.easing(TWEEN.Easing.Linear.None);
    
            this.tween.chain(this.tweenback);

            this.tweenback.chain(this.tween);

造成原因是tween经过动画后this.startParms会变成this.targetParms，造成tweenback的参数this.targetParms与this.startParms相同这是因为浅拷贝造成了this.startParms的改变。
改进代码：

            this.tween = new TWEEN.Tween(this.startParms).to(this.targetParms, options.duartion);

            this.tween.easing(TWEEN.Easing.Linear.None);
    
            this.tweenback = new TWEEN.Tween(clone(this.targetParms)).to(clone(this.startParms), options.duartion);

            this.tweenback.easing(TWEEN.Easing.Linear.None);
    
            this.tween.chain(this.tweenback);

            this.tweenback.chain(this.tween);

clone封装：

/*
 * @Description: 深度拷贝
 * @Author: gjw
 * @Date: 2020-11-26 09:17:19
 * @LastEditTime: 2020-11-26 10:39:56
 * @LastEditors: gjw
 * @Reference: 
 */
import defaultValue from './defaultValue';

    /**
     * 深度拷贝
     * @param * object 深度拷贝的对象
     * @param Boolean [deep] 是否完全拷贝，默认不完全拷贝，对于一般不需要完全拷贝
     * @return * 
     */
    function clone(object:any, deep?:Boolean) 
        if (object === null || typeof object !== 'object') 
            return object;
        

        deep = defaultValue(deep, false);

        let result = new object.constructor();
        for ( let propertyName in object) 
            if (object.hasOwnProperty(propertyName)) 
                let value = object[propertyName];
                if (deep) 
                    value = clone(value, deep);
                
                result[propertyName] = value;
            
        

        return result;
    
export default clone;