AndroidのアニメーションをちょっとだけLT

Post on 04-Jul-2015

3.062 views 2 download

Transcript of AndroidのアニメーションをちょっとだけLT

@fly1ncu

Androidのアニメーションについて

ちょっとだけLT

第12回 つ部ミーティング LT (2012.12.15)

@fly1ncu

高木 翔一

@fly1ncu

簡単にARが作れるサービス

とか作ってます

- 自己紹介 -

名古屋市立大学 経済学部 4年

株式会社ディディアイディ

@fly1ncu

訳あって、勉強会とかあんまり参加してませんでした。

僕は1年間で、、、

_人人人人人人人人人人_> 10kg太った ! < ̄^Y^Y^Y^Y^Y^Y^ ̄

@fly1ncu

- 本題 -

Androidのアニメーションについて

@fly1ncu

Androidのアニメーションは

android.view.animationで実現しています

なんとか5に負けない!!

しかし、、、

@fly1ncu

android.view.animationは

描画の位置を変えることで

アニメーションを実現している!

Issue

@fly1ncu

Left Right

タップするとダイアログを表示

クリックすると右に移動するアニメーション

クリックすると左に移動するアニメーション

Androidの画面

こんな感じのを準備した

@fly1ncu

Left Right

Leftを押すと、、、

黒いのが左に移動します

しかし、、、

@fly1ncu

Left Right

クリックしてもダイアログが出ない!

黒いのをクリックしても

ダイアログが出ません

アニメーション前の領域を

クリックするとダイアログ出た!

@fly1ncu

アニメーションを使っても

クリック領域は変わらない

Point

@fly1ncu

Left Right

この状態でRightを押すと、、、

期待する動き

現在地から右に移動する

@fly1ncu

Left Right

しかし現実はつらい

実際の動き

1. まずLeftを押す前の位置に

瞬間移動します

@fly1ncu

Left Right

しかし現実はつらい

実際の動き

1. まずLeftを押す前の位置に

瞬間移動します

2. 右に移動するアニメーションが

始まります。

@fly1ncu

2回目以降のアニメーションは

初期位置から始まる

Point

@fly1ncu

android.view.animationは

描画の位置を変えることで

アニメーションを実現している!

ハマりどころ

1. アニメーションを使ってもクリック領域は変わらない

2. 2回目以降のアニメーションは初期位置から始まる

Issue

@fly1ncu

1. AnimationListener#onAnimationEndを利用

して、アニメーション終了後にアニメー

ションと同じ効果を実装しておく。

対策

アニメーションで移動させたらViewも移動させる。

アニメーションでViewを消したらsetVisibity(View.GONE)

もちろんにrunOnMainThreadを使わないとアプリが落ちます

@fly1ncu

2. android.animationを使う!

対策

android.animationを使えばViewの実態ごと変更できる!

@fly1ncu

@fly1ncu

2. android.animationを使う!

対策

android.animationを使えばViewの実態ごと変更できる!

ただし、、、

android.view.animation は API Level 1

android.animation は API Level 11 (Android.3.0以上)

使いたいときはBackportするライブラリを入れましょう

@fly1ncu

まとめ

Android2.3以前では

android.view.animationの癖を気をつける

AndroidのアニメーションはAndroid3.0以降の普及

(ハンドセットは4.0以降)によってそのうち救われる

アニメーションをつけることでアプリのリッチ度がましたり、

より分かりやすいUIを実現できたりなどのメリットがあると思います。

Androidアプリもどんどんアニメーション実装してほしいなー

@fly1ncu

おしまい!

検証コード :

https://github.com/fly1ddid/android-animation-mystery

このPPTは後で #tsubuで流します