anime.js - にほんご。

Property values

パラメータを1つだけ指定する場合には、アニメーションの終了時点の値を定義します。 アニメーションの開始時点の値はターゲットの元の値です。

type説明
number100必要に応じて元の単位または、デフォルトの単位を追加します。
string'10em''1turn''M21 1v160''50%'最低限、1つの数値を含めなければなりません。
相対値'+=100px''-=20em''*=4'元のプロパティに対して、加算、減算、乗算します。
colors'#FFF''rgb(255,0,0)''hsl(100, 20%, 80%)'3桁または6桁の16進数、rgb、hslを指定することができます。
anime({
  targets: 'div',
  translateX: 100, // デフォルト値から'px'を付与します。(0pxから100pxに変化します。)
  rotate: '1turn', // 単位'turn'を使用します。(0turnから1turnに変化します。)
  scale: '*=2', // 現在の値に'2'を掛けます。(1から(1 * 2)に変化します。)
  backgroundColor: '#FFF', // 背景色を'#FFF'にアニメーションします。('rgb(0,0,0)'から'rgb(255,255,255)'に変化します。)
  duration: 1500
});

単位無指定

デモ

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

JavaScript

var unitlessValue = anime({
  targets: '#unitlessValue .el',
  translateX: 250,
  rotate: 540
});

HTML

<div id="unitlessValue">
  <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 specificUnitValue = anime({
  targets: '#specificUnitValue .el',
  translateX: '20em',
  rotate: '1.5turn'
});

HTML

<div id="specificUnitValue">
  <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 relativeValues = anime({
  targets: '#relativeValues .el',
  translateX: {
    value: '+=150',
    duration: 1000
  },
  width: {
    value: '-=10',
    duration: 1800,
    easing: 'easeInOutSine'
  },
  height: {
    value: '*=4',
    duration: 1800,
    easing: 'easeInOutSine'
  },
  direction: 'alternate'
});

HTML

<div id="relativeValues">
  <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 colors = anime({
  targets: '#colors .el',
  translateX: 250,
  backgroundColor: [
    {value: '#FFF'}, // または #FFFFFF
    {value: 'rgb(255, 0, 0)'},
    {value: 'hsl(100, 60%, 60%)'}
  ],
  easing: 'linear',
  direction: 'alternate',
  duration: 2000
});

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;
}

初期値指定

特定の値からアニメーションを開始することができます。

anime({
  targets: 'div',
  translateX: [100, 200], // translateXを100から200に変化させます。
  rotate: ['.5turn', '1turn'], // 回転角度を180degから360degに変化させます。
  scale: ['*=2', 1], // スケールを元の値の2倍から1倍にします。
  backgroundColor: ['rgb(255,0,0)', '#FFF'], // 背景色を赤から白に変化させます。
  duration: 1500
});

デモ

JavaScript

var specificInitialValue = anime({
  targets: '#specificInitialValue .el',
  translateX: [100, 250],
  delay: 500,
  direction: 'alternate',
  loop: true
});

HTML

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

関数ベース値

Function based parametersと同様です。 アニメーションの全てのターゲットとプロパティに対して、異なる値を指定します。 関数は引数として、targetindextargetsLengthを受け取ります。

anime({
  targets: 'div',
  translateX: function(el) {
    return el.getAttribute('data-x');
  },
  translateY: function(el, i) {
    return 50 + (-50 * i);
  },
  scale: function(el, i, l) {
    return (l - i) + .25;
  },
  rotate: function() { return anime.random(-360, 360); },
  duration: function() { return anime.random(800, 1600); },
  delay: function() { return anime.random(0, 1000); }
});

デモ

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

JavaScript

var functionBasedPropVal = anime({
  targets: '#functionBasedPropVal .el',
  translateX: function(el) {
    return el.getAttribute('data-x');
  },
  translateY: function(el, i) {
    return 50 + (-50 * i);
  },
  scale: function(el, i, l) {
    return (l - i) + .25;
  },
  rotate: function() { return anime.random(-360, 360); },
  duration: function() { return anime.random(1200, 1800); },
  duration: function() { return anime.random(800, 1600); },
  delay: function() { return anime.random(0, 1000); },
  direction: 'alternate',
});

HTML

<div id="functionBasedPropVal">
  <div class="line">
    <div class="square small shadow"></div>
    <div class="square small el" data-x="160"></div>
  </div>
  <div class="line">
    <div class="square small shadow"></div>
    <div class="square small el" data-x="80"></div>
  </div>
  <div class="line">
    <div class="square small shadow"></div>
    <div class="square small el" data-x="250"></div>
  </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;
}

キーフレーム

キーフレームはプロパティオブジェクトの配列を使って定義します。 インスタンスのdurationが定義されていない場合、 各プロパティのキーフレーム数で除算してアニメーションを生成します。

anime({
  targets: 'div',
  translateX: [
    { value: 250, duration: 1000, delay: 500, elasticity: 0 },
    { value: 0, duration: 1000, delay: 500, elasticity: 0 }
  ],
  translateY: [
    { value: -40, duration: 500, elasticity: 100 },
    { value: 40, duration: 500, delay: 1000, elasticity: 100 },
    { value: 0, duration: 500, delay: 1000, elasticity: 100 }
  ],
  scaleX: [
    { value: 4, duration: 100, delay: 500, easing: 'easeOutExpo' },
    { value: 1, duration: 900, elasticity: 300 },
    { value: 4, duration: 100, delay: 500, easing: 'easeOutExpo' },
    { value: 1, duration: 900, elasticity: 300 }
  ],
  scaleY: [
    { value: [1.75, 1], duration: 500 },
    { value: 2, duration: 50, delay: 1000, easing: 'easeOutExpo' },
    { value: 1, duration: 450 },
    { value: 1.75, duration: 50, delay: 1000, easing: 'easeOutExpo' },
    { value: 1, duration: 450 }
  ]
});

デモ

JavaScript

var keyframes = anime({
  targets: '#keyframes .el',
  translateX: [
    { value: 250, duration: 1000, delay: 500, elasticity: 0 },
    { value: 0, duration: 1000, delay: 500, elasticity: 0 }
  ],
  translateY: [
    { value: -40, duration: 500, elasticity: 100 },
    { value: 40, duration: 500, delay: 1000, elasticity: 100 },
    { value: 0, duration: 500, delay: 1000, elasticity: 100 }
  ],
  scaleX: [
    { value: 4, duration: 100, delay: 500, easing: 'easeOutExpo' },
    { value: 1, duration: 900, elasticity: 300 },
    { value: 4, duration: 100, delay: 500, easing: 'easeOutExpo' },
    { value: 1, duration: 900, elasticity: 300 }
  ],
  scaleY: [
    { value: [1.75, 1], duration: 500 },
    { value: 2, duration: 50, delay: 1000, easing: 'easeOutExpo' },
    { value: 1, duration: 450 },
    { value: 1.75, duration: 50, delay: 1000, easing: 'easeOutExpo' },
    { value: 1, duration: 450 }
  ],
  loop: true
});

HTML

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