目錄

​

官網文件

相容性

安裝

引入

1.es6中引入

2瀏覽器中引入

簡單使用

Targets/目標物件

Animatable properties/可以被動畫的屬性

CSS

Individual CSS transforms/transform的使用

JavaScript Object properties

DOM Attributes

SVG Attributes

官網文件

https://github.com/juliangarnier/anime/blob/master/README.md

http://animejs.com/documentation

相容性

安裝

$ npm install animejs
# OR
$ bower install animejs

引入

1.es6中引入

import anime from 'animejs'

2瀏覽器中引入

<script src="anime.min.js"></script>

簡單使用

anime({
  targets: 'div',
  translateX: [
    { value: 100, duration: 1200 },
    { value: 0, duration: 800 }
  ],
  rotate: '1turn',
  backgroundColor: '#FFF',
  duration: 2000,
  loop: true
});
 

targe:目標物件，1.html的id或者class、tag標籤，2.普通的javascript物件。3.dom物件

loop:動畫迴圈播放

duration:動畫時長

其他屬性為target物件中存在的屬性

Targets/目標物件

案例：http://animejs.com/documentation/#cssSelector

Animatable properties/可以被動畫的屬性

CSS

Any CSS properties can be animated:

anime({
  targets: 'div',
  left: '80%', // Animate all divs left position to 80%
  opacity: .8, // Animate all divs opacity to .8
  backgroundColor: '#FFF' // Animate all divs background color to #FFF
});

案例：http://animejs.com/documentation/#cssProperties

Individual CSS transforms/transform的使用

anime({
  targets: 'div',
  translateX: 250, // Animate all divs translateX property to 250px
  scale: 2, // Animate all divs scale to 2
  rotate: '1turn' // Animate all divs rotation to 1 turn
});

http://animejs.com/documentation/#CSStransforms

JavaScript Object properties/js物件

任意物件數值屬性可被animated

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

anime({
  targets: myObject,
  prop1: 50, // Animate the 'prop1' property from myObject to 50
  prop2: '100%' // Animate the 'prop2' property from myObject to 100%
});

DOM Attributes

任意DOM物件屬性可被animated

<input value="0">
anime({
  targets: input,
  value: 1000, // Animate the input value to 1000
  round: 1 // Remove decimals by rounding the value
});

➜ DOM Attributes example

SVG Attributes

任意SVG物件屬性可被animated

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

➜ SVG Attributes example

Property parameters/anime自有屬性引數

為每個動畫屬性定義的時長、延遲、easing，可以全域性設定，也可以單獨設定。

注意：沒有單獨定義的屬性，則繼承全域性屬性值

anime({
  translateX: {
    value: 250,
    duration: 800
  },
  rotate: {
    value: 360,
    duration: 1800,
    easing: 'easeInOutSine'
  },
  scale: {
    value: 2,
    duration: 1600,
    delay: 800,
    easing: 'easeInOutQuart'
  },
  delay: 250 // All properties except 'scale' inherit 250ms delay
});

Function based property parameters/基於屬性引數的函式

函式引數分別為：target，index，targetsLength

anime({
  targets: 'div',
  translateX: 250,
  rotate: 180,
  duration: function(target) {
    // Duration based on every div 'data-duration' attribute
    return target.getAttribute('data-duration');
  },
  delay: function(target, index) {
    // 100ms delay multiplied by every div index, in ascending order
    return index * 100;
  },
  elasticity: function(target, index, totalTargets) {
    // Elasticity multiplied by every div index, in descending order
    return 200 + ((totalTargets - index) * 200);
  }
});

Animation parameters/動畫引數

anime({
  targets: 'div',
  translateX: 100,
  duration: 2000,
  loop: 3, // Play the animation 3 times
  direction: 'reverse', // Play the animation in reverse
  autoplay: false // Animation paused by default
});

Property values

Single value

anime({
  targets: 'div',
  translateX: 100, // Add 'px' by default (from 0px to 100px)
  rotate: '1turn', // Use 'turn' as unit (from 0turn to 1turn)
  scale: '*=2', // Multiply the current scale value by 2 (from 1 to (1 * 2))
  backgroundColor: '#FFF', // Animate the background color to #FFF (from 'rgb(0,0,0)' to 'rgb(255,255,255)')
  duration: 1500
});

From > To values

強制從一個設定的值開始動畫。

使用陣列,[ 100 , 0 ]，表示從100開始執行，0位結束

anime({
  targets: 'div',
  translateX: [100, 200], // Translate X from 100 to 200
  rotate: ['.5turn', '1turn'], // Rotate from 180deg to 360deg
  scale: ['*=2', 1], // Scale from 2 times the original value to 1,
  backgroundColor: ['rgb(255,0,0)', '#FFF'], // Will transition the background color from red to white
  duration: 1500
});

Function based values

用法跟function based property parameters相同，

函式可以獲取每個目標物件動畫的屬性，函式接收3個引數：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); }
});

Keyframes/關鍵幀

Keyframes被定義為    在陣列中為Object物件

每個例項物件（instance）的 duration 被分割，根據每個屬性中的幀的數目。

anime({
  targets: 'div',
  translateX: [
    { value: 250, duration: 1000, delay: 500, elasticity: 0 },//--0.5-1.5---> x方向移動250
    { value: 0, duration: 1000, delay: 500, elasticity: 0 }//----2-3--->從250到0
  ],
  translateY: [
    { value: -40, duration: 500, elasticity: 100 },//-0-0.5-->上移-40
    { value: 40, duration: 500, delay: 1000, elasticity: 100 },//--1.5-2.0--->下移動-40到40
    { value: 0, duration: 500, delay: 1000, elasticity: 100 }//------3-3.5----->上移動40到0
  ],
  scaleX: [
    { value: 4, duration: 100, delay: 500, easing: 'easeOutExpo' },//0.5-0.6--->x方向放大4倍
    { value: 1, duration: 900, elasticity: 300 },//---0.6-1.5--------->4倍縮小到1
    { value: 4, duration: 100, delay: 500, easing: 'easeOutExpo' },//--2.0-2.1--->放大4倍
    { value: 1, duration: 900, elasticity: 300 }//-----2.1-3------->縮小到1
  ],
  scaleY: [
    { value: [1.75, 1], duration: 500 },//------>0-0.5 y方向從1.75向1縮小
    { value: 2, duration: 50, delay: 1000, easing: 'easeOutExpo' },//-1.5-1.55--->y放大2倍
    { value: 1, duration: 450 },//-----1.55-2.0------->y縮小到1
    { value: 1.75, duration: 50, delay: 1000, easing: 'easeOutExpo' },
        //-3.0-3.05-->y放大1.75
    { value: 1, duration: 450 }//----3.05-3.5------>縮小到1
  ]
});

//0--左側上移1---0.5---上側右移動----1.5----右側下移----2.0------下側左移動-----
//3.0----左側上移動2-----3.5(結束)

Timeline

Basic timeline