Submit Search
Upload
グラフィックエンジニア必見!イージングの数学
•
Download as PPTX, PDF
•
1 like
•
3,436 views
Yu(u)ki IWABUCHI
Follow
第5回 プログラマのための数学勉強会 LT発表資料です。 (2015年11月21日)
Read less
Read more
Technology
Report
Share
Report
Share
1 of 16
Download now
Recommended
Aaなゲームをjsで
Aaなゲームをjsで
Moriyoshi Koizumi
HTML5のCanvas入門 - Img画像を編集してみよう -
HTML5のCanvas入門 - Img画像を編集してみよう -
Toshio Ehara
㉗HTML5+jQueryでお絵かき
㉗HTML5+jQueryでお絵かき
Nishida Kansuke
「プログラマのためのビジネス数学入門」第5回プログラマのための数学勉強会LT
「プログラマのためのビジネス数学入門」第5回プログラマのための数学勉強会LT
Toshikatsu Masui
Google Apps Script で解く、数学パズル
Google Apps Script で解く、数学パズル
Koe Hatone
Yahoo150522
Yahoo150522
kyutoku
プログラマのための線形代数再入門2 〜 要件定義から学ぶ行列式と逆行列
プログラマのための線形代数再入門2 〜 要件定義から学ぶ行列式と逆行列
Taketo Sano
プログラマのための線形代数再入門
プログラマのための線形代数再入門
Taketo Sano
Recommended
Aaなゲームをjsで
Aaなゲームをjsで
Moriyoshi Koizumi
HTML5のCanvas入門 - Img画像を編集してみよう -
HTML5のCanvas入門 - Img画像を編集してみよう -
Toshio Ehara
㉗HTML5+jQueryでお絵かき
㉗HTML5+jQueryでお絵かき
Nishida Kansuke
「プログラマのためのビジネス数学入門」第5回プログラマのための数学勉強会LT
「プログラマのためのビジネス数学入門」第5回プログラマのための数学勉強会LT
Toshikatsu Masui
Google Apps Script で解く、数学パズル
Google Apps Script で解く、数学パズル
Koe Hatone
Yahoo150522
Yahoo150522
kyutoku
プログラマのための線形代数再入門2 〜 要件定義から学ぶ行列式と逆行列
プログラマのための線形代数再入門2 〜 要件定義から学ぶ行列式と逆行列
Taketo Sano
プログラマのための線形代数再入門
プログラマのための線形代数再入門
Taketo Sano
音楽にまつわる数学 〜「倍音」で理解する和音と音色〜
音楽にまつわる数学 〜「倍音」で理解する和音と音色〜
Yu(u)ki IWABUCHI
明日機械学習に役立つかもしれない数学
明日機械学習に役立つかもしれない数学
Yu(u)ki IWABUCHI
IFSを使ったフラクタルの描画
IFSを使ったフラクタルの描画
Yu(u)ki IWABUCHI
フラクタル音楽 〜可視化と可聴化の世界〜
フラクタル音楽 〜可視化と可聴化の世界〜
Yu(u)ki IWABUCHI
ラスタとベクタ
ラスタとベクタ
Yu(u)ki IWABUCHI
ワイソフ配列について
ワイソフ配列について
Yu(u)ki IWABUCHI
名のあるフラクタルたち
名のあるフラクタルたち
Yu(u)ki IWABUCHI
自己紹介とパズル紹介
自己紹介とパズル紹介
Yu(u)ki IWABUCHI
かんたんベジェ曲線
かんたんベジェ曲線
Yu(u)ki IWABUCHI
Mathematicaで機械学習してみた
Mathematicaで機械学習してみた
Yu(u)ki IWABUCHI
加法よりも低レベルな演算を考える
加法よりも低レベルな演算を考える
Yu(u)ki IWABUCHI
サイエンスアゴラ研究100連発 〜目に見えて楽しい数学〜
サイエンスアゴラ研究100連発 〜目に見えて楽しい数学〜
Yu(u)ki IWABUCHI
Bad Apple Curve!! 〜フーリエ記述子でアニメーション作ってみた〜
Bad Apple Curve!! 〜フーリエ記述子でアニメーション作ってみた〜
Yu(u)ki IWABUCHI
コンピュータで全く使われない数表現
コンピュータで全く使われない数表現
Yu(u)ki IWABUCHI
いただきます。
いただきます。
Yu(u)ki IWABUCHI
フラクタル概説
フラクタル概説
Yu(u)ki IWABUCHI
論文紹介:Video-GroundingDINO: Towards Open-Vocabulary Spatio-Temporal Video Groun...
論文紹介:Video-GroundingDINO: Towards Open-Vocabulary Spatio-Temporal Video Groun...
Toru Tamaki
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
iPride Co., Ltd.
論文紹介:Selective Structured State-Spaces for Long-Form Video Understanding
論文紹介:Selective Structured State-Spaces for Long-Form Video Understanding
Toru Tamaki
新人研修 後半 2024/04/26の勉強会で発表されたものです。
新人研修 後半 2024/04/26の勉強会で発表されたものです。
iPride Co., Ltd.
LoRaWANスマート距離検出センサー DS20L カタログ LiDARデバイス
LoRaWANスマート距離検出センサー DS20L カタログ LiDARデバイス
CRI Japan, Inc.
論文紹介: The Surprising Effectiveness of PPO in Cooperative Multi-Agent Games
論文紹介: The Surprising Effectiveness of PPO in Cooperative Multi-Agent Games
atsushi061452
More Related Content
More from Yu(u)ki IWABUCHI
音楽にまつわる数学 〜「倍音」で理解する和音と音色〜
音楽にまつわる数学 〜「倍音」で理解する和音と音色〜
Yu(u)ki IWABUCHI
明日機械学習に役立つかもしれない数学
明日機械学習に役立つかもしれない数学
Yu(u)ki IWABUCHI
IFSを使ったフラクタルの描画
IFSを使ったフラクタルの描画
Yu(u)ki IWABUCHI
フラクタル音楽 〜可視化と可聴化の世界〜
フラクタル音楽 〜可視化と可聴化の世界〜
Yu(u)ki IWABUCHI
ラスタとベクタ
ラスタとベクタ
Yu(u)ki IWABUCHI
ワイソフ配列について
ワイソフ配列について
Yu(u)ki IWABUCHI
名のあるフラクタルたち
名のあるフラクタルたち
Yu(u)ki IWABUCHI
自己紹介とパズル紹介
自己紹介とパズル紹介
Yu(u)ki IWABUCHI
かんたんベジェ曲線
かんたんベジェ曲線
Yu(u)ki IWABUCHI
Mathematicaで機械学習してみた
Mathematicaで機械学習してみた
Yu(u)ki IWABUCHI
加法よりも低レベルな演算を考える
加法よりも低レベルな演算を考える
Yu(u)ki IWABUCHI
サイエンスアゴラ研究100連発 〜目に見えて楽しい数学〜
サイエンスアゴラ研究100連発 〜目に見えて楽しい数学〜
Yu(u)ki IWABUCHI
Bad Apple Curve!! 〜フーリエ記述子でアニメーション作ってみた〜
Bad Apple Curve!! 〜フーリエ記述子でアニメーション作ってみた〜
Yu(u)ki IWABUCHI
コンピュータで全く使われない数表現
コンピュータで全く使われない数表現
Yu(u)ki IWABUCHI
いただきます。
いただきます。
Yu(u)ki IWABUCHI
フラクタル概説
フラクタル概説
Yu(u)ki IWABUCHI
More from Yu(u)ki IWABUCHI
(16)
音楽にまつわる数学 〜「倍音」で理解する和音と音色〜
音楽にまつわる数学 〜「倍音」で理解する和音と音色〜
明日機械学習に役立つかもしれない数学
明日機械学習に役立つかもしれない数学
IFSを使ったフラクタルの描画
IFSを使ったフラクタルの描画
フラクタル音楽 〜可視化と可聴化の世界〜
フラクタル音楽 〜可視化と可聴化の世界〜
ラスタとベクタ
ラスタとベクタ
ワイソフ配列について
ワイソフ配列について
名のあるフラクタルたち
名のあるフラクタルたち
自己紹介とパズル紹介
自己紹介とパズル紹介
かんたんベジェ曲線
かんたんベジェ曲線
Mathematicaで機械学習してみた
Mathematicaで機械学習してみた
加法よりも低レベルな演算を考える
加法よりも低レベルな演算を考える
サイエンスアゴラ研究100連発 〜目に見えて楽しい数学〜
サイエンスアゴラ研究100連発 〜目に見えて楽しい数学〜
Bad Apple Curve!! 〜フーリエ記述子でアニメーション作ってみた〜
Bad Apple Curve!! 〜フーリエ記述子でアニメーション作ってみた〜
コンピュータで全く使われない数表現
コンピュータで全く使われない数表現
いただきます。
いただきます。
フラクタル概説
フラクタル概説
Recently uploaded
論文紹介:Video-GroundingDINO: Towards Open-Vocabulary Spatio-Temporal Video Groun...
論文紹介:Video-GroundingDINO: Towards Open-Vocabulary Spatio-Temporal Video Groun...
Toru Tamaki
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
iPride Co., Ltd.
論文紹介:Selective Structured State-Spaces for Long-Form Video Understanding
論文紹介:Selective Structured State-Spaces for Long-Form Video Understanding
Toru Tamaki
新人研修 後半 2024/04/26の勉強会で発表されたものです。
新人研修 後半 2024/04/26の勉強会で発表されたものです。
iPride Co., Ltd.
LoRaWANスマート距離検出センサー DS20L カタログ LiDARデバイス
LoRaWANスマート距離検出センサー DS20L カタログ LiDARデバイス
CRI Japan, Inc.
論文紹介: The Surprising Effectiveness of PPO in Cooperative Multi-Agent Games
論文紹介: The Surprising Effectiveness of PPO in Cooperative Multi-Agent Games
atsushi061452
知識ゼロの営業マンでもできた!超速で初心者を脱する、悪魔的学習ステップ3選.pptx
知識ゼロの営業マンでもできた!超速で初心者を脱する、悪魔的学習ステップ3選.pptx
sn679259
Observabilityは従来型の監視と何が違うのか(キンドリルジャパン社内勉強会:2022年10月27日発表)
Observabilityは従来型の監視と何が違うのか(キンドリルジャパン社内勉強会:2022年10月27日発表)
Hiroshi Tomioka
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
iPride Co., Ltd.
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
CRI Japan, Inc.
Utilizing Ballerina for Cloud Native Integrations
Utilizing Ballerina for Cloud Native Integrations
WSO2
Recently uploaded
(11)
論文紹介:Video-GroundingDINO: Towards Open-Vocabulary Spatio-Temporal Video Groun...
論文紹介:Video-GroundingDINO: Towards Open-Vocabulary Spatio-Temporal Video Groun...
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
論文紹介:Selective Structured State-Spaces for Long-Form Video Understanding
論文紹介:Selective Structured State-Spaces for Long-Form Video Understanding
新人研修 後半 2024/04/26の勉強会で発表されたものです。
新人研修 後半 2024/04/26の勉強会で発表されたものです。
LoRaWANスマート距離検出センサー DS20L カタログ LiDARデバイス
LoRaWANスマート距離検出センサー DS20L カタログ LiDARデバイス
論文紹介: The Surprising Effectiveness of PPO in Cooperative Multi-Agent Games
論文紹介: The Surprising Effectiveness of PPO in Cooperative Multi-Agent Games
知識ゼロの営業マンでもできた!超速で初心者を脱する、悪魔的学習ステップ3選.pptx
知識ゼロの営業マンでもできた!超速で初心者を脱する、悪魔的学習ステップ3選.pptx
Observabilityは従来型の監視と何が違うのか(キンドリルジャパン社内勉強会:2022年10月27日発表)
Observabilityは従来型の監視と何が違うのか(キンドリルジャパン社内勉強会:2022年10月27日発表)
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
Utilizing Ballerina for Cloud Native Integrations
Utilizing Ballerina for Cloud Native Integrations
グラフィックエンジニア必見!イージングの数学
1.
第5回 プログラマのための数学勉強会 グラフィックエンジニア必見! イージングの数学 岩淵 勇樹
( @butchi_y )
2.
イージングとは ― Wikipediaより
3.
イージングとは ―Googleより
4.
→ 緩急が付いている! イージングの例 イージングなし イージングあり
5.
JavaScript (jQuery) animateの引数にテキストで指定する “linear”と“swing”しかない 記述例: $("div.ball").animate({ left: "300px"; },
3000, "swing");
6.
jQuery Easing Plugin(JavaScriptライブラリ) animateの引数に指定できるバリエーションが30種類以上に増える 記述例: $("div.ball").animate({ left:
"300px"; }, 3000, "easeInCubic"); ※ <script src=”jquery.easing.js”> がHTMLに必要
7.
CSSアニメーション animationとtransition(IE10〜)に指定可能(CSS3) 適宜@keyframesプロパティと組み合わせて使う 記述例: div.sample { animation: anime1
5s ease -2s infinite alternate; } @keyframes anime1 { 0% {width: 50px; height: 50px; background-color: aqua;} 100% {width: 200px; height: 50px; background-color: blue;} }
8.
Flash 「クラシックトゥイーン」ではease-in/outの強度のみ指定可能 「(新しい)モーショントゥイーン」では 「モーションエディタ」によりかなり柔軟なイージングが可能
9.
イージングの数学 jQuery Easing Pluginの中身 easeInCubic:
function (x, t, b, c, d) { return c*(t/=d)*t*t + b; }, easeOutSine: function (x, t, b, c, d) { return c * Math.sin(t/d * (Math.PI/2)) + b; }, 3乗 正弦関数 数学だ!
10.
イージングの問題点 値は基本、0で始まり1で終わる →元に戻るアニメーションを作れない (あくまで「緩急をつける」という役割と割り切るなら順当ですが…) 数学関数作るのには知識も労力も要る →エグいんです! 微調整が難しい
11.
ライブラリ作ってみた その名もbease https://github.com/butchi/bease
12.
オリジナルライブラリbeaseの特徴 イージング関数の元は数値の配列(棒グラフ的) さまざまな補間形式に対応(←) 線形補間の場合、計算が高速(未検証) 原理的にはどんなイージング関数でも作れる
13.
作ってみて 線形補間(一次式)するだけで意外となんとかなる 他の補間は使いものにならない(要改良) jQueryとの連携が思ったよりすんなりいった 波形エディタの実装が難儀だった(でもRaphaelはすごい)
14.
15.
cubic-bezier CSS3の標準的なイージング関数 3次のベジェ曲線 jQuery Easing Pluginのイージング関数を ほとんど再現できるが、どうしても無理なものもある 記述例:
cubic-bezier(.17,.67,.83,.67)
16.
Next Thing... _人人人人人人人_ > ベジェ曲線
<  ̄Y^Y^Y^Y^Y^Y ̄ の話も乞うご期待!!
Editor's Notes
イージングは、CSSアニメーションやjQueryで、アニメーションに緩急をつけるために使うプロパティです。 CSSやjQueryでアニメーションを作るとき、ease-inとか、linearとか、設定することがあると思います。
Download now