当前位置：首页 > 网页特效 > 动画效果

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

分类：动画效果日期：2024-05-14 点击(0) 评论(0)

演示免费下载

简介

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

```html
var world = anima.world()
```
然后你可以添加你想要动画的对象。

```html
var item = world.add(document.querySelector("div"))
```
现在，world开始循环，等待对象的转换动画。

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

```html
item.animate(...).css()
```
####  Single animation
参数：

- transformations的map集合。当前只有translate、rotate、scale和opacity可以使用。
- 动画的持续时间
- 动画的Easing效果
- 动画的延时
```html
item.animate({translate: [x, y, z]}, 500, 'ease-in-out-quad', 100)
```
也可以使用一个单独的对象：

```html
item.animate({
  translate: [x, y, z],
  opacity: .5,
  duration: 500,
  ease: 'ease-in-out-quad',
  delay: 100
})
```
```html
注意：获取transformations的值比item的状态要晚，它通常使用初始值或前一个状态的值。rotate角度的单位是degrees。
```
####  Sequential animations 
你可以很容易的创建一个动画序列：

```html
item.animate(...).animate(...).animate(...)
```
####  Parallel animations
你可以像下面这样创建平行动画：

```html
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中使用。

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

```html
var animation = item.animate(...).animate(...).css()
animation.pause()
animation.stop()
```
####  动画事件

------------

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

```html
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方法用于动画查询。

```html
var world = anima.timeline()
world.add(...)
world.seek(500) // seek to 500ms
```
####  物理特性

------------

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

```html
var world = anima.js()
world.add(document.querySelector('.div'), {
    mass: 1,
    viscosity: 0.05 // velocity controls friction
})
```
更多关于Anima的信息前查看：http://lvivski.com/anima/

web299.com

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

简介

html5浪漫粒子表白文字特效

SlidesJS幻灯片特效

html5瀑布流相册特效

css3 svg实现的情人节表白鲜花动画特效

t-scroll.js基于ES6的DOM元素,过渡动画库插件

纯js写省市区三级联动效果