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イベントでアニメーションを止めておく必要がある。
