css3运动框架,模拟现实物体运动的js动画库框架-Anima

Anima是一款可以同时控制许多对象进行动画的js插件。并且每一个对象都有它们各自的质量和密度以模拟现实生活中的物体。CSS动画有一些限制，最主要的是你不可以真正完全的控制它们。如果不使用一些技巧的话，你几乎不可能停止动画的过渡。

另一个问题是keyframes的百分比计算。人们都是在头脑中想象每一帧动画的时间点，但是你是否想过使用百分比的方法，例如0% start 50% fly 70% stop 90% fly。Anima可以使你很方便的使用delays和durations，甚至是纯CSS动画。它使用CSS transforms和3d-transforms结合js来创建动画。你可以完全控制动画流，你可以开始、结束和取消动画。当然你也可以使用纯css来制作，但是会受到一些限制。

Anima是一个基本的物理基础动画框架。你可以通过它很容易的创建现实生活中的物体运动动画。Anima经过压缩后只有5K大小。

浏览器兼容

Chrome, Safari, Firefox, Internet Explorer 10。

使用方法

Anima将整个动画看成是一个world。你首先必须初始化world。初始化后动画帧将开始循环。下面是使用js来调用的方法：

var world = anima.world()

然后你可以添加你想要动画的对象。

var item = world.add(document.querySelector("div"))

现在，world开始循环，等待对象的转换动画。

如果你想生成纯CSS动画，可以在明确的.animate对象后面添加.css()方法:

item.animate(...).css()

Single animation

参数：

transformations的map集合。当前只有translate、rotate、scale和opacity可以使用。

动画的持续时间

动画的Easing效果

动画的延时

item.animate({translate: [x, y, z]}, 500, 'ease-in-out-quad', 100)

也可以使用一个单独的对象：

item.animate({

translate: [x, y, z],

opacity: .5,

duration: 500,

ease: 'ease-in-out-quad',

delay: 100

})

注意：获取transformations的值比item的状态要晚，它通常使用初始值或前一个状态的值。rotate角度的单位是degrees。

Sequential animations

你可以很容易的创建一个动画序列：

item.animate(...).animate(...).animate(...)

Parallel animations

你可以像下面这样创建平行动画：

item.animate([{

translate : [x,y,z],

duration: 500,

ease: 'ease-in-out-quad',

delay: 100

},{

rotate : [angleX,angleY,angleZ],

duration: 1000,

ease: 'ease-in-expo',

delay: 400

}])

你只需要为transformations提供一个数组就可以创建平行动画了。

Infinite animations

在.animate链后面调用.infinite()方法可以制作无限循环的动画。

动画控制

当你在对象是上调用.animate()方法时，动画就开始执行了。有三个可用的控制动画的方法：pause、resume和stop，它们可以在对象上使用，也可以在整个world中使用。

item.pause()

world.stop()

如果你使用纯CSS，只需要在.animate之后调用.css()方法即可。它将返回一个自定义的CSS对象，并且该对象拥有pause、resume和stop方法。

var animation = item.animate(...).animate(...).css()

animation.pause()

animation.stop()

动画事件

每一个动画都有它自己的start和end事件

item.animate(...).on('start', callback).on('end', callback)

Easing效果

下面是支持的easing效果：

linear ease-in-quad ease-in-cubic ease-in-quart ease-in-quint ease-in-sine ease-in-expo ease-in-circ ease-in-back

ease-out-quad ease-out-cubic ease-out-quart ease-out-quint ease-out-sine ease-out-expo ease-out-circ ease-out-back

ease-in-out-quad ease-in-out-cubic ease-in-out-quart ease-in-out-quint ease-in-out-sine ease-in-out-expo ease-in-out-circ ease-in-out-back

关于Easing你可以查阅：easings.net 。

时间轴

时间轴功能是用于帮助开发者调试和测试的单独的world。它像其它world一样拥有play、pause和stop方法。它还有一个特别的seek方法用于动画查询。

var world = anima.timeline()

world.add(...)

world.seek(500) // seek to 500ms

物理特性

每一个对象都有它自己的质量和密度：

var world = anima.js()

world.add(document.querySelector('.div'), {

mass: 1,

viscosity: 0.05 // velocity controls friction

})