anime.js - にほんご。

Property Parameters

duration(時間)、delay(遅延)、easing(イージング)といった各アニメーションのプロパティを定義します。

名称初期値type説明
duration1000numberfunctionミリ秒。アニメーションの時間です。
delay0numberfunctionミリ秒。アニメーションの遅延時間です。
easing'easeOutElastic'functionイージングを参照してください。
elasticity500numberfunction弾性。0~1000の範囲。
roundfalsenumberbooleanfunction滑らかさ(?)。10の累乗。

(※rotateを指定した場合に、数値が大きい方が滑らかに動きます。)

anime({
  translateX: {
    value: 250,
    duration: 800
  },
  rotate: {
    value: 360,
    duration: 1800,
    easing: 'easeInOutSine'
  },
  scale: {
    value: 2,
    duration: 1600,
    delay: 800,
    easing: 'easeInOutQuart'
  },
  delay: 250 // scaleを除く全てのプロパティに250ms遅延を継承させます。
});

duration(時間)

デモ

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

JavaScript

var duration = anime({
  targets: '#duration .el',
  translateX: 250,
  duration: 3000
});

HTML

<div id="duration">
  <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;
}

delay(遅延)

デモ

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

JavaScript

var delay = anime({
  targets: '#delay .el',
  translateX: 250,
  delay: 1000
});

HTML

<div id="delay">
  <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;
}

easing(イージング)

デモ

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

JavaScript

var easing = anime({
  targets: '#easing .el',
  translateX: 250,
  easing: 'easeInOutQuart'
});

HTML

<div id="easing">
  <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;
}

特定のプロパティ

デモ

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

JavaScript

var specificPropertyParameters = anime({
  targets: '#specificPropertyParameters .el',
  translateX: {
    value: 250,
    duration: 800
  },
  rotate: {
    value: 360,
    duration: 1800,
    easing: 'easeInOutSine'
  },
  scale: {
    value: 2,
    duration: 1600,
    delay: 800,
    easing: 'easeInOutQuart'
  },
  delay: 250 // scaleを除く全てのプロパティに250ms遅延を継承させます。
});

HTML

<div id="specificPropertyParameters">
  <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ドキュメントを翻訳/改変したものです。