2011年3月23日水曜日

Titanium mobileで360度の回転アニメーション


Titanium mobileでは、表示要素のアニメーションをコードで書くことができるのですが、
回転は-180度から180度までしか指定できません。(指定しても反対側に回転してしまう?)

https://appcelerator.lighthouseapp.com/projects/32238/tickets/416-animation-cant-rotate-360-degrees
http://developer.appcelerator.com/question/87441/rotate-360-degrees-does-not-work

でも、どうしてもpodcastの30秒巻き戻しボタンみたいなのをやりたくて、かなり無理矢理ですがやってみました。

まず、通常の画像を用意します。(A.png)


次に、180度回転させた画像を用意します。(B.png)

そして、以下のコード(iOSでしか確認してません)
var rewind = Ti.UI.createImageView({
    left:100,
    top:100,
    width:32,
    height:32,
    image:'A.png'
});

var animateRewinding = function(){
    rewind.image = 'A.png';
    rewind.transform = Ti.UI.create2DMatrix();
 
    var r = Ti.UI.create2DMatrix();
    r = r.rotate(-180);
    rewind.animate({transform:r,duration:500,opacity:0.0}, function(){
         rewind.image = 'B.png';
         var r = Ti.UI.create2DMatrix();
         rewind.animate({duration:0,transform:r}, function(){
               var r = Ti.UI.create2DMatrix();
               r = r.rotate(-180);
               rewind.animate({duration:500,transform:r, opacity:1.0}, function(){
                    animateRewinding();
               });
         });
     });
};

何かすごく嫌な書き方なのですが動くには動きました。
しかし、Retina用の画像も用意するとなれば4種類の画像を用意せねばいけないという...