イトナブ開発合宿のことを知らない方はまずこちらをご覧になってください。
イトナブ石巻開発合宿in滝沢市を開催しました。
自分の今回の開発テーマはAnimationクラスでした。一度Animationクラスのコードに触っていて、応用次第では色々な表現が出来ると思いこの機会にもっと試してみたいと考えこのテーマにしました。
まずAnimationの４つの基本動作を並べてみました。
・フェイドイン・アウトのアニメーション
ImageView alphaImage = (ImageView)findViewById(R.id.alphaimage); AlphaAnimation alphaAnimation = new AlphaAnimation(1, 0.2f); alphaAnimation.setDuration(3000); alphaImage.startAnimation(alphaAnimation);
・移動のアニメーション
ImageView transImage = (ImageView)findViewById(R.id.transimage); TranslateAnimation translateAnimation = new TranslateAnimation(0, 0, -50, 50); translateAnimation.setDuration(3000); transImage.startAnimation(translateAnimation)
・回転のアニメーション
ImageView rotateImage = (ImageView)findViewById(R.id.rotateimage); RotateAnimation rotateAnimation = new RotateAnimation(0, 360, Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f); rotateAnimation.setDuration(3000); rotateImage.startAnimation(rotateAnimation);
・拡大・縮小のアニメーション
ImageView scaleImage = (ImageView)findViewById(R.id.scaleimage); ScaleAnimation scaleAnimation = new ScaleAnimation(1, 0.5f, 1, 0.5f); scaleAnimation.setDuration(3000); scaleImage.startAnimation(scaleAnimation);
また、これらのアニメーションを合成してみます
ImageView imageView = (ImageView)findViewById(R.id.setAnim); //インスタンスを生成
AnimationSet set = new AnimationSet(true);
・基本のアニメーションを生成
AlphaAnimation alphaAnimation = new AlphaAnimation(0.9f, 0.2f); RotateAnimation rotateAnimation = new RotateAnimation(0, 360, Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f); ScaleAnimation scaleAnimation = new ScaleAnimation(0.1f, 1, 0.1f, 1); TranslateAnimation translateAnimation = new TranslateAnimation(50, 0, 200, 0);
・生成したアニメーションを追加
set.addAnimation(alphaAnimation);
set.addAnimation(rotateAnimation);
set.addAnimation(scaleAnimation);
set.addAnimation(translateAnimation);
・アニメーション時間を設定して動作開始
set.setDuration(3000);
imageView.startAnimation(set);
アニメーションの合成は比較的簡単に出来たので、
それらを応用してロケットが飛び立つようなアニメーションを作ってみました。
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_my);
imageView1 = (ImageView)findViewById(R.id.fire);
imageView1.setVisibility(View.INVISIBLE);
imageView = (ImageView)findViewById(R.id.rocket);
imageView.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
startAnim();
}
});
private void startAnim() {
TranslateAnimation translateAnimation1 = new TranslateAnimation(0, 10, 0, 5);
translateAnimation1.setDuration(30);
translateAnimation1.setRepeatMode(Animation.REVERSE);
translateAnimation1.setRepeatCount(50);
imageView.startAnimation(translateAnimation1);
translateAnimation1.setAnimationListener(new Animation.AnimationListener() {
@Override
public void onAnimationStart(Animation animation) {
}
@Override
public void onAnimationEnd(Animation animation) {
imageView1.setVisibility(View.VISIBLE);
AnimationSet set = new AnimationSet(true);
AnimationSet set1 = new AnimationSet(true);
TranslateAnimation translateAnimation = new TranslateAnimation(0, 2, 0, -1500);
translateAnimation.setDuration(2500);
final RotateAnimation rotateAnimation = new RotateAnimation(0, -180, Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, -3.5f);
rotateAnimation.setDuration(300);
rotateAnimation.setStartOffset(2500);
TranslateAnimation translateAnimation2 = new TranslateAnimation(0, -70, 0, 770);
translateAnimation2.setDuration(2500);
translateAnimation2.setStartOffset(2800);
translateAnimation2.setInterpolator(new BounceInterpolator());
TranslateAnimation translateAnimation3 = new TranslateAnimation(0, 10, 0, 0);
translateAnimation3.setDuration(25);
translateAnimation3.setRepeatMode(Animation.REVERSE);
translateAnimation3.setRepeatCount(100);
RotateAnimation rotateAnimation1 = new RotateAnimation(0, 90, 20, 160);
rotateAnimation1.setDuration(2000);
rotateAnimation1.setStartOffset(5500);
TranslateAnimation translateJet = new TranslateAnimation(0, 2, 0, -1500);
translateJet.setDuration(2500);
AlphaAnimation alphaAnimation = new AlphaAnimation(1, 0);
alphaAnimation.setDuration(2500);
set.addAnimation(translateAnimation);
set.addAnimation(rotateAnimation);
set.addAnimation(translateAnimation2);
set.addAnimation(translateAnimation3);
set.addAnimation(rotateAnimation1);
set.setFillAfter(true);
set.setFillEnabled(true);
imageView.startAnimation(set);
set1.addAnimation(translateJet);
set1.addAnimation(translateAnimation3);
set1.addAnimation(alphaAnimation);
set1.setFillAfter(true);
set1.setFillEnabled(true);
imageView1.startAnimation(set1);
translateAnimation3.setAnimationListener(new Animation.AnimationListener() {
@Override
public void onAnimationStart(Animation animation) {
}
@Override
public void onAnimationEnd(Animation animation) {
}
@Override
public void onAnimationRepeat(Animation animation) {
}
});
}
@Override
public void onAnimationRepeat(Animation animation) {
}
});
}
画像では分からないと思いますが、ロケットが小刻みに震えながら炎を出して登って行きます。
そして画面から出た後にUターンして墜落します。
ただし、これだと端末依存で使用する機種によっては反転ポイントなどが激しくズレることがあるので、もし参考にされる場合は反転位置や墜落位置を端末に依存しないような工夫が必要だと思います。
これまでAndroidのアニメーションはあまり使っていなかったのですが、基本的な４つのアニメーションを組み合わせただけで様々な表現ができてなかなか楽しかったです。
また、今回のコードでちょこっと使ってますがAnimationのオプションが色々備わっているのでそれらを組み合わせるとかなり表現の幅が広がると思います。
アニメーションはアプリを作る上でページ移動時、ボタンをタップした時など、様々な場面で使用できると思います。
今回の開発合宿では自分が興味を持ったAnimationクラスを２日に渡って弄れたのでとても楽しく、また有意義なものでした。ここには載せきれていませんが、他にも色んな動きをするアニメーションを作れたので、今後の開発の参考にしていきたいと思います。
参考サイト：
Androidアプリで”アニメーション”するための基礎知識：
Animation | Android Developers：
