anime.js - にほんご。

Properties

更新日: 2018-11-08
Type
CSSopacity, backgroundColor, fontSize ...
transformtranslateX, rotate, scale ...
オブジェクトプロパティ数値を含んだ任意のオブジェクト。
DOM属性数値を含んだ任意のDOMの属性。
SVG属性数値を含んだ任意のSVGの属性。

CSS

任意のCSSプロパティをアニメーションすることができます。

anime({
  targets: 'div',
  left: '80%', // 全てのdivを左の80%の位置に移動します。
  opacity: .8, // 全てのdivの透明度を0.8にします。
  backgroundColor: '#FFF' // 全てのdivの背景色を#FFFにします。
});

デモ

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

JavaScript
var cssProperties = anime({
  targets: '#cssProperties .el',
  opacity: .5,
  left: '240px',
  backgroundColor: '#AAA',
  borderRadius: ['0em', '2em'],
  easing: 'easeInOutQuad'
});
HTML
<div id="cssProperties">
  <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;
}

transform(CSS)

CSSのtransformは個別にアニメーションすることができます。

anime({
  targets: 'div',
  translateX: 250, // 全てのdivのtranslateXを250pxに移動します。
  scale: 2, // 全てのdivのscaleを2にします。
  rotate: '1turn' // 全てのdivのrotateを1turn(1回転)します。
});

デモ

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

JavaScript
var CSStransforms = anime({
  targets: '#CSStransforms .el',
  translateX: 250,
  scale: 2,
  rotate: '1turn'
});
HTML
<div id="CSStransforms" style="margin: 2em 0;">
  <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;
}

オブジェクトプロパティ

数値を含んだ任意のオブジェクトプロパティをアニメーションすることができます。

var myObject = {
  prop1: 0,
  prop2: '0%'
}

anime({
  targets: myObject,
  prop1: 50, // 'prop1'プロパティを50にします。
  prop2: '100%' // 'prop2'プロパティを100%にします。
});

デモ

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

{"prop1":0,"prop2":"0%"}
JavaScript
var myObject = {
  prop1: 0,
  prop2: '0%'
}
var JSobjectProp = anime({
  targets: myObject,
  prop1: 50,
  prop2: '100%',
  easing: 'linear',
  round: 1,
  update: function() {
    var el = document.querySelector('#JSobjectProp pre');
    el.innerHTML = JSON.stringify(myObject);
  }
});
HTML
<div id="JSobjectProp">
  <pre class="count">{"prop1":0,"prop2":"0%"}</pre>
</div>
CSS
pre {
  font-family: 'Consolas', monospace;
}

DOM属性

数値を含んだ任意のDOMの属性をアニメーションすることができます。

<input value="0">
anime({
  targets: input,
  value: 1000 // inputのvalueを1000にします。
  round: 1 // 小数点以下を丸めます。
});

デモ

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

JavaScript
var domAttributes = anime({
  targets: '#domAttributes input',
  value: 1000,
  round: 1,
  easing: 'easeInOutExpo'
});
HTML
<div id="domAttributes">
  <input class="text-output" value="0">
</div>
CSS
.text-output {
  padding-top: 10px;
  padding-bottom: 10px;
  font-size: 16px;
  color: currentColor;
  text-align: center;
  background-color: transparent;
  border: 1px solid currentColor;
}

SVG属性

数値を含んだ任意のSVGの属性をアニメーションすることができます。

<svg width="128" height="128" viewBox="0 0 128 128">
  <polygon points="64 68.73508918222262 8.574 99.9935923731656 63.35810017508558 67.62284396863708 64 3.993592373165592 64.64189982491442 67.62284396863708 119.426 99.9935923731656"></polygon>
</svg>
anime({
  targets: 'polygon',
  points: '64 128 8.574 96 8.574 32 64 0 119.426 32 119.426 96'
});

デモ

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

JavaScript
var svgAttributes = anime({
  targets: '#svgAttributes polygon',
  points: '64 128 8.574 96 8.574 32 64 0 119.426 32 119.426 96',
  easing: 'easeInOutExpo'
});
HTML
<div id="svgAttributes">
  <svg width="128" height="128" viewBox="0 0 128 128">
    <polygon points="64 68.73508918222262 8.574 99.9935923731656 63.35810017508558 67.62284396863708 64 3.993592373165592 64.64189982491442 67.62284396863708 119.426 99.9935923731656" fill="currentColor"></polygon>
  </svg>
</div>

MIT license. © 2017 Julian Garnier.

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