Animejs笔记

2018-08-21 本文已影响0人 Auroranara

开始制作动画

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

targets属性定义了制作动画的元素或js对象：

css选择器如：'div','#el path';
DOM元素如： document.querySelector('.item')
节点列表如： document.querySelectorAll('.item')
对象
数组如：['div', '.item', domNode]

动画属性

CSS：
- opacity 透明度 0~1
- backgroundColor
- fontSize
- borderRadius
- backgroundColor
transforms变换：
- translateX x轴的值
- translateY y轴的值
- retate 旋转
- scale 大小变换例：scale:2
- rotate 旋转例：rotate:'1turn'（旋转一周）

对象属性

JS:

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 span');
    el.innerHTML = JSON.stringify(myObject);
}
});

HTML:

<div id="JSobjectProp">
    <span>{"myProperty":"0"}</span>
</div>

DOM属性

JS:

var domAttributes = anime({
    targets: 'input',
    value: 1000, // value变化为1000
    round: 1,
    easing: 'easeInOutExpo'
});

HTML:

 <input class="text-output" value="0">

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

属性参数

duration 持续时间
- 默认1000
- 单位毫秒
- 类型number，function(target, index, totalTargets)
delay 延迟
- 默认0
- 单位毫秒
- 类型number，function(target, index, totalTargets)
easing 动画缓冲（缓动函数）
- 默认'easeOutElastic'
- 类型 string或自定义Bézier曲线坐标（数组）

easeIn	easeOut	easeInOut	说明
easeInQuad	easeOutQuad	easeInOutQuad
easeInCubic	easeOutCubic	easeInOutCubic
easeInQuart	easeOutQuart	easeInOutQuart
easeInQuint	easeOutQuint	easeInOutQuint
easeInSine	easeOutSine	easeInOutSine	正弦
easeInExpo	easeOutExpo	easeInOutExpo
easeInCirc	easeOutCirc	easeInOutCirc
easeInBack	easeOutBack	easeInOutBack
easeInElastic	easeOutElastic	easeInOutElastic

详细功能见文档

elasticity 弹性
- 默认 500
- 类型 number，function(target, index, totalTargets)
- range[0-1000]
round 通过舍入值来删除小数
- 默认 false
- 类型 number，boolean，function(target, index, totalTargets)
- 10次幂例：round:100 两位小数
loop 是否循环/循环次数
- 默认 false
- number，boolean
direction 方向
- 默认 'normal'
- 类型 'normal', 'reverse' 反向, 'alternate'会还原
autoplay 自动播放
- 默认 true
- 类型 boolean

属性的值

scale: '*=2',

范围

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'],
  duration: 1500
});

基于function的值

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

keyframe 关键帧

translateX: [
    { value: 250, duration: 1000, delay: 500, elasticity: 0 },
    { value: 0, duration: 1000, delay: 500, elasticity: 0 }
  ],

timeline

通过创建时间轴按顺序播放动画

timeline接收相同参数制作动画：

var myTimeline = anime.timeline({
  direction: 'alternate',
  loop: 3,
  autoplay: false
});

使用.add()给timeline添加动画：

myTimeline
  .add({
    targets: '.square',
    translateX: 250
    })
  .add({
    targets: '.circle',
    translateX: 250
    })

offset

定义时间轴上动画的开始时间。

type	examples	说明
+=	'+=100'	在前一个动画结束后100ms开始
-=	'-=100'	在前一个动画结束前100ms开始
*=	'*=2'	在前一个动画结束后2倍时间开始

.add({
    targets: '.circle',
    translateX: 250,
    offset: '-=600' // 在前一个动画结束前600ms开始
  })

使用数字在时间轴上定义绝对开始时间。

.add({
    targets: '.square',
    translateX: 250,
    offset: 1000 // Starts at 1000ms
  })

播放控制

var playPauseAnim = anime({
  targets: 'div',
  translateX: 250,
  direction: 'alternate',
  loop: true,
  autoplay: false // prevent the instance from playing
});
 
playPauseAnim.play(); //  播放
playPauseAnim.pause(); //  暂停
playPauseAnim.restart() // 重新播放
playPauseAnim.reverse() // 反向播放
playPauseAnim.seek(500) // 将动画当前时间设置为500ms

callback回调

update	type	参数	说明
update	function	animation Object	在time=0时调用
begin	function	animation Object	在动画延迟结束时调用
complete	function	animation Object	在所有循环结束时调用

在实例播放时，每个帧都会调用update()。

    update: function(anim) {
        console.log(anim.currentTime + 'ms'); // return value in ms.
        console.log(anim.progress + '%'); // return value in %
    }

begin() 只会调用一次在延迟结束后

    begin: function(anim) {
        console.log(anim.began); // true after 1000ms
    }

在实例播放时，每个帧都会调用run()。

    run: function(anim) {
        console.log(anim.currentTime);
    }

complete() 在实例结束后只会调用一次

    complete: function(anim) {
        console.log(anim.completed);
    }

SVG

运动路径

沿着svg路径旋转和转换DOM元素

// 创建一个路径`object`
var path = anime.path('#motionPath path');
 
var motionPath = anime({
  targets: '#motionPath .el',
  translateX: path('x'), // 沿着路径对象的x值
  translateY: path('y'), // 沿着路径对象的y值
  rotate: path('angle')  // 沿着路径对象的角度值
});

变形

为两个svg形状设置动画

<svg class="shape" width="128" height="128" viewBox="0 0 128 128">
<polygon points="64 68.64 8.574 100 63.446 67.68 64 4 64.554 67.68 119.426 100"></polygon>
</svg>

var svgAttributes = anime({
  targets: '.shape polygon',
  points: '64 128 8.574 96 8.574 32 64 0 119.426 32 119.426 96'
});

画线

根据svg形状线条绘制动画

anime({
  targets: '.shape path',
  strokeDashoffset: [anime.setDashoffset, 0]
});

Helpers

anime.speed=x

改变所有动画的速度，取值0~1

例：anime.speed=.5
anime.running

返回所有活动Anime实例的数组
anime.remove(target)

从动画中删除一个或多个元素

例：anime.remove('.item2')
anime.getValue

从元素中获取当前有效值

例：anime.getValue('div','reanslateX')
anime.path(pathEl)

为运动路径动画创建路径功能，接收DOM元素或CSS选择器

anime.setDashoffset(pathEl)

返回总路径的长度

例：

anime({
targets: '.shape path',
strokeDashoffset: [anime.pathDashoffset, 0]
});

anime.easings

返回所有已设置easing function数组
anime.random

返回两个数字之间的一个随机数

例：anime.random(1,5)

Animejs笔记

开始制作动画

动画属性

属性参数

属性的值

timeline

播放控制

callback回调

SVG

Helpers

猜你喜欢

热点阅读