Tween24.jsとは
JavaScriptでアニメーションを簡単に作成できるライブラリ。
メソッドチェーンで記述するのが特徴で、簡単なアニメーションなら1行で実装可能。
2022年3月にバージョン1.0がリリースされてから便利な新機能が追加されたのでさらに使いやすくなった。
バージョン1.0のCDNもあるので手軽に利用できる。
<script src="https://cdn.jsdelivr.net/npm/tween24@1.0.0/dist/tween24.min.js"></script>
この記事では新機能の$()の相対値指定と$$()の直前の値からの相対値指定について説明しています。
新機能：$() 相対値指定
$()はトゥイーンを設定した時の値からの相対値にトゥイーンします。
言葉で説明するより実際に見たほうが早いので、詳しくは下記のコードおよびサンプルページをご参照ください。
Tween24.serial(
Tween24.tween("#box", 1, Ease24._6_ExpoInOut).x$(100),
Tween24.tween("#box", 1, Ease24._6_ExpoInOut).y$(100),
Tween24.tween("#box", 1, Ease24._6_ExpoInOut).x$(0),
Tween24.tween("#box", 1, Ease24._6_ExpoInOut).y$(0),
).play();
新機能：$$() 相対値指定
$$()はトゥイーン再生時の直前の値からの相対値にトゥイーンします。
Tween24.loop(4,
Tween24.serial(
Tween24.tween("#box", 1, Ease24._6_ExpoInOut).x$$(50),
)
).play();
もし$$()ではなく$()で記述した場合はこうなります。
Tween24.serial(
Tween24.tween("#box", 1, Ease24._6_ExpoInOut).x$(50),
Tween24.tween("#box", 1, Ease24._6_ExpoInOut).x$(100),
Tween24.tween("#box", 1, Ease24._6_ExpoInOut).x$(150),
Tween24.tween("#box", 1, Ease24._6_ExpoInOut).x$(200),
).play();
まとめ
CSSやJavaScriptでアニメーションを作成したことがある人であればTween24.jsがどれだけ便利なものか直感的に理解できるだろう。
より詳しい使い方はTween24.jsのGitHubのページなどに記載されているため、そちらをご参照ください。
https://github.com/a24/tween24js
