Is it possible to perform a rotation of a drawable with animate() method

The Ui.animate() function just changes the value a member variable and calls Ui.requestUpdate() several times over the specified period. If you want to rotate a drawable, you need that drawable to be able to render itself given a rotation angle. Once you can do this, you can just apply an animator to it.

Here is a working example...

using Toybox.Application as App;
using Toybox.Lang as Lang;
using Toybox.System as Sys;
using Toybox.WatchUi as Ui;
using Toybox.Graphics as Gfx;
using Toybox.Math as Math;

class Square extends Ui.Drawable
{
var rotation;
var scalex;
var scaley;
var color;

function initialize(params) {
Drawable.initialize(params);
rotation = 0.0;
scalex = 1.0;
scaley = scalex;

color = params.get(:color);
if (color == null) {
color = Gfx.COLOR_RED;
}
}

function draw(dc) {

var ax = width / 2;
var bx = width - ax;
var ay = height / 2;
var by = height - ay;

// points are pre-scaled
var points = [
[ -ax, -ay ],
[ bx, -ay ],
[ bx, by ],
[ -ax, by ]
];

// rotate
var c = Math.cos(rotation);
var s = Math.sin(rotation);

for (var i = 0; i < points.size(); ++i) {
var x2 = (points[0] * c) - (points[1] * s);
var y2 = (points[1] * c) + (points[0] * s);

points[0] = x2;
points[1] = y2;
}

// scale
for (var i = 0; i < points.size(); ++i) {
points[0] *= scalex;
points[1] *= scaley;
}

// translate
for (var i = 0; i < points.size(); ++i) {
points[0] += locX;
points[1] += locY;
}

dc.setColor(color, Gfx.COLOR_TRANSPARENT);
dc.fillPolygon(points);
}

function reset() {
rotation = 0.0;
scalex = 1.0;
scaley = scalex;
}
}

class ZZZDelegate extends Ui.BehaviorDelegate
{
hidden var view;

function initialize(view) {
BehaviorDelegate.initialize();
self.view = view;
}

function onSelect() {
view.animate();
}
}

class ZZZView extends Ui.View {

function initialize() {
View.initialize();
animating = false;
}

hidden var square;

function onLayout(dc) {

var dx = dc.getWidth();
var dy = dc.getHeight();

var size = (dx < dy ? dx : dy) / 4;

var params = {
:locX => dc.getWidth() / 2,
:locY => dc.getHeight() / 2,
:width => size,
:height => size,
:color => Gfx.COLOR_BLUE
};

square = new Square(params);
}

function onUpdate(dc) {

dc.setColor(Gfx.COLOR_WHITE, Gfx.COLOR_WHITE);
dc.clear();

square.draw(dc);
}

hidden var animating;

function animate() {
if (!animating) {
animating = true;

Ui.animate(square, :rotation, Ui.ANIM_TYPE_EASE_IN_OUT, 0.0, 2 * Math.PI, 5.0, self.method(:onAnimationComplete));
Ui.animate(square, :scalex, Ui.ANIM_TYPE_EASE_IN_OUT, 1.0, 3.0, 5.0, null);
Ui.animate(square, :scaley, Ui.ANIM_TYPE_EASE_IN_OUT, 1.0, 3.0, 5.0, null);
}
}

function onAnimationComplete() {
animating = false;

// reset back to original size
square.reset();

Ui.requestUpdate();
}
}


class ZZZApp extends App.AppBase {

function initialize() {
AppBase.initialize();
}

function getInitialView() {
var view = new ZZZView();
var delegate = new ZZZDelegate(view);

return [ view, delegate ];
}
}
[/code]

Thanks for the example. But the question is, can I use your method to rotate a bitmap drawable?