第二回android training4desinger 2

2015/09/06 鈴木　研吾

第1回 Androidトレーニング for

デザイナー

自己紹介

名前: 鈴木　研吾 twitter: @kengoScal

2011～2014：セキュリティアナリスト@野村総研 2014年11月：マネーフォワード入社 2014年11月～2015年01月： iOS開発 2015年02月～08月：Android開発 2015年10月～ : セキュリティ某

2

好きなMS

OZ-00MS2 トールギスII

アジェンダ

1. 本トレーニングの目的. Remix(1min) 2. 前回やったこと(1min) 3. 今日やること(目標)(1min) 4. 前回のおさらい（レイアウトの書き方） 5. コードの更新(10min) 6. アニメーションに関するレクチャー(20min) 7. 実習(40min)

4

アジェンダ

1. 本トレーニングの目的. Remix 2. 前回やったこと 3. 今日やること(目標) 4. 前回のおさらい（レイアウトの書き方） 5. コードの更新 6. アニメーションに関するレクチャー 7. 実習

5

本トレーニングの目的

1. デザイナー <̶> エンジニア間でスムーズに意思疎通するため、

2. Android開発における共通認識(言語)をもてるようにする

3. きっかけを作る　

6

デザイナエンジニア

アジェンダ


7

前回やったこと

• かる～いgitを使ってソースコードを落とす • Android Studioでプロジェクトを開く • レイアウトの作り方@xmlに関するレクチャー • 実際にレイアウトを作る

8

アジェンダ


9

今日やること

1. ソースコードを更新する方法を学んで 2. Androidのアニメーションを知る

10

今日やらないこと

• Java • Androidのフレームワーク • 単位dpにの詳しい説明 • 単位sp • マテリアルデザイン云々

11

アジェンダ

1. 本トレーニングの目的. Remix(1min) 2. 前回やったこと(1min) 3. 今日やること(目標)(1min) 4. 前回のおさらい（レイアウトの書き方） 5. コードの更新(10min) 6. アニメーションに関するレクチャー(20min) 7. 実習(40min)

12

アジェンダ


13

ソースコードの更新 (まだやらなくてok)

• terminal立ち上げ • spotlightからterminalとうてばおk

• mkdir ~/Desktop/workspace • cd ~/Desktop/workspace • ls -l | grep -i AndroidTraining4Designer

• なければ git clone https://github.com/ken5scal/AndroidTraining4Designer.git

• cd AndroidTraining4Designer • git fetch origin • git merge origin/master

14

Invisionのコード版と考えてちょーだい　

https://github.com/ken5scal/AndroidTraining4Designer.git

では、各自実行してください

• terminal立ち上げ • spotlightからterminalとうてばおk

• mkdir ~/Desktop/workspace • cd ~/Desktop/workspace • ls -l | grep -i AndroidTraining4Designer

• なければ git clone https://github.com/ken5scal/AndroidTraining4Designer.git

• cd AndroidTraining4Designer • git fetch origin • git merge origin/master

15

https://github.com/ken5scal/AndroidTraining4Designer.git

アジェンダ


16

アニメーションの種類@Android

• View Animation vs Drawable Animation • Viewアニメーション: 開始・終了位置、大きさ、角度などといった情報からアニメーションを生成する方法 • Tween Animationとも

• Drawableアニメーション: Drawableリソース(例: 画像ファイル)を次々ロードさせることでアニメーションを生成する方法 • 要はパラパラ漫画 • Frame Animationとも

• 今日はViewアニメーションをやります

17

Viewアニメーション

• 位置(translate)、大きさ(scale)、角度(rotate)、透過度(alpha)などといったアニメーションの種類を指定する方法

• 上記を一つのViewに対して実行する

18

Viewってなんぞ？

• 楽しい復習の時間ンゴねぇ… • View: 画面を構成する要素となるパーツ • TextView • EditText • ImageView • Button • etc

• MyApplicationアプリの「非レイアウトView」を参照

19

ここへ

ここから

• つまり… • 例えば下記の様なImageViewがあるとすると

• 上記のImageViewに対して下記を指定 • 位置 • 大きさ • 角度 • 透過度

Viewアニメーションの種類

20




21




22




23

デモ

• 「アニメーション（単一）」をクリック • 「アニメーション開始」ボタンをクリック

24

つまらない話Viewアニメーションの共通パラメタ

• app/src/main/java/res/anim配下のファイルを参照 • 共通パラメタ • fillAfter: アニメーション終了時の状態を維持するか • 単一アニメーションの場合はsetタグ内に書かないとダメっぽい

• interpolator: アニメーションの運動の定義（速度の定義) • 単一アニメーションの場合はsetタグ内に書かないとダメっぽい

• startOffset: アニメーション開始のオフセット時間(ミリ) • duration: アニメーションの時間(ミリ) • pivotX[pivotY]: アニメーションの起点

25

つまらない話Viewアニメーションの個別パラメタ

• translate/scale アニメーションのパラメタ • fromX****: 開始時の幅に関するパラメタ • fromY****: 開始時の高さに関する略 • toX****: 終了時の幅に略 • toY****: 終了時の略

• rotateアニメーションのパラメタ • fromDegree: 開始時の角度略 • toDegree: 略 (時計回り)

• alpha • fromAlpha: 開始時の略 • toAlpha: 略

26

つまらない話from****の単位

• % -> 自分自身のViewの位置を参照した相対位置 • %p -> 親Viewを参照した絶対位置

27

(余談)ファイル自体は変換されてない

• みためだけ

28

(余談)これをXMLで書く!

• 別にコードで書いてもいいんだけど、xmlで書けば再利用できるので得

• あと、アニメーションに関する仕様(デザインコード)が変更になっても変更範囲が小さくて済む

• 学習コスト少ない

29

アニメーションの組み合わせ

• 各アニメーションを組み合わせることも可能

30

デモ

• 「アニメーション（複合）」をクリック • 「アニメーション開始」ボタンをクリック

31

同時実行 or 連続実行

• app/src/main/java/res/anim配下のファイルを参照 • 同時実行: startOffsetを同じにする(デフォルト=0) • 連続実行: アニメーションのstartOffset = 一個前のアニメーションのstartOffset + duration • つまりずらす

32

実習

• Android版アプリの手入力カテゴリ選択部分のアニメーションの実装

• タップ対象のアイコン -> 1.5 倍に拡大 • aim_focused_category_icon.xmlに記述

• 選択されないアイコン -> 元の大きさにし、更に透過度を30%にする • 尚、元の大きさに戻すスピードは0.48ミリ秒で • 透過度を下げるスピードは0.36ミリ秒で • aim_unfocused_category_icon.xmlに記述

33

Thank you!

第二回android training4desinger 2

Engineering