Easing

linear

アニメーションにイージングを適用しません。

不透明度や色変化アニメーションに便利です。

easing: 'linear'

anime({
  targets: '.linear-easing-demo .el',
  translateX: 250,
  direction: 'alternate',
  loop: true,
  easing: 'linear'
});

デモ

JavaScript

var linear = anime({
  targets: '#linear .el',
  translateX: 250,
  direction: 'alternate',
  loop: true,
  easing: 'linear'
});

HTML

<div id="linear">
  <div class="line">
    <div class="square shadow"></div>
    <div class="square el"></div>
  </div>
</div>

CSS

.shadow {
  position: absolute;
  opacity: .2;
}

.square {
  pointer-events: none;
  width: 28px;
  height: 28px;
  margin: 1px;
  font-size: 12px;
}

Robert Pennerのeasing関数

Robert Pennerのeasing関数が組み込まれています。

easings.netで動きを確認してください。

easing: 'easeInOutSine'

指定可能なイージング

var demoContentEl = document.querySelector('.penner-equations-demo');
var fragment = document.createDocumentFragment();

function createEasingDemo(easing) {
  var demoEl = document.createElement('div');
  demoEl.classList.add('stretched','square','el');
  anime({
    targets: demoEl,
    translateX: 250,
    direction: 'alternate',
    loop: true,
    delay: 200,
    endDelay: 200,
    easing: easing,
  });
  fragment.appendChild(demoEl);
}

for (var easeName in anime.penner) {
  if (Array.isArray(anime.penner[easeName])) {
    createEasingDemo(easeName);
  }
}

demoContentEl.innerHTML = '';
demoContentEl.appendChild(fragment);

デモ

JavaScript

var demoContentEl = document.querySelector('#penner');
var fragment = document.createDocumentFragment();

function createEasingDemo(easing) {
  var demoEl = document.createElement('div');
  demoEl.classList.add('stretched','square','el');
  anime({
    targets: demoEl,
    translateX: 250,
    direction: 'alternate',
    loop: true,
    delay: 200,
    endDelay: 200,
    easing: easing,
  });
  fragment.appendChild(demoEl);
}

for (var easeName in anime.penner) {
  if (Array.isArray(anime.penner[easeName])) {
    createEasingDemo(easeName);
  }
}

demoContentEl.innerHTML = '';
demoContentEl.appendChild(fragment);

HTML

<div id="penner"></div>

CSS

.shadow {
  position: absolute;
  opacity: .2;
}

.square {
  pointer-events: none;
  width: 28px;
  height: 28px;
  margin: 1px;
  font-size: 12px;
}

.stretched {
  height: 2px;
}

3次ベジェ曲線

独自の3次ベジェ曲線を指定するにはcubicBezier(x1, y1, x2, y2)を使用してください。

easing: 'cubicBezier(.5, .05, .1, .3)'

独自のベジェ曲線を作成するにあたり、Ceaserのようなベジェ曲線ジェネレーターを使うことができます。

anime({
  targets: '.cubic-bezier-demo .el',
  translateX: 250,
  direction: 'alternate',
  loop: true,
  easing: 'cubicBezier(.5, .05, .1, .3)'
})

デモ

JavaScript

var customBezier = anime({
  targets: '#customBezier .el',
  translateX: 250,
  direction: 'alternate',
  loop: true,
  easing: 'cubicBezier(.5, .05, .1, .3)'
});

HTML

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

CSS

.shadow {
  position: absolute;
  opacity: .2;
}

.square {
  pointer-events: none;
  width: 28px;
  height: 28px;
  margin: 1px;
  font-size: 12px;
}

spring

ばねの力学に基づいたイージングです。

easing: 'spring(mass, stiffness, damping, velocity)'

ばねアニメーションの長さはspringパラメータで定義されます。 durationパラメータは考慮されません。

anime({
  targets: '.spring-physics-demo .el',
  translateX: 250,
  direction: 'alternate',
  loop: true,
  easing: 'spring(1, 80, 10, 0)'
})

デモ

JavaScript

