How can I rotate an image in iAd by clicking on a button?

Hey Tom,

In addition to the spin action, you can use a bit of javascript to apply a transform to any object on a page to set an arbitrary angle and doing it within a transition, you can smoothly animate the rotation.

Given a page with an object subclassed from view - like your ImageView - and a couple of buttons, you can trap the button taps and within the onViewActivate code look at the current transform (rotation) value of the object and increment it by plus or minus 1 to rotate in either direction.

The increment button would have something like:

this.onViewActivate = function (event) {

// Code here for the "Activated" event.

// myView is the outlet name of the object on the page I want to rotate

var myView = this.viewController.outlets.view;

var newValue = null;

// see if the object has any transform (rotation) to begin with

if (myView._transform == "none") {

newValue = "rotateZ(0deg)";

}

else {

// parse the existing transform to get the current value

var start = myView._transform.indexOf('(') + 1 ;

var end = myView._transform.indexOf('deg)');

var value = myView._transform.substring(start,end);

// increment the value

newValue = "rotateZ(" + ++value + "deg)";

}

var myAngleTransition = new iAd.Transition({

target : myView,

properties : ['transform'],

from : [myView._transform],

to : [newValue],

duration : [1.5]

});

myAngleTransition.start();

};

and the decrement button would have the same code with "++value" changed to "--value". This sample steps by 1 as well but you can add smaller values to value if you want finer control/

There's probably many more elegant ways to do this but this works none the less.

Cheers,

-Mark

For a simple field with a button to trigger the rotation, the button code would be somthing like:

this.onViewActivate = function (event) {

// Code here for the "Activated" event.

// myView is the outlet name of the object on the page I want to rotate

var myView = this.viewController.outlets.view;

// textField is the outlet name of the object where the degrees will be entered

var textField = this.viewController.outlets.textField;

// get the value from the field. Do checking to make sure it's a valid number

var newAngle = textField.value;

// create the CSS transform

var newValue = "rotateZ(" + newAngle + "deg)";

var myAngleTransition = new iAd.Transition({

target : myView,

properties : ['transform'],

from : [myView._transform],

to : [newValue],

duration : [1.5]

});

myAngleTransition.start();

};