Androidに
かっこよく動くアイコン
を
Keigo Amai
Galapagos, Inc.
自己紹介
• Android ネイティブ開発歴3年半
• 趣味:
• アニメーションするアイコンを作ること
アニメーションするアイコンを
作ること?
アニメーションするアイコン
• 過去の作品達
モチベーション
• デザイナーさんとの会話
• 素材をSVGで渡したらぬるぬる動かすこと
って可能?
• “ぬるぬる”とは?
• え、かっこいい!
本日のテーマ
• アニメーションするアイコンの作り方のご紹介
題材
手順
• SVG画像を用いてVectorDrawableを作成
• プロパティアニメーションを定義して
AnimatedVectorDrawableを作成
VectorDrawableの作成
SVG形式でパーツ作成
• Sketchを使用
• 下向き矢印
• 垂直棒
• 水平棒
• チェックマーク
• 円
• 波5パターン
SVGの書き出し
SVG書き出しが一番重要
• SVGファイルのパスは人間には読み辛い
• 後で修正したくない
コツ
• パーツ全部を含む大きなレイヤに一旦配置し
てから、表示を切り替えながら書き出す
SVG → VectorDrawable
• Android StudioのVector Asset Studio
• VectorDrawableに変換
<vector>
<path
pathData=“M10,20….”
strokeColor=“#ccc”/>
</vector>
×10
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>
AnimatedVectorDrawable
の作成
思い出す
プロパティアニメーション
• 色、大きさ(X,Y)、パス等
• 画像が持っている幾つかのプロパティは、
ある値からある値へ連続的に変化させられる
アニメーションを分解
• 0°から360°まで円弧が伸びる
• trimPathEndのプロパティアニメーション
• パスの変形
• pathDataのプロパティアニメーション
• パスを消す(現す)
• colorのプロパティアニメーション
縦棒の変形アニメーション
• 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”/>
円弧のアニメーション
• anim/oval.xml
<objectAnimator
propertyName=“trimPathEnd”
valueType=“floatType”
duration=“2000”
valueFrom=“0”
valueTo=“1.0”/>
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”/>………
タップしたら動くようにして完成
完

Androidにかっこよく動くアイコンを