CODEWITHSUNDEEP
javascriptcreatejstweenjs
user8808083
user8808083

Reputation:

TweenJS rotation smoothing bug

I found bug when using TweenJS today, problem when animating my tick-based response from socket.io server. I get position and rotation every 1/10 second (10 ticks per second) and I smoothing this movement by TweenJS .to() function.

Position working like a charm, but rotation is buggy when I am switching around 0/360 degrees.

Server send for example rotation: 350° and in next tick server send rotation: 10°, but I dont want animate whole 340°, just 20°. So I want animate from/to BUT by shortest way. Plugin not working how supposted.

Fiddle: http://jsfiddle.net/bateriecz/wmj52eqd

EDIT: I found, that TweenJS is set to go shortest way as default, but not working for me

Upvotes: 0

Views: 382

Answers (1)

Lanny
Lanny

Reputation: 11294

There is a rotation plugin already provided in TweenJS: https://github.com/CreateJS/TweenJS/tree/master/src/tweenjs/plugins

From the docs:

After installation, by default all rotation tweens will rotate in the shortest direction. For example, if you tween from rotation=15 to rotation=330, it will rotate counter-clockwise 45 degrees. You can modify this behaviour by specifying a rotationDir tween value. A value of -1 will force CCW rotation, 1 will force CW, and 0 will disable the plugin effects for that portion of the tween.

Note that you need the latest TweenJS (1.0.0), as it was heavily refactored since the last version (0.6.2). In the earlier version, there was a "SmartRotationPlugin", which worked the same way.

Upvotes: 0

Related Questions