Property values

更新日: 2018-11-08

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

type	例	説明
`number`	`100`	必要に応じて元の単位または、デフォルトの単位を追加します。
`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" style="height: 120px">
  <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="colors">
  <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 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と同様です。アニメーションの全てのターゲットとプロパティに対して、異なる値を指定します。関数は引数として、target、index、targetsLengthを受け取ります。

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" style="margin: 3em 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;
}

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