JavaScriptアニメーションライブラリ Tween24.jsの使い方

Tween24.jsとは

JavaScriptでアニメーションを簡単に作成できるライブラリ。

メソッドチェーンで記述するのが特徴で、1行でもアニメーションを実装可能。

// #boxを3秒かけてX座標300pxに移動
Tween24.tween('#box', 3).x(300).play();

// 複数の場合は配列でも指定できる
Tween24.tween(['#box1', '#box2'], 3).x(300).play();

#boxを3秒かけてX座標300pxに移動

Tween24.js

イージングの設定

イージングは第3引数に指定する。

Ease24._6_ExpoInOutが汎用的で使いやすい。

Ease24 Sample

Tween24.tween('#box', 3, Ease24._6_ExpoInOut).x(300).play();

イージングは49種類存在する。

Ease24._Linear
Ease24._1_SineIn
Ease24._1_SineOut
Ease24._1_SineInOut
Ease24._1_SineOutIn
Ease24._2_QuadIn
Ease24._2_QuadOut
Ease24._2_QuadInOut
Ease24._2_QuadOutIn
Ease24._3_CubicIn
Ease24._3_CubicOut
Ease24._3_CubicInOut
Ease24._3_CubicOutIn
Ease24._4_QuartIn
Ease24._4_QuartOut
Ease24._4_QuartInOut
Ease24._4_QuartOutIn
Ease24._5_QuintIn
Ease24._5_QuintOut
Ease24._5_QuintInOut
Ease24._5_QuintOutIn
Ease24._6_ExpoIn
Ease24._6_ExpoOut
Ease24._6_ExpoInOut
Ease24._6_ExpoOutIn
Ease24._7_CircIn
Ease24._7_CircOut
Ease24._7_CircInOut
Ease24._7_CircOutIn
Ease24._BackInWith
Ease24._BackOutWith
Ease24._BackInOutWith
Ease24._BackOutInWith
Ease24._BackIn
Ease24._BackOut
Ease24._BackInOut
Ease24._BackOutIn
Ease24._BounceIn
Ease24._BounceOut
Ease24._BounceInOut
Ease24._BounceOutIn
Ease24._ElasticInWith
Ease24._ElasticOutWith
Ease24._ElasticInOutWith
Ease24._ElasticOutInWith
Ease24._ElasticIn
Ease24._ElasticOut
Ease24._ElasticInOut
Ease24._ElasticOutIn

フェードインを実装

fadeInを実装するには要素にCSSでopacity: 0; を追加してメソッドにopacity(1)を追加する。

Tween24.tween("#box", 1, Ease24._6_ExpoInOut).x(300).opacity(1).play();

公式のサンプルではCSSではなくopacity(0)を指定しているが、JavaScriptだと最初一瞬見えてしまうことがあるので、CSSで透過したほうが良い。

fadeIn Sample

xyで斜めに移動

x, y以外にxyが存在している。

.x(300).y(200) と .xy(300, 200) は同じ斜めの移動になる。

Tween24.tween("#box", 1, Ease24._6_ExpoInOut).xy(300, 200).opacity(1).play();

xy Sample

Tween24.serial()で連続再生

.box1 => .box2 => .box3 のように連続再生したい場合は以下の通り。

Tween24.serial(
  Tween24.tween(".box1", 1, Ease24._6_ExpoInOut).x(300).opacity(1),
  Tween24.tween(".box2", 1, Ease24._6_ExpoInOut).x(300).opacity(1),
  Tween24.tween(".box3", 1, Ease24._6_ExpoInOut).x(300).opacity(1)
).play();

serial Sample