web299.com
全部
教育
语言/资格考试
法律
互联网
政务民生
Word模板
Excel模板
PPT模板
网页特效
小程序模板
网站模板
首页
教育
语言/资格考试
法律
互联网
政务民生
Word模板
Excel模板
PPT模板
网页特效
小程序模板
网站模板
当前位置:
首页
>
网页特效
>
动画效果
模拟现实物体运动的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/
相关推荐
html5浪漫粒子表白文字特效
SlidesJS幻灯片特效
html5瀑布流相册特效
css3 svg实现的情人节表白鲜花动画特效
t-scroll.js基于ES6的DOM元素,过渡动画库插件
纯js写省市区三级联动效果
广告
广告