Graviness Blog

算数・数学・科学・電脳・雑記・アホの順の密度で記事が構成されます.
<< December 2017 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 >> ブログランキング・にほんブログ村へ
 
RECOMMEND
ビッグバン宇宙論 (上)
ビッグバン宇宙論 (上) (JUGEMレビュー »)
サイモン・シン, 青木 薫
RECENT COMMENT
  • 豊臣秀吉と曾呂利新左衛門から学ぶ数列の和
    優乃 (07/12)
  • 【誰か解いて】漸化式 a_(n+1) = f(n) * a_n ^ g(n) + h(n) の一般項
    優乃 (02/18)
  • 【誰か解いて】漸化式 a_(n+1) = f(n) * a_n ^ g(n) + h(n) の一般項
    S.S.+ (02/16)
  • 豊臣秀吉と曾呂利新左衛門から学ぶ数列の和
    坂井昭 (03/19)
  • d/dx(x↑↑n): 高さが定数のテトレーションの微分 - 数学的帰納法を用いる方法
    (09/30)
  • 全ての三角形は二等辺三角形
    優乃 (09/28)
  • 全ての三角形は二等辺三角形
    亀レス (09/28)
  • 全ての三角形は二等辺三角形
    優乃 (09/24)
  • 全ての三角形は二等辺三角形
    亀レス (09/23)
  • 【未解決】新しい演算子を創る
    $_ (09/10)
RECENT TRACKBACK
MOBILE
qrcode
PROFILE
無料ブログ作成サービス JUGEM
 
【数学・DHTML】 イージング [Easing] (5)
イージングとは,コマ割(時間的分割)を変化させることにより,加速・減速を考慮したアニメーションを実現する方法です.Adobe Flashで使用されています.

本記事は,前回記事の改良版です.数学的に言えば,よりエレガントな式を提示します.改良によるアプリレベルでのメリットは以下です.

・パラメータ変更による加速・減速の変化が,より自然で連続的.

イージングに関する記事はおそらくこれが最終版です.この記事に関しては,Adobeのアルゴリズムを超えたんじゃないかと思っています.
前回記事の以下の文から説明します.

直感的にpの値を決めますが,0と1の半分でなんとなく良さそうなp = 0.5の場合を考えます.

言うと,この直感の精度が悪かったことになりますがw,置き換えるのはpではなく,qとし改めて以下のように置き換えます.

  q = 1 - p

与式の0 ≦ t ≦ 1,0 ≦ s ≦ 1において,対称性を意識した置き換えです.これを前回の⊆阿謀用すると,sは以下の式になります.

  s = g(t) = t / (t + (p / (1 - p)) * (1 - t))
  ただし,0 < p < 1

この式は,g'(p) = 1,g(p) = 1 - p = q など,パラメータpに関して,対称性の高い特徴を持ちます.これに前回記事同様,上限値などを与え以下の結論が得られます.

【結論】

軌跡x = x(t), y = y(t)が与えられているとき,

  x = x(s)
  y = y(s)
  s = t / (t + ((100 - kv) / (100 + kv))2 * (1 - t))

  ただし,0.0 ≦ t ≦ 1.0.
  kは,0 < k < 1を満たす固定値.
  vは,-100 ≦ v ≦ +100であり,小さいほど加速,大きいほど減速,0のとき等速.

とすれば良い.

【プログラム上の注意】

プログラム上では,k(0.5〜0.95あたりを推奨)が固定値であることを考慮して,以下のように変形しておくと良いかも知れません.

  s = t / (t + (1 - (4 * a * v) / ((a + v) * (a + v))) * (1 - t))
  a = 100 / k
  ただし,0.0 ≦ t ≦ 1.0.
  kは,0 < k < 1を満たす固定値.
  vは,-100 ≦ v ≦ +100であり,小さいほど加速,大きいほど減速,0のとき等速.

【余談】

一連の記事で使用した紙の数式群です(キモい?w


関連:
イージングの考え方
【数学・DHTML】 イージング [Easing] (1)
【数学・DHTML】 イージング [Easing] (2)
【数学】 イージングロジックメモ
【数学・DHTML】 イージング [Easing] (3)
【DHTML】 加速・減速を考慮したアニメーションプログラム
【数学・DHTML】 イージング [Easing] (4)
【数学・DHTML】 イージング [Easing] (5)
コメント
コメントする









 
トラックバック
この記事のトラックバックURL
http://blog.graviness.com/trackback/715604
 以前仕事でイージング関数を実装する機会があったのですが、こちらの記事の数式を実装したら全然イケてなかったので、今回自分でイージング関数を作る事にしました。  リンク先の記事はヒューリスティックなアプローチで話を進めていたので、ここではもう少し後ろの
コミュニケーション能力獲得のためにがんばる筑波大学生のブログ | 2008/12/11 12:45 AM
 

(C) 2017 ブログ JUGEM Some Rights Reserved.