Dojo animation and rotation

[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?

[tchobello]

hello, you can try this :

Code: Select all

this.rotateTo( 'div', 90 );

If someone knows how to add duration there to make it smooth...

[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();
        },

[Mistergos]

Thanks a lot for your quick replies

[tchobello]

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();

[Victoria_La]

Did you cast notif.args.direction to integer? It may be string, add console.log to see what number is

[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();

[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.

[tchobello]

it's working !

thanks a lot...