Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
グっとよくなる
アニメーションの使い方
2015/11/26
平山 光太郎
・基本的な動き
・実例
・注意したいこと
コンテンツ
基本的な動き
一定移動
ease
linear
ease-in
ease-out
ease-in-out
開始がゆっくり
開始と完了が滑らか
完了がゆっくり
開始と完了がゆっくり
一定移動
ease
linear
ease-in
ease-out
ease-in-out
開始がゆっくり
開始と完了が滑らか
完了がゆっくり
開始と完了がゆっくり
・デザイナからの支持が厚い
・プロトタイプでよく使われる
一定移動
ease
linear
ease-in
ease-out
ease-in-out
開始がゆっくり
開始と完了が滑らか
完了がゆっくり
開始と完了がゆっくり
・エンジニアが使いがち
・デフォで使われがち
実例
linear(なんかもっさり)
http://codepen.io/anon/pen/PPMJOd
ease-in & ease-out組み合わせ(ぬるっと動く感じ)
http://codepen.io/anon/pen/dYBpwW
metr...
注意点
・ちゃんと使わないと実装者の自己満
・タイミングはよくても動き次第でもっさりしちゃう
・タイミングが大事(ホワイトアウトとか)
・数学の知識大事
数学の知識
中心部分のようなsin & cosの組み合わせで瞳の動きみたいな
のを作ったり(4周期に一度3個の円が重なる)
http://khirayama.github.io/javascript-
animation/lessons/les...
まとめ
動き方・タイミングを意識して使おう 
自己満なアニメーションはUXを落とすぉ 
メンテがつらくはなるので、メリットが上回ったときだけ使おう 
◯おすすめライブラリとか 
TweenMAX 
Velocity.js 
p5.js 
OpenFrameworks 
processing 
  ◯動き方について 
http://the12principles.tumblr.com/ 
ディ...
Thank you!
Upcoming SlideShare
Loading in …5
×

グッとよくなるアニメーションの使い方

1,850 views

Published on

ウェブサイトなどに使えるアニメーションの知識

Published in: Software
  • ACCESS that WEBSITE Over for All Ebooks (Unlimited) ......................................................................................................................... DOWNLOAD FULL PDF EBOOK here { http://bit.ly/2m6jJ5M } ......................................................................................................................... DOWNLOAD FULL EPUB Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download Full PDF EBOOK here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download EPUB Ebook here { http://bit.ly/2m6jJ5M }
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • ACCESS that WEBSITE Over for All Ebooks (Unlimited) ......................................................................................................................... DOWNLOAD FULL PDF EBOOK here { http://bit.ly/2m6jJ5M } ......................................................................................................................... DOWNLOAD FULL EPUB Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download Full PDF EBOOK here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download EPUB Ebook here { http://bit.ly/2m6jJ5M }
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • ACCESS that WEBSITE Over for All Ebooks (Unlimited) ......................................................................................................................... DOWNLOAD FULL PDF EBOOK here { http://bit.ly/2m6jJ5M } ......................................................................................................................... DOWNLOAD FULL EPUB Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download Full PDF EBOOK here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download EPUB Ebook here { http://bit.ly/2m6jJ5M }
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • DOWNLOAD THIS BOOKS INTO AVAILABLE FORMAT (Unlimited) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... Download Full EPUB Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... ACCESS WEBSITE for All Ebooks ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... Download EPUB Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... Download doc Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • DOWNLOAD THIS BOOKS INTO AVAILABLE FORMAT (Unlimited) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... Download Full EPUB Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... ACCESS WEBSITE for All Ebooks ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... Download EPUB Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... Download doc Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

グッとよくなるアニメーションの使い方

  1. 1. グっとよくなる アニメーションの使い方 2015/11/26 平山 光太郎
  2. 2. ・基本的な動き ・実例 ・注意したいこと コンテンツ
  3. 3. 基本的な動き
  4. 4. 一定移動 ease linear ease-in ease-out ease-in-out 開始がゆっくり 開始と完了が滑らか 完了がゆっくり 開始と完了がゆっくり
  5. 5. 一定移動 ease linear ease-in ease-out ease-in-out 開始がゆっくり 開始と完了が滑らか 完了がゆっくり 開始と完了がゆっくり ・デザイナからの支持が厚い ・プロトタイプでよく使われる
  6. 6. 一定移動 ease linear ease-in ease-out ease-in-out 開始がゆっくり 開始と完了が滑らか 完了がゆっくり 開始と完了がゆっくり ・エンジニアが使いがち ・デフォで使われがち
  7. 7. 実例
  8. 8. linear(なんかもっさり) http://codepen.io/anon/pen/PPMJOd ease-in & ease-out組み合わせ(ぬるっと動く感じ) http://codepen.io/anon/pen/dYBpwW metrogram(http://nulldesign.jp/metrogram/) ベジェ曲線、linear、ease-outなどいろんな動きがある 実例
  9. 9. 注意点 ・ちゃんと使わないと実装者の自己満 ・タイミングはよくても動き次第でもっさりしちゃう ・タイミングが大事(ホワイトアウトとか) ・数学の知識大事
  10. 10. 数学の知識 中心部分のようなsin & cosの組み合わせで瞳の動きみたいな のを作ったり(4周期に一度3個の円が重なる) http://khirayama.github.io/javascript- animation/lessons/lesson1/ 距離計算などを使って惹かれ合う点を作る http://khirayama.github.io/javascript- animation/works/PullDots/
  11. 11. まとめ
  12. 12. 動き方・タイミングを意識して使おう  自己満なアニメーションはUXを落とすぉ  メンテがつらくはなるので、メリットが上回ったときだけ使おう 
  13. 13. ◯おすすめライブラリとか  TweenMAX  Velocity.js  p5.js  OpenFrameworks  processing    ◯動き方について  http://the12principles.tumblr.com/  ディズニーで使われている動きを  ダイナミックにみせる12の方法的なの 
  14. 14. Thank you!

×