jQueryのアニメーションを曲線的に動かす方法

2017/09/28

web制作

今回はstyleのpositionを、jQueryのanimateで曲線的に動かす方法を紹介します。
直線的な動きを実装するのは簡単ですが、曲線的に動かす場合一気にややこしくなります。

この記事を書く為に、以下のサイトを参考にしました。

※jQuery v3.2.1で確認しています。
※サンプルでは jquery.easing.js でイージングを追加しています。


目次

  1. 直線的なアニメーションの確認
  2. 2次ベジェ曲線でカーブを加える
  3. 3次ベジェ曲線で更にカーブを加える

直線的なアニメーションの確認

まずはpositionを左から右へ、直線的なアニメーションで動かしてみます。

  • 左右の黒い点が開始と終了位置、赤い点が動かす対象です。


2次ベジェ曲線でカーブを加える

いきなりですが、2次ベジェ曲線の数式を利用してカーブを加えます。

ベジェ曲線とは

ベジェ曲線(ベジェきょくせん、Bézier Curve)またはベジエ曲線とは、N 個の制御点から得られる N – 1 次曲線である。(wikipedia)

よく見かけるのはイラストレーター等のペンツールです。
実際にペンツールで曲線を書いてみます。
2次ベジェ曲線
画像を見ると、開始位置から終了位置までの線が、制御点によってカーブされています。

この仕組みをJSに組み込む事で、曲線的なアニメーションを実現できます。

2次ベジェ曲線の数式をjavascriptで書く

小難しい数式の説明は省きます。(自分もよく分かってない
ただ、これで動く。

getPointQB の引数

  • t : 0~1の数値を渡します。
    開始位置が 0 、終了位置が 1 という認識。
  • x1 : 開始位置の x 値
  • y1 : 開始位置の y 値
  • x2 : 制御点の x 値
  • y2 : 制御点の y 値
  • x3 : 終了位置の x 値
  • y3 : 終了位置の y 値

返り値は配列で、[0]が x 値、[1]が y 値です。

getPointQB をjQueryのanimateに組み込む。
例:

t に入る数値を取得する方法。
数値が 0~1 に変化する animate を作ります。
animateの step で変化中の数値を取得できます。

step 内で、動かす対象のstyleに getPointQB で取得した x,y 値を指定すれば曲線的な動きの完成です。

実際にHTML上で動かしてみます。

  • 上部に追加した灰色の点が制御点です。
  • クリックで制御点の位置を変更できます。


3次ベジェ曲線で更にカーブを加える

2次でも充分カーブを加える事が出来ますが、
制御点を一つ増やした3次ベジェ曲線を利用する事で、さらに細かくカーブを調整できます。

また、各制御点を上下に配置すれば上下のカーブが出来ます。

3次ベジェ曲線の数式をjavascriptで書く

getPointCB の引数

  • t : 0~1の数値。
  • x1 : 開始位置の x 値
  • y1 : 開始位置の y 値
  • x2 : 制御点1の x 値
  • y2 : 制御点1の y 値
  • x3 : 制御点2の x 値
  • y3 : 制御点2の y 値
  • x4 : 終了位置の x 値
  • y4 : 終了位置の y 値

表現の幅が増え、色々な演出に使えると思います。
TweenMaxのonUpdateでも同じことが出来ます。

以上です。


SNSでシェアする

コメントを残す