Suche senden
Hochladen
第二回Android training4desinger 2
•
2 gefällt mir
•
1,079 views
Kengo Suzuki
Folgen
マネーフォワードにてデザイナーさん向けのAndroidアプリ開発の勉強会を実施しました。 主にanimationに関する講義と課題を実施してもらいました。
Weniger lesen
Mehr lesen
Ingenieurwesen
Melden
Teilen
Melden
Teilen
1 von 34
Jetzt herunterladen
Downloaden Sie, um offline zu lesen
Empfohlen
第一回Android training4desinger
第一回Android training4desinger
Kengo Suzuki
猫でも分かるUE4のポストプロセスを使った演出・絵作り
猫でも分かるUE4のポストプロセスを使った演出・絵作り
エピック・ゲームズ・ジャパン Epic Games Japan
MetaHumanサンプル解体新書 UNREAL FEST EXTREME 2021 SUMMER
MetaHumanサンプル解体新書 UNREAL FEST EXTREME 2021 SUMMER
エピック・ゲームズ・ジャパン Epic Games Japan
ポコロンダンジョンズを彩るアニメーションノウハウ
ポコロンダンジョンズを彩るアニメーションノウハウ
GameCreators,CyberAgent
20150123 第28回 Unity 勉強会「Unity に於けるビルド自動化のおはなし & 設定管理とリソース管理のおはなし」
20150123 第28回 Unity 勉強会「Unity に於けるビルド自動化のおはなし & 設定管理とリソース管理のおはなし」
Mori Tetsuya
Unity名古屋セミナー [Asset Store]
Unity名古屋セミナー [Asset Store]
MakotoItoh
UnityでUI開発を高速化した件
UnityでUI開発を高速化した件
Grenge, Inc.
Riot.jsと仲良くなるための僕的tips
Riot.jsと仲良くなるための僕的tips
Keisuke Imai
Weitere ähnliche Inhalte
Was ist angesagt?
『ポコロンダンジョンズ』エフェクトや演出制作ノウハウ
『ポコロンダンジョンズ』エフェクトや演出制作ノウハウ
GameCreators,CyberAgent
RPGにおけるイベント駆動型の設計と実装
RPGにおけるイベント駆動型の設計と実装
Koji Morikawa
シーケンサーの使い方と映像基礎
シーケンサーの使い方と映像基礎
Ginryu_dev
Viewのキャプチャを撮ってみる
Viewのキャプチャを撮ってみる
Yoshihiro Wada
"あんざいゆき" x "秋葉ちひろ" はカンファレンスアプリをどう作るのか?
"あんざいゆき" x "秋葉ちひろ" はカンファレンスアプリをどう作るのか?
Yuki Anzai
2D格闘ゲームにおけるユーザビリティとゲームデザインについて
2D格闘ゲームにおけるユーザビリティとゲームデザインについて
Koji Morikawa
Depth From Sequence
Depth From Sequence
yuichi takeda
Android Pattern Cookbook で見るトレンドの変遷
Android Pattern Cookbook で見るトレンドの変遷
Yuki Anzai
Unity入門ハンズオン
Unity入門ハンズオン
Kazuya Hiruma
【Unite 2018 Tokyo】Unityにおける疎結合設計 ~UIへの適用事例から学ぶ、テクニックとメリット~
【Unite 2018 Tokyo】Unityにおける疎結合設計 ~UIへの適用事例から学ぶ、テクニックとメリット~
UnityTechnologiesJapan002
Bloodstainedで世界のバッカーの期待に応えたUE4事例紹介
Bloodstainedで世界のバッカーの期待に応えたUE4事例紹介
エピック・ゲームズ・ジャパン Epic Games Japan
"有翼のフロイライン Wing of Darkness"と歩むUE4の世界
"有翼のフロイライン Wing of Darkness"と歩むUE4の世界
エピック・ゲームズ・ジャパン Epic Games Japan
Unity ゲーム開発
Unity ゲーム開発
Katsutoshi Makino
ゲーム開発を乗りこなせ! ヒストリア流ゲーム開発マネジメント手法
ゲーム開発を乗りこなせ! ヒストリア流ゲーム開発マネジメント手法
historia_Inc
リモート・スマホ・レンタル(第2回 Androidテスト祭り)
リモート・スマホ・レンタル(第2回 Androidテスト祭り)
NTT Resonant Technology Inc.
聖剣伝説3でのUE4利用事例の紹介~Making of Mana | UNREAL FEST EXTREME 2020 WINTER
聖剣伝説3でのUE4利用事例の紹介~Making of Mana | UNREAL FEST EXTREME 2020 WINTER
エピック・ゲームズ・ジャパン Epic Games Japan
Unity名古屋セミナー [プログラミングなしでゲーム開発]
Unity名古屋セミナー [プログラミングなしでゲーム開発]
MakotoItoh
VRでCGの世界に行ってみる!2017
VRでCGの世界に行ってみる!2017
Haruto Watanabe
ゲーム開発とデザインパターン
ゲーム開発とデザインパターン
Takashi Komada
『修羅道』制作事例 モバイルハイエンドグラフィックゲーム実現まで
『修羅道』制作事例 モバイルハイエンドグラフィックゲーム実現まで
エピック・ゲームズ・ジャパン Epic Games Japan
Was ist angesagt?
(20)
『ポコロンダンジョンズ』エフェクトや演出制作ノウハウ
『ポコロンダンジョンズ』エフェクトや演出制作ノウハウ
RPGにおけるイベント駆動型の設計と実装
RPGにおけるイベント駆動型の設計と実装
シーケンサーの使い方と映像基礎
シーケンサーの使い方と映像基礎
Viewのキャプチャを撮ってみる
Viewのキャプチャを撮ってみる
"あんざいゆき" x "秋葉ちひろ" はカンファレンスアプリをどう作るのか?
"あんざいゆき" x "秋葉ちひろ" はカンファレンスアプリをどう作るのか?
2D格闘ゲームにおけるユーザビリティとゲームデザインについて
2D格闘ゲームにおけるユーザビリティとゲームデザインについて
Depth From Sequence
Depth From Sequence
Android Pattern Cookbook で見るトレンドの変遷
Android Pattern Cookbook で見るトレンドの変遷
Unity入門ハンズオン
Unity入門ハンズオン
【Unite 2018 Tokyo】Unityにおける疎結合設計 ~UIへの適用事例から学ぶ、テクニックとメリット~
【Unite 2018 Tokyo】Unityにおける疎結合設計 ~UIへの適用事例から学ぶ、テクニックとメリット~
Bloodstainedで世界のバッカーの期待に応えたUE4事例紹介
Bloodstainedで世界のバッカーの期待に応えたUE4事例紹介
"有翼のフロイライン Wing of Darkness"と歩むUE4の世界
"有翼のフロイライン Wing of Darkness"と歩むUE4の世界
Unity ゲーム開発
Unity ゲーム開発
ゲーム開発を乗りこなせ! ヒストリア流ゲーム開発マネジメント手法
ゲーム開発を乗りこなせ! ヒストリア流ゲーム開発マネジメント手法
リモート・スマホ・レンタル(第2回 Androidテスト祭り)
リモート・スマホ・レンタル(第2回 Androidテスト祭り)
聖剣伝説3でのUE4利用事例の紹介~Making of Mana | UNREAL FEST EXTREME 2020 WINTER
聖剣伝説3でのUE4利用事例の紹介~Making of Mana | UNREAL FEST EXTREME 2020 WINTER
Unity名古屋セミナー [プログラミングなしでゲーム開発]
Unity名古屋セミナー [プログラミングなしでゲーム開発]
VRでCGの世界に行ってみる!2017
VRでCGの世界に行ってみる!2017
ゲーム開発とデザインパターン
ゲーム開発とデザインパターン
『修羅道』制作事例 モバイルハイエンドグラフィックゲーム実現まで
『修羅道』制作事例 モバイルハイエンドグラフィックゲーム実現まで
Andere mochten auch
unidad 3
unidad 3
Cecilia Mauricio Gaucin
Introduction to the Art of API Practice
Introduction to the Art of API Practice
Bill Doerrfeld
DSW Brand IT Services Local Buzz PowerPoint
DSW Brand IT Services Local Buzz PowerPoint
DSWBrandITServices
Presentation at the EHiN-FN and European Telemedicine conference 2016 http:/...
Presentation at the EHiN-FN and European Telemedicine conference 2016 http:/...
Isabelle Skinner
俺が! 俺たちが! Androidチームだ!
俺が! 俺たちが! Androidチームだ!
Kengo Suzuki
Prospecting POV
Prospecting POV
Nina Van Brunt
デザイナーだけどコーディングできないとダメ?
デザイナーだけどコーディングできないとダメ?
Saori Matsui
マテリアルデザインってなんですか?
マテリアルデザインってなんですか?
Saori Matsui
[会計freee] 1. 機能紹介
[会計freee] 1. 機能紹介
freee株式会社
クラウド会計ソフトfreee - ファイルボックス
クラウド会計ソフトfreee - ファイルボックス
freee株式会社
Andere mochten auch
(10)
unidad 3
unidad 3
Introduction to the Art of API Practice
Introduction to the Art of API Practice
DSW Brand IT Services Local Buzz PowerPoint
DSW Brand IT Services Local Buzz PowerPoint
Presentation at the EHiN-FN and European Telemedicine conference 2016 http:/...
Presentation at the EHiN-FN and European Telemedicine conference 2016 http:/...
俺が! 俺たちが! Androidチームだ!
俺が! 俺たちが! Androidチームだ!
Prospecting POV
Prospecting POV
デザイナーだけどコーディングできないとダメ?
デザイナーだけどコーディングできないとダメ?
マテリアルデザインってなんですか?
マテリアルデザインってなんですか?
[会計freee] 1. 機能紹介
[会計freee] 1. 機能紹介
クラウド会計ソフトfreee - ファイルボックス
クラウド会計ソフトfreee - ファイルボックス
Ähnlich wie 第二回Android training4desinger 2
Swift Study Vol.4
Swift Study Vol.4
Nagamine Hiromasa
Einsteinvision - object detection を試してみよう
Einsteinvision - object detection を試してみよう
Salesforce Developers Japan
私がSeleniumを使ってスクリーンショットを撮るまでに出会った闇の全て
私がSeleniumを使ってスクリーンショットを撮るまでに出会った闇の全て
Osamu Shimoda
第5回業開中心会議
第5回業開中心会議
Kaoru NAKAMURA
ニコニコ動画iOSアプリの UX・マネタイズ・技術の話
ニコニコ動画iOSアプリの UX・マネタイズ・技術の話
Kentaro Matsumae
ニコニコ学会 こしゅゆ 仮完成版
ニコニコ学会 こしゅゆ 仮完成版
koshuyu
OpenCV 3.0 on iOS
OpenCV 3.0 on iOS
Shuichi Tsutsumi
プログラム組んだら負け!実はHTML/CSSだけでできること2015夏
プログラム組んだら負け!実はHTML/CSSだけでできること2015夏
Yusuke Hirao
【17-E-4】 未来はどこにいても誰にでも平等にある。 未来を創るのは自分自身だ。 ~SIerの中で生きるということ~
【17-E-4】 未来はどこにいても誰にでも平等にある。 未来を創るのは自分自身だ。 ~SIerの中で生きるということ~
Yoshitaka Kawashima
「アーティスト活動」というプログラマの自己防衛術 - 坪倉輝明
「アーティスト活動」というプログラマの自己防衛術 - 坪倉輝明
Teruaki Tsubokura
LOUPE study#2
LOUPE study#2
Yuka Suzuki
裾野市プログラム勉強会(20170702)
裾野市プログラム勉強会(20170702)
Hiroyuki Ichikawa
Wankuma0402
Wankuma0402
c-mitsuba
初めてのVR/AR開発をUnityで
初めてのVR/AR開発をUnityで
Unity Technologies Japan K.K.
越境する開発 -Seek Right Things-
越境する開発 -Seek Right Things-
toshihiro ichitani
越境する開発 -Seek Right Things-
越境する開発 -Seek Right Things-
GuildWorks
予算ほぼゼロ! プロが教える、iPhoneでアプリやWEBサービスのプロモーション動画を作る方法 先生:小林 秀年
予算ほぼゼロ! プロが教える、iPhoneでアプリやWEBサービスのプロモーション動画を作る方法 先生:小林 秀年
schoowebcampus
【Unity道場 建築スペシャル】はじめてのUnity
【Unity道場 建築スペシャル】はじめてのUnity
Unity Technologies Japan K.K.
Web creed
Web creed
Net Kanayan
Androidアプリの魅力的なインターフェース〜本当にiOSアプリのデザインを流用するだけでいいの?〜
Androidアプリの魅力的なインターフェース〜本当にiOSアプリのデザインを流用するだけでいいの?〜
Chihiro Tomita
Ähnlich wie 第二回Android training4desinger 2
(20)
Swift Study Vol.4
Swift Study Vol.4
Einsteinvision - object detection を試してみよう
Einsteinvision - object detection を試してみよう
私がSeleniumを使ってスクリーンショットを撮るまでに出会った闇の全て
私がSeleniumを使ってスクリーンショットを撮るまでに出会った闇の全て
第5回業開中心会議
第5回業開中心会議
ニコニコ動画iOSアプリの UX・マネタイズ・技術の話
ニコニコ動画iOSアプリの UX・マネタイズ・技術の話
ニコニコ学会 こしゅゆ 仮完成版
ニコニコ学会 こしゅゆ 仮完成版
OpenCV 3.0 on iOS
OpenCV 3.0 on iOS
プログラム組んだら負け!実はHTML/CSSだけでできること2015夏
プログラム組んだら負け!実はHTML/CSSだけでできること2015夏
【17-E-4】 未来はどこにいても誰にでも平等にある。 未来を創るのは自分自身だ。 ~SIerの中で生きるということ~
【17-E-4】 未来はどこにいても誰にでも平等にある。 未来を創るのは自分自身だ。 ~SIerの中で生きるということ~
「アーティスト活動」というプログラマの自己防衛術 - 坪倉輝明
「アーティスト活動」というプログラマの自己防衛術 - 坪倉輝明
LOUPE study#2
LOUPE study#2
裾野市プログラム勉強会(20170702)
裾野市プログラム勉強会(20170702)
Wankuma0402
Wankuma0402
初めてのVR/AR開発をUnityで
初めてのVR/AR開発をUnityで
越境する開発 -Seek Right Things-
越境する開発 -Seek Right Things-
越境する開発 -Seek Right Things-
越境する開発 -Seek Right Things-
予算ほぼゼロ! プロが教える、iPhoneでアプリやWEBサービスのプロモーション動画を作る方法 先生:小林 秀年
予算ほぼゼロ! プロが教える、iPhoneでアプリやWEBサービスのプロモーション動画を作る方法 先生:小林 秀年
【Unity道場 建築スペシャル】はじめてのUnity
【Unity道場 建築スペシャル】はじめてのUnity
Web creed
Web creed
Androidアプリの魅力的なインターフェース〜本当にiOSアプリのデザインを流用するだけでいいの?〜
Androidアプリの魅力的なインターフェース〜本当にiOSアプリのデザインを流用するだけでいいの?〜
第二回Android training4desinger 2
1.
2015/09/06 鈴木 研吾 第1回 Androidトレーニング for デザイナー
2.
自己紹介 名前: 鈴木 研吾 twitter: @kengoScal 2011∼2014:セキュリティアナリスト@野村総研 2014年11月:
マネーフォワード入社 2014年11月∼2015年01月: iOS開発 2015年02月∼08月:Android開発 2015年10月∼ : セキュリティ某 2
3.
好きなMS OZ-00MS2 トールギスII
4.
アジェンダ 1. 本トレーニングの目的. Remix(1min) 2.
前回やったこと(1min) 3. 今日やること(目標)(1min) 4. 前回のおさらい(レイアウトの書き方) 5. コードの更新(10min) 6. アニメーションに関するレクチャー(20min) 7. 実習(40min) 4
5.
アジェンダ 1. 本トレーニングの目的. Remix 2.
前回やったこと 3. 今日やること(目標) 4. 前回のおさらい(レイアウトの書き方) 5. コードの更新 6. アニメーションに関するレクチャー 7. 実習 5
6.
本トレーニングの目的 1. デザイナー <̶>
エンジニア間でスムーズに意思疎通 するため、 2. Android開発における共通認識(言語)をもてるように する 3. きっかけを作る 6 デザイナ エンジニア
7.
アジェンダ 1. 本トレーニングの目的. Remix 2.
前回やったこと 3. 今日やること(目標) 4. 前回のおさらい(レイアウトの書き方) 5. コードの更新 6. アニメーションに関するレクチャー 7. 実習 7
8.
前回やったこと • かる∼いgitを使ってソースコードを落とす • Android
Studioでプロジェクトを開く • レイアウトの作り方@xmlに関するレクチャー • 実際にレイアウトを作る 8
9.
アジェンダ 1. 本トレーニングの目的. Remix 2.
前回やったこと 3. 今日やること(目標) 4. 前回のおさらい(レイアウトの書き方) 5. コードの更新 6. アニメーションに関するレクチャー 7. 実習 9
10.
今日やること 1. ソースコードを更新する方法を学んで 2. Androidのアニメーションを知る 10
11.
今日やらないこと • Java • Androidのフレームワーク •
単位dpにの詳しい説明 • 単位sp • マテリアルデザイン云々 11
12.
アジェンダ 1. 本トレーニングの目的. Remix(1min) 2.
前回やったこと(1min) 3. 今日やること(目標)(1min) 4. 前回のおさらい(レイアウトの書き方) 5. コードの更新(10min) 6. アニメーションに関するレクチャー(20min) 7. 実習(40min) 12
13.
アジェンダ 1. 本トレーニングの目的. Remix 2.
前回やったこと 3. 今日やること(目標) 4. 前回のおさらい(レイアウトの書き方) 5. コードの更新 6. アニメーションに関するレクチャー 7. 実習 13
14.
ソースコードの更新 (まだやらなくて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のコード版と考えてちょーだい
15.
では、各自実行してください • 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
16.
アジェンダ 1. 本トレーニングの目的. Remix 2.
前回やったこと 3. 今日やること(目標) 4. 前回のおさらい(レイアウトの書き方) 5. コードの更新 6. アニメーションに関するレクチャー 7. 実習 16
17.
アニメーションの種類@Android • View Animation
vs Drawable Animation • Viewアニメーション: 開始・終了位置、大きさ、角度などといった情 報からアニメーションを生成する方法 • Tween Animationとも • Drawableアニメーション: Drawableリソース(例: 画像ファイル)を 次々ロードさせることでアニメーションを生成する方法 • 要はパラパラ漫画 • Frame Animationとも • 今日はViewアニメーションをやります 17
18.
Viewアニメーション • 位置(translate)、大きさ(scale)、角度(rotate)、透過 度(alpha)などといったアニメーションの種類を指定す る方法 • 上記を一つのViewに対して実行する 18
19.
Viewってなんぞ? • 楽しい復習の時間ンゴねぇ… • View:
画面を構成する要素となるパーツ • TextView • EditText • ImageView • Button • etc • MyApplicationアプリの「非レイアウトView」を参照 19
20.
ここへ ここから • つまり… • 例えば下記の様なImageViewがあるとすると •
上記のImageViewに対して下記を指定 • 位置 • 大きさ • 角度 • 透過度 Viewアニメーションの種類 20
21.
Viewアニメーションの種類 • つまり… • 例えば下記の様なImageViewがあるとすると •
上記のImageViewに対して下記を指定 • 位置 • 大きさ • 角度 • 透過度 21
22.
Viewアニメーションの種類 • つまり… • 例えば下記の様なImageViewがあるとすると •
上記のImageViewに対して下記を指定 • 位置 • 大きさ • 角度 • 透過度 22
23.
Viewアニメーションの種類 • つまり… • 例えば下記の様なImageViewがあるとすると •
上記のImageViewに対して下記を指定 • 位置 • 大きさ • 角度 • 透過度 23
24.
デモ • 「アニメーション(単一)」をクリック • 「アニメーション開始」ボタンをクリック 24
25.
つまらない話Viewアニメーションの共通パラメタ • app/src/main/java/res/anim配下のファイルを参照 • 共通パラメタ •
fillAfter: アニメーション終了時の状態を維持するか • 単一アニメーションの場合はsetタグ内に書かないとダ メっぽい • interpolator: アニメーションの運動の定義(速度の定義) • 単一アニメーションの場合はsetタグ内に書かないとダ メっぽい • startOffset: アニメーション開始のオフセット時間(ミリ) • duration: アニメーションの時間(ミリ) • pivotX[pivotY]: アニメーションの起点 25
26.
つまらない話Viewアニメーションの個別パラメタ • translate/scale アニメーションのパラメタ •
fromX****: 開始時の幅に関するパラメタ • fromY****: 開始時の高さに関する略 • toX****: 終了時の幅に略 • toY****: 終了時の略 • rotateアニメーションのパラメタ • fromDegree: 開始時の角度略 • toDegree: 略 (時計回り) • alpha • fromAlpha: 開始時の略 • toAlpha: 略 26
27.
つまらない話from****の単位 • % ->
自分自身のViewの位置を参照した相対位置 • %p -> 親Viewを参照した絶対位置 27
28.
(余談)ファイル自体は変換されてない • みためだけ 28
29.
(余談)これをXMLで書く! • 別にコードで書いてもいいんだけど、xmlで書けば再 利用できるので得 • あと、アニメーションに関する仕様(デザインコード) が変更になっても変更範囲が小さくて済む •
学習コスト少ない 29
30.
アニメーションの組み合わせ • 各アニメーションを組み合わせることも可能 30
31.
デモ • 「アニメーション(複合)」をクリック • 「アニメーション開始」ボタンをクリック 31
32.
同時実行 or 連続実行 •
app/src/main/java/res/anim配下のファイルを参照 • 同時実行: startOffsetを同じにする(デフォルト=0) • 連続実行: アニメーションのstartOffset = 一個前の アニメーションのstartOffset + duration • つまりずらす 32
33.
実習 • Android版アプリの手入力カテゴリ選択部分のアニメー ションの実装 • タップ対象のアイコン
-> 1.5 倍に拡大 • aim_focused_category_icon.xmlに記述 • 選択されないアイコン -> 元の大きさにし、更に透過 度を30%にする • 尚、元の大きさに戻すスピードは0.48ミリ秒で • 透過度を下げるスピードは0.36ミリ秒で • aim_unfocused_category_icon.xmlに記述 33
34.
Thank you!
Jetzt herunterladen