ピクチャモーションプラグイン
過去ブログの転載です。
ピクチャの移動は普通線形に行われますが、ジャンプさせたり、振動させたり、滑らかに好きな所を移動させたり、いろんなパターンに変更するためのプラグインです。
PictureMotion.js - Google ドライブ
このプラグインでモーション設定をしておくと、ピクチャの移動の挙動が変化します。
サンプルとして、sin関数っぽいスムーズな移動、放物線（ジャンプ）、三角波、ベジエ曲線、振動、減衰振動、スプライン補間を初めから使えるようにしてあります。
例えば、スプライン補間をすると↓こんな風に動かすことができます。
あらかじめ置いておいた球を順番に移動しますが、通常の移動のようにカクカクした動きではなく、滑らかに自然に移動しています。
また、座標のほかに拡大率と不透明度もモーションパターンを設定できます。
↓減衰振動でふわっと飛び出した感じの例です。
スクリプトを書ける方であれば、モーションパターンを自作して組み込むこともできます。
線形移動からスムーズ移動に切り替えるだけでも、若干おしゃれになりそうですね！
↓ピクチャの移動を線形からスムーズ移動に切り替えて移動する例です。
◆ピクチャの表示：#1, 画像, 中央 (150, 250), (100%,100%), 255, 通常
◆プラグインコマンド：モーション_初期化
◆プラグインコマンド：モーション_位置x smooth
◆プラグインコマンド：モーション_位置y smooth
◆ピクチャの移動：#1, 中央 (450, 450), (100%,100%), 255, 通常, 60フレーム（ウェイト）
◆
ふわっと持ち上がる感じで移動しますね。一度設定しておけば、その後のピクチャの移動はすべて設定したモーションになります。
モーションパターンはピクチャごとに持つことができるので、複数の画像を同時に動かし、それぞれ異なるパターンで動かすことも可能です。「モーション_初期化」コマンドですべて線形に戻すことができます。
↓jumpコマンドを使うと、画像をジャンプさせることができます。
◆ピクチャの表示：#1, 画像, 中央 (300, 450), (100%,100%), 255, 通常
◆プラグインコマンド：モーション_初期化
◆プラグインコマンド：モーション_位置y jump -200
◆ピクチャの移動：#1, 中央 (600, 450), (100%,100%), 255, 通常, 60フレーム（ウェイト）
◆
jumpには引数が必要で、ここでは-200を指定しています。頂点のy座標が250になるようジャンプさせたいので、相対的に450から-200した値までジャンプするという意味になります。y座標は上の方が小さいことに注意です。
