I have two tweens that seem to be conflicting with one another. When I only create one or the other they both work fine. If I create both the first tween (flipUp) no longer moves the x. the second one (match) works fine. if I change match and remove the x: and y: and make it opacity, they both work fine.
Case1: the x: in flip up is ignored.
this.flipUp = new Kinetic.Tween({
node: this.group,
duration: 0.5,
scaleX: 0,
x: this.position.x + (width/2),
onFinish: this.endFlipUp.bind(this)
});
this.match = new Kinetic.Tween({
node: this.group,
duration: 0.5,
x: 0 - width*2,
y: 0 - height*2,
onFinish: this.endMatch.bind(this)
});
case 2: works fine.
this.flipUp = new Kinetic.Tween({
node: this.group,
duration: 0.5,
scaleX: 0,
x: this.position.x + (width/2),
onFinish: this.endFlipUp.bind(this)
});
this.match = new Kinetic.Tween({
node: this.group,
duration: 0.5,
opacity: 0,
onFinish: this.endMatch.bind(this)
});
using latest version 5.1 of kineticjs
In first case you are using two tweens with x
property. If you are starting that tweens at same time you will have unexpected behaviour. What are you expecting on x
property at the end of tweens working? this.position.x + (width/2)
or 0 - width*2
? Use such tween at different time or with different properties.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.