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

参考

この投稿へのコメント

コメントはありません。

コメントを残す

メールアドレスが公開されることはありません。

この投稿へのトラックバック

トラックバックはありません。

トラックバック URL