http://lig.connpass.com/event/33953/ で登壇した際のスライドです。

1. Androidに
かっこよく動くアイコン
を
Keigo Amai
Galapagos, Inc.

2. 自己紹介
• Android ネイティブ開発歴3年半
• 趣味：
• アニメーションするアイコンを作ること

3. アニメーションするアイコンを
作ること？

4. アニメーションするアイコン
• 過去の作品達

5. モチベーション
• デザイナーさんとの会話
• 素材をSVGで渡したらぬるぬる動かすこと
って可能？
• “ぬるぬる”とは？
• え、かっこいい！

6. 本日のテーマ
• アニメーションするアイコンの作り方のご紹介

7. 題材

8. 手順
• SVG画像を用いてVectorDrawableを作成
• プロパティアニメーションを定義して
AnimatedVectorDrawableを作成

9. VectorDrawableの作成

10. SVG形式でパーツ作成
• Sketchを使用

11. • 下向き矢印
• 垂直棒
• 水平棒
• チェックマーク
• 円
• 波5パターン
SVGの書き出し

12. SVG書き出しが一番重要
• SVGファイルのパスは人間には読み辛い
• 後で修正したくない

13. コツ
• パーツ全部を含む大きなレイヤに一旦配置し
てから、表示を切り替えながら書き出す

14. SVG → VectorDrawable
• Android StudioのVector Asset Studio
• VectorDrawableに変換
<vector>
<path
pathData=“M10,20….”
strokeColor=“#ccc”/>
</vector>
×10

15. VectorDrawableの作成
• 複数のVectorDrawable → 一つにマージ
• アニメーションを設定するために名前を付けておく
• drawable/download_icon.xmlを作成
<vector witdh=“100dp” height=“100dp”>
<path name=“oval” pathData=“M10,20….”/>
<path name=“horizontal” pathData=“M31,83 L31,….”/>
<path name=“down_arrow” pathData=“M10,20….”/>
<path name=“vertical” pathData=“M10,20….”/>
</vector>

16. AnimatedVectorDrawable
の作成

17. 思い出す

18. プロパティアニメーション
• 色、大きさ（X,Y）、パス等
• 画像が持っている幾つかのプロパティは、
ある値からある値へ連続的に変化させられる

19. アニメーションを分解
• 0°から360°まで円弧が伸びる
• trimPathEndのプロパティアニメーション
• パスの変形
• pathDataのプロパティアニメーション
• パスを消す（現す）
• colorのプロパティアニメーション

20. 縦棒の変形アニメーション
• anim/vertical_to_dot.xml
<objectAnimator
propertyName=“pathData”
valueType=“pathType”
duration=“300”
valueFrom=“M51,83 L82.42,120L115,83”
valueTo=“M32,83 L82.42,83 L133,83”/>

21. 円弧のアニメーション
• anim/oval.xml
<objectAnimator
propertyName=“trimPathEnd”
valueType=“floatType”
duration=“2000”
valueFrom=“0”
valueTo=“1.0”/>

22. AnimatedVectorDrawableの作成
• drawable/animated_download_icon.xml
<animated-vector drawable=“@drawable/download_icon"
<target
name=“vertical”
animation=“@anim/vertical_to_dot”/>
<target
name=“horizontal”
animation=“@anim/horizontal_to_wave1”/>
<target
name=“horizontal”
animation=“@anim/wave1_to_wave2”/>………

23. タップしたら動くようにして完成

24. 完