var spring = anime({
  targets: '#spring .el',
  translateX: 250,
  direction: 'alternate',
  loop: true,
  easing: 'spring(1, 80, 10, 0)'
})

HTML

<div id="spring">
  <div class="line">
    <div class="square shadow"></div>
    <div class="square el"></div>
  </div>
</div>

CSS

.shadow {
  position: absolute;
  opacity: .2;
}

.square {
  pointer-events: none;
  width: 28px;
  height: 28px;
  margin: 1px;
  font-size: 12px;
}

elastic

弾性イージング。

easing: 'easeOutElastic(amplitude, period)'

anime({
  targets: '.elastic-easing-demo .el',
  translateX: 270,
  easing: function(el) {
    return el.getAttribute('data-ease');
  },
  duration: 1000
})

デモ

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

JavaScript

var elastic = anime({
  targets: '#elastic .el',
  translateX: 270,
  easing: function(el) {
    return el.getAttribute('data-ease');
  },
  duration: 1000
});

HTML

<div id="elastic">
  <div class="label small">easeInElastic(1, .6)</div>
  <div class="square small shadow"></div>
  <div class="square small el" data-ease="easeInElastic(1, .6)"></div>
  <div class="label small">easeOutElastic(1, .6)</div>
  <div class="square small shadow"></div>
  <div class="square small el" data-ease="easeOutElastic(1, .6)"></div>
  <div class="label small">easeInOutElastic(1, .6)</div>
  <div class="square small shadow"></div>
  <div class="square small el" data-ease="easeInOutElastic(1, .6)"></div>
</div>

CSS

.shadow {
  position: absolute;
  opacity: .2;
}

.square {
  pointer-events: none;
  width: 28px;
  height: 28px;
  margin: 1px;
  font-size: 12px;
}

.small {
  width: 18px;
  height: 18px;
}

.label {
  position: absolute;
  opacity: .5;
  text-align: left;
  padding-left: 38px;
}

.label.small {
  line-height: 20px;
}

steps

アニメーションの開始から終了までのステップ数を指定します。

easing: 'steps(numberOfSteps)'

anime({
  targets: '.step-easing-demo .el',
  translateX: 250,
  direction: 'alternate',
  loop: true,
  easing: 'steps(5)'
})

デモ

JavaScript

var steps = anime({
  targets: '#steps .el',
  translateX: 250,
  direction: 'alternate',
  loop: true,
  easing: 'steps(5)'
});

HTML

<div id="spteps">
  <div class="line">
    <div class="square shadow"></div>
    <div class="square el"></div>
  </div>
</div>

CSS

.shadow {
  position: absolute;
  opacity: .2;
}

.square {
  pointer-events: none;
  width: 28px;
  height: 28px;
  margin: 1px;
  font-size: 12px;
}

カスタムイージング

カスタムイージング関数は関数ベース値で返す必要があります。

easing: function() { return function(time) { return time * i} }

anime({
  targets: '.custom-easing-demo .el',
  translateX: 270,
  direction: 'alternate',
  loop: true,
  duration: 2000,
  easing: function(el, i, total) {
    return function(t) {
      return Math.pow(Math.sin(t * (i + 1)), total);
    }
  }
});

デモ

JavaScript

var customEasing = anime({
  targets: '#customEasing .el',
  translateX: 270,
  direction: 'alternate',
  loop: true,
  duration: 2000,
  easing: function(el, i, total) {
    return function(t) {
      return Math.pow(Math.sin(t * (i + 1)), total);
    }
  }
});

HTML

<div id="customEasing">
  <div class="square small shadow"></div>
  <div class="square small el"></div>
  <div class="square small shadow"></div>
  <div class="square small el"></div>
  <div class="square small shadow"></div>
  <div class="square small el"></div>
</div>

CSS

.shadow {
  position: absolute;
  opacity: .2;
}

.square {
  pointer-events: none;
  width: 28px;
  height: 28px;
  margin: 1px;
  font-size: 12px;
}

.small {
  width: 18px;
  height: 18px;
}