Page 1 of 1
Dojo animation and rotation
Posted: 20 April 2020, 12:20
by Mistergos
Hi there
I am trying to move around my car with animation. Everything works fine except for rotation.
I can rotate my car without issue using direct transformation
Code: Select all
dojo.query('.car').style( {
transform: "rotate(90deg)"
});
But i cannot find a way to make the rotation part of a dojo animation.
In the following code, only x and y are animated.
Code: Select all
dojo.animateProperty({
node: "car",
duration: 500,
properties: {
left: player["x"],
top: player["y"],
transform:"rotate(90deg)"
}
}).play();
Anyone has a tip on how to rotate a div with animation, dojo or something else?
Re: Dojo animation and rotation
Posted: 20 April 2020, 12:42
by tchobello
hello, you can try this :
If someone knows how to add duration there to make it smooth...
Re: Dojo animation and rotation
Posted: 20 April 2020, 13:47
by apollo1001
Here you go:
from/to are angles from 0 to 360.
Code: Select all
rotate: function(node, from, to) {
new dojo.Animation({
curve: [from, to],
onAnimate: function (v) {
node.style[transform] = 'rotate(' + v + 'deg)';
}
}).play();
},
Re: Dojo animation and rotation
Posted: 20 April 2020, 15:51
by Mistergos
Thanks a lot for your quick replies
Re: Dojo animation and rotation
Posted: 19 October 2020, 15:38
by tchobello
apollo1001 wrote: ↑20 April 2020, 13:47
Here you go:
from/to are angles from 0 to 360.
Code: Select all
rotate: function(node, from, to) {
new dojo.Animation({
curve: [from, to],
onAnimate: function (v) {
node.style[transform] = 'rotate(' + v + 'deg)';
}
}).play();
},
Hello, I'm trying to insert that function but nothing happens...
I don't know if I have to use v parameter or what I have missed...
the former code was :
Code: Select all
this.rotateTo( 'tile_'+divTileArtId0+'_art', notif.args.direction*90+180 );
but there is no animation here. So, I've written that
Code: Select all
var transform;
dojo.forEach(
['transform', 'WebkitTransform', 'msTransform',
'MozTransform', 'OTransform'],
function (name) {
if (typeof dojo.body().style[name] != 'undefined') {
transform = name;
console.log('transform '+transform);
}
});
new dojo.Animation({
curve: [angleFrom, angleTo],
duration: 5000,
onAnimate: function (v) {
dojo.query('tile_'+divTileArtId0+'_art').style.transform = 'rotate(' + v + 'deg)';
}
}).play();
Re: Dojo animation and rotation
Posted: 20 October 2020, 23:52
by Victoria_La
Did you cast notif.args.direction to integer? It may be string, add console.log to see what number is
Re: Dojo animation and rotation
Posted: 21 October 2020, 07:59
by tchobello
@victoria_la
sorry, I wasn't clear in my explanations.
Code: Select all
this.rotateTo( 'tile_'+divTileArtId0+'_art', notif.args.direction*90+180 );
this code works but the rotation is not smooth.
so, I'm trying to use the Dojo Animation which does nothing.
Code: Select all
var angleTo = notif.args.direction*90+180 ;
var clockwize = notif.args.clockwize;
var angleFrom = angleTo - 90*clockwize;
var transform;
dojo.forEach(
['transform', 'WebkitTransform', 'msTransform', 'MozTransform', 'OTransform'],
function (name) {
if (typeof dojo.body().style[name] != 'undefined') {
transform = name;
}
});
new dojo.Animation({
curve: [angleFrom, angleTo],
duration: 5000,
onAnimate: function (v) {
dojo.query('tile_'+divTileArtId0+'_art').style.transform = 'rotate(' + v + 'deg)';
}
}).play();
Re: Dojo animation and rotation
Posted: 21 October 2020, 13:38
by JumpMaybe
My solution for this problem, used in 7 Wonders Duel:
Code: Select all
var animation = dojo.animateProperty({
node: yourNode,
duration: 1000,
properties: {
propertyTransform: {start: 0, end: 180}
},
onAnimate: function (values) {
dojo.style(this.node, 'transform', 'rotate(' + parseFloat(values.propertyTransform.replace("px", "")) + 'deg)');
}
});
animation.play();
This "animates" the dummy property "propertyTransform", which is then used in the onAnimate to actually set the transform: rotate() value. By default the property becomes px, so we have to remove that part.
It's not pretty but it works and can be combined/chained with other animations.
Re: Dojo animation and rotation
Posted: 21 October 2020, 20:29
by tchobello
it's working !
thanks a lot...