aft.js

AFT是什么

AFT是动画流（Animation Flow）开发工具库（Tools）的缩写，它可以轻松的让一个JS对象或HTML元素动起来，也可以借助时间轴的功能来管理复杂的动画设计。

浏览器支持

IE9+, Firefox, Chrome, Android Browser 4.4+, iOS Safari 7.0+.

获取代码

通过npm安装

npm install aft.js

然后在代码中引入

import * as AFT from 'aft.js';

快速上手

JS对象动画

animate(initial: object): Tween

const tween = AFT.animate({
  opacity: 0  
});

通过animate方法，可以创建一个Tween实例，并接收一个js对象为初始参数。

tween.to(result: object).duration(time: number).easing(type: string|function): Tween

tween.to({
  opacity: 1
})
.duration(1000)
.easing('ease-out') 

通过链式调用Tween实例的方法，来定义一次动画。

tween.play(): Tween

通过调用play方法，来播放这次动效，并在update方法中获得每一帧变化后的值。

tween.update(current => {
  console.log(current.get('opacity'));
}).play();【

HTML元素动画

animate(initial: HTMLElement): Tween

用animate方法，即可以操作一个js对象，也可以操作一个HTML元素。

AFT.animate(document.getElementById('rectangle'))
.to({
  backgroundColor: '#f00',
  rotateZ: '360deg'
})
.duration(400)
.easing('ease-in')
.iteration(2)
.direction('alternate')
.play();

当操作一个HTML元素时，to方法参数中的对象键名，必须是CSS的标准属性，且仅支持分量写法，例如：backgroundColor，borderLeftColor, paddingLeft等，不支持组合写法，例如：margin,padding等。而对于transform属性的动效，可以直接写其矩阵变换方法，同样也只支持分量写法，例如：translateX，rotateZ等。并且因为矩阵变换不可逆的特性，当前版本尚不支持有初始变换矩阵值的元素。

继续深入

玩转复杂的动画逻辑

animate方法能快速的创建一个动画，但是对于由多个或复杂动画片段组成的完整场景就需要用到Effect，Animation，Timeline三个模块。

createEffect(): Effect

通过createEffect的工厂方法可以创建一个Effect实例，并链式的调用动效方法来定义一系列动效。这些定义好的动效是可以被复用的。

const fadeInEffect = AFT.createEffect();
fadeInEffect.to({
  opacity: 1
})
.duration(400)
.easing('ease-in');
 
const bounceInEffect = AFT.createEffect();
bounceInEffect.to({
  translateY: '50px'
})
.duration(400)
.easing('cubic-bezier(.42,0,.5,1.5)');

createAnimation(initial: object|HTMLElement, effect: Effect, iteration: number): Animation

通过createAnimation的工厂方法创建一个Animation实例，并把js对象或HTML元素同某个动效绑定，就定义了一个动画。

const rect = document.createElement('div');
rect.style.cssText = 'opacity:0;width:100px;height:100px;background-color:black;';
document.body.appendChild(rect);
 
const fadeIn = AFT.createAnimation(rect, fadeInEffect);
const bounceIn = AFT.createAnimation(rect, bounceInEffect);

createTimeline(): Timeline

timeline.add(animation: Animation, options: {playAt: number|function, stopAt: number|function}): Timeline

timeline.play(): Timeline

通过createTimeline的工厂方法创建一个Timeline实例，并通过实例的add方法添加一个动画以及动画播放时机的参数，就可以控制这个动画了。

让上述定义的两个动画一起播放

const timeline = AFT.createTimeline();
timeline.add(fadeIn, {
  playAt: 0
}).add(bounceIn, {
  playAt: 0
}).play();

让上述定义的两个动画顺序播放

const timeline = AFT.createTimeline();
timeline.add(fadeIn, {
  playAt: 0
}).add(bounceIn, {
  playAt: () => fadeIn.finished
}).play();

关于开源

目前aft.js仅以npm包的形式供下载和开发，未来考虑以源代码的形式在github开源。

Apache 2.0 License. © 2018.