Titaniumでバウンドするアニメーション
カーソルが上下にバウンドしているアニメーションはユーザーの注意を引く効果がある。
Titaniumではそういうアニメーションが簡単に実装できるので使わない手はないでありましょう。
サンプルコード
Windowの中で対象のViewが上下にバウンドするという素朴なサンプル。
例によってiOSでしか動作確認していない。
app.js
var win, view, upAnimation, downAnimation; win = Ti.UI.createWindow({backgroundColor: "#fff"}); view = Ti.UI.createView({ width: 100, height: 20, top: 100, left: 'auto', backgroundColor: "#00f" }); win.add(view); upAnimation = Ti.UI.createAnimation({ opacity: 1.0, duration: 500, top: view.top, curve: Ti.UI.ANIMATION_CURVE_LINEAR }); downAnimation = Ti.UI.createAnimation({ opacity: 0.0, duration: 300, top: view.top + 10, curve: Ti.UI.ANIMATION_CURVE_LINEAR }); upAnimation.addEventListener("complete", function(){ view.animate(downAnimation); }); downAnimation.addEventListener("complete", function(){ view.animate(upAnimation); }); view.animate(upAnimation); win.open();
Animationが終了した時にcompleteイベントが発生するので、そこで次のアニメーションをキックしてやる。
これを応用すればもっと複雑なアニメーションも組み立てられる。
Tips
アニメーションを止めるには
completeのイベントで次のアニメーションをキックする際に、何らかのフラグで条件判別をかませばよい。
暴走を回避する
アニメーションさせたままで他の画面に遷移するとCPU負荷が異常に上がる。
そのため画面遷移の際にはWindowのblurやcloseイベントでアニメーションを止めておく必要がある。