anime.js - にほんご。

Easing

更新日: 2018-06-25

easingパラメータは文字列または、ベジェ曲線の座標(配列)を指定することができます。

type説明
string'easeOutExpo'ビルトインのイージング関数名。
array[.91,-0.54,.29,1.56]独自のベジェ曲線座標。([x1, y1, x2, y2])

ビルトイン関数

リニアイージングはlinearです。 Robert Pennerの関数は以下を使うことができます。

easeIneaseOuteaseInOut
easeInQuadeaseOutQuadeaseInOutQuad
easeInCubiceaseOutCubiceaseInOutCubic
easeInQuarteaseOutQuarteaseInOutQuart
easeInQuinteaseOutQuinteaseInOutQuint
easeInSineeaseOutSineeaseInOutSine
easeInExpoeaseOutExpoeaseInOutExpo
easeInCirceaseOutCirceaseInOutCirc
easeInBackeaseOutBackeaseInOutBack
easeInElasticeaseOutElasticeaseInOutElasti

使用例

anime({
  targets: 'div',
  translateX: 100,
  easing: 'easeOutExpo' // デフォルトは'easeOutElastic'です。
});

デモ

要素をクリックするとアニメーションを開始します。

JavaScript

var path = anime.path('#motionPath path');
 
var motionPath = anime({
  targets: '#motionPath .el',
  translateX: path('x'),
  translateY: path('y'),
  rotate: path('angle'),
  easing: 'linear',
  duration: 2000,
  loop: true
});

HTML

<div id="penner">
  <div class="line">
    <div class="stretched square shadow"></div>
    <div class="stretched square linear"></div>
  </div>
  <div class="line">
    <div class="stretched square shadow"></div>
    <div class="stretched square InQuad"></div>
  </div>
  <div class="line">
    <div class="stretched square shadow"></div>
    <div class="stretched square InCubic"></div>
  </div>
  <div class="line">
    <div class="stretched square shadow"></div>
    <div class="stretched square InQuart"></div>
  </div>
  <div class="line">
    <div class="stretched square shadow"></div>
    <div class="stretched square InQuint"></div>
  </div>
  <div class="line">
    <div class="stretched square shadow"></div>
    <div class="stretched square InSine"></div>
  </div>
  <div class="line">
    <div class="stretched square shadow"></div>
    <div class="stretched square InExpo"></div>
  </div>
  <div class="line">
    <div class="stretched square shadow"></div>
    <div class="stretched square InCirc"></div>
  </div>
  <div class="line">
    <div class="stretched square shadow"></div>
    <div class="stretched square InBack"></div>
  </div>
  <div class="line">
    <div class="stretched square shadow"></div>
    <div class="stretched square OutQuad"></div>
  </div>
  <div class="line">
    <div class="stretched square shadow"></div>
    <div class="stretched square OutCubic"></div>
  </div>
  <div class="line">
    <div class="stretched square shadow"></div>
    <div class="stretched square OutQuart"></div>
  </div>
  <div class="line">
    <div class="stretched square shadow"></div>
    <div class="stretched square OutQuint"></div>
  </div>
  <div class="line">
    <div class="stretched square shadow"></div>
    <div class="stretched square OutSine"></div>
  </div>
  <div class="line">
    <div class="stretched square shadow"></div>
    <div class="stretched square OutExpo"></div>
  </div>
  <div class="line">
    <div class="stretched square shadow"></div>
    <div class="stretched square OutCirc"></div>
  </div>
  <div class="line">
    <div class="stretched square shadow"></div>
    <div class="stretched square OutBack"></div>
  </div>
  <div class="line">
    <div class="stretched square shadow"></div>
    <div class="stretched square InOutQuad"></div>
  </div>
  <div class="line">
    <div class="stretched square shadow"></div>
    <div class="stretched square InOutCubic"></div>
  </div>
  <div class="line">
    <div class="stretched square shadow"></div>
    <div class="stretched square InOutQuart"></div>
  </div>
  <div class="line">
    <div class="stretched square shadow"></div>
    <div class="stretched square InOutQuint"></div>
  </div>
  <div class="line">
    <div class="stretched square shadow"></div>
    <div class="stretched square InOutSine"></div>
  </div>
  <div class="line">
    <div class="stretched square shadow"></div>
    <div class="stretched square InOutExpo"></div>
  </div>
  <div class="line">
    <div class="stretched square shadow"></div>
    <div class="stretched square InOutCirc"></div>
  </div>
  <div class="line">
    <div class="stretched square shadow"></div>
    <div class="stretched square InOutBack"></div>
  </div>
</div>

CSS

.shadow {
  position: absolute;
  opacity: .2;
}
 
.square {
  pointer-events: none;
  width: 28px;
  height: 28px;
  margin: 1px;
  font-size: 12px;
}
 
.stretched {
  height: 2px;
}

弾性

イージングの弾性は、elasticityパラメータで設定することができます。

anime({
  targets: 'div',
  translateX: 100,
  easing: 'easeOutElastic',
  elasticity: 600 // デフォルトは500。0~1000の範囲で指定します。
});

デモ

要素をクリックするとアニメーションを開始します。

JavaScript

