关于Tween的chain方法由于浅拷贝出现不能启用一个tween的bug
Posted hpugisers
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了关于Tween的chain方法由于浅拷贝出现不能启用一个tween的bug相关的知识,希望对你有一定的参考价值。
昨天由于版本升级把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;
以上是关于关于Tween的chain方法由于浅拷贝出现不能启用一个tween的bug的主要内容,如果未能解决你的问题,请参考以下文章