var elasticity = anime.timeline();
elasticity.add({
  targets: '#elasticity .elasticity-0', translateX: 250, offset: 0,
  duration: 3000,
  elasticity: 0,
})
.add({
  targets: '#elasticity .elasticity-100', translateX: 250, offset: 0,
  duration: 3000,
  elasticity: 100,
})
.add({
  targets: '#elasticity .elasticity-200', translateX: 250, offset: 0,
  duration: 3000,
  elasticity: 200,
})
.add({
  targets: '#elasticity .elasticity-300', translateX: 250, offset: 0,
  duration: 3000,
  elasticity: 300,
})
.add({
  targets: '#elasticity .elasticity-400', translateX: 250, offset: 0,
  duration: 3000,
  elasticity: 400,
})
.add({
  targets: '#elasticity .elasticity-500', translateX: 250, offset: 0,
  duration: 3000,
  elasticity: 500,
})
.add({
  targets: '#elasticity .elasticity-600', translateX: 250, offset: 0,
  duration: 3000,
  elasticity: 600,
})
.add({
  targets: '#elasticity .elasticity-700', translateX: 250, offset: 0,
  duration: 3000,
  elasticity: 700,
})
.add({
  targets: '#elasticity .elasticity-800', translateX: 250, offset: 0,
  duration: 3000,
  elasticity: 800,
})
.add({
  targets: '#elasticity .elasticity-900', translateX: 250, offset: 0,
  duration: 3000,
  elasticity: 900,
})
.add({
  targets: '#elasticity .elasticity-1000', translateX: 250, offset: 0,
  duration: 3000,
  elasticity: 1000,
});

HTML

<div id="elasticity">
  <div class="line">
    <div class="stretched square shadow"></div>
    <div class="stretched square elasticity-0"></div>
  </div>
  <div class="line">
    <div class="stretched square shadow"></div>
    <div class="stretched square elasticity-100"></div>
  </div>
  <div class="line">
    <div class="stretched square shadow"></div>
    <div class="stretched square elasticity-200"></div>
  </div>
  <div class="line">
    <div class="stretched square shadow"></div>
    <div class="stretched square elasticity-300"></div>
  </div>
  <div class="line">
    <div class="stretched square shadow"></div>
    <div class="stretched square elasticity-400"></div>
  </div>
  <div class="line">
    <div class="stretched square shadow"></div>
    <div class="stretched square elasticity-500"></div>
  </div>
  <div class="line">
    <div class="stretched square shadow"></div>
    <div class="stretched square elasticity-600"></div>
  </div>
  <div class="line">
    <div class="stretched square shadow"></div>
    <div class="stretched square elasticity-700"></div>
  </div>
  <div class="line">
    <div class="stretched square shadow"></div>
    <div class="stretched square elasticity-800"></div>
  </div>
  <div class="line">
    <div class="stretched square shadow"></div>
    <div class="stretched square elasticity-900"></div>
  </div>
  <div class="line">
    <div class="stretched square shadow"></div>
    <div class="stretched square elasticity-1000"></div>
  </div>
</div>

CSS

.shadow {
  position: absolute;
  opacity: .2;
}
 
.square {
  pointer-events: none;
  width: 28px;
  height: 28px;
  margin: 1px;
  font-size: 12px;
}
 
.stretched {
  height: 2px;
}

カスタムベジェ曲線

独自のベジェ曲線を定義することができます。 ベジェ曲線は、4つの座標を配列で定義します。

anime({
  targets: 'div',
  translateX: 100,
  easing: [.91,-0.54,.29,1.56]
});

カスタムベジェ曲線の座標は、 https://matthewlein.com/ceaser/ で生成することができます。

デモ

要素をクリックするとアニメーションを開始します。

JavaScript

var customBezier = anime({
  targets: '#customBezier .el',
  translateX: 250,
  easing: [.91,-0.54,.29,1.56]
});

HTML

<div id="customBezier">
  <div class="square shadow"></div>
  <div class="square el"></div>
</div>

CSS

.shadow {
  position: absolute;
  opacity: .2;
}
 
.square {
  pointer-events: none;
  width: 28px;
  height: 28px;
  margin: 1px;
  font-size: 12px;
}

カスタムイージング

独自のイージング関数を追加することができます。 イージング関数の拡張は、anime.easingを使います。

// カスタム関数を追加します。
anime.easings['myCustomEasingName'] = function(t) {
  return Math.pow(Math.sin(t * 3), 3);
}
 
// 使い方
anime({
  targets: 'div',
  translateX: 100,
  easing: 'myCustomEasingName'
});
 
// カスタムベジェ曲線を追加します。
anime.easings['myCustomCurve'] = anime.bezier([.91,-0.54,.29,1.56]);
 
// 使い方
anime({
  targets: 'div',
  translateX: 100,
  easing: 'myCustomCurve'
});

デモ

要素をクリックするとアニメーションを開始します。

JavaScript

anime.easings['myCustomEasingName'] = function(t) {
  return Math.pow(Math.sin(t * 3), 3);
}
 
var customEasingFunction = anime({
  targets: '#customEasingFunction .el',
  translateX: 250,
  easing: 'myCustomEasingName'
});

HTML

<div id="customEasingFunction">
  <div class="square shadow"></div>
  <div class="square el"></div>
</div>

CSS

.shadow {
  position: absolute;
  opacity: .2;
}
 
.square {
  pointer-events: none;
  width: 28px;
  height: 28px;
  margin: 1px;
  font-size: 12px;
}

MIT license. © 2017 Julian Garnier.

このコンテンツはJulian Garnier(juliangarnier)によるanime.jsドキュメントを翻訳/改変したものです。