动画效果说明
最后更新: 浏览次数: 855
动画效果是什么怎么用？
动画效果是指把一些图片文字进行偏移，淡入，缩放等效果。动画效果我们已经把一些常用的动画效果进行封装，只要调用一些参数就可以实现你要的效果了。
参数列表
友情提示：过度使用特效会降低页面性能
| 名称 | 功能 | 默认值 |
|---|---|---|
| data-animated | 定义一个动画 | - |
| data-countup | 定义一个数字累加的效果(必须启用data-animated 启用该项勿定义其后任何参数) | - |
| data-reset | 是否重复执行 | - |
| data-delay | 延迟执行时间(毫秒) | 0 |
| data-distance | 动画元素起始执行的距离 | '0px' |
| data-duration | 动画完成所需时间(毫秒) | 600 |
| data-easing | 动画开始值和结束值 之间的过渡方式 | 'cubic-bezier(0.5, 0, 0, 1)' |
| data-opacity | 动画开始之前的不透明度 | 0 |
| data-origin | 动画来自方向(top|right|bottom|left) | 'bottom' |
| data-rotate | 显示之前的旋转元素 | ' { x: 0,y:0,z: 0 }' |
| data-scale | 元素显示之前的缩放比例 | 1 |
动画效果的展示
偏移
代码
<div data-animated>1000</div>效果
1000
说明：
data-animated是把文字或图片进行偏移,默认是从下往上.要使用动画效果必需要加data-animated数字的累加
代码
<span data-animated data-countup>1000</span>效果
1000说明：
data-countup代表的就是进行累加,有一点要注意要加的必须是数字,不能带有文字字符等不属于数字的.是否重复执行
代码
<div data-animated data-reset>1000</div>效果
1000
说明：
在不加data-reset的时候偏移效果只会出现一次，加了之后每次到达添加的地方就会进行偏移延迟执行时间(毫秒)
代码
<div data-animated data-delay="1000">1000</div>效果
1000
说明：
添加了data-delay之后,你到达添加的地方就不会马上进行你添加的效果会等待到你设置的时间才进行你设置的效果.动画元素起始执行的距离
代码
<div data-animated data-distance="5px">1000</div>效果
1000
说明：
在使用data-animated的时候如果感觉偏移的距离太长了,就可以设置data-distance来控制偏移多少像素动画完成所需时间(毫秒)
代码
<div data-animated data-duration="1000">1000</div>效果
1000
说明：
在使用data-animated的时候如果感觉偏移的时间太长或太短了,就可以设置data-duration来控制偏移所需要的时间动画开始值和结束值之间的过渡方式
代码
<div data-animated data-easing>1000</div>效果
1000
说明：
动画开始之前的不透明度
代码
<div data-animated data-opacity="100">1000</div>效果
1000
说明：
data-opacity可以调节动画开始之前的不透明度动画来自方向
代码
<div data-animated data-origin="left">1000</div>效果
1000
说明：
在使用的data-animated的时候如果想换偏移方向的时候就可以用到data-origin,有四个值上top|右right|下bottom|左left显示之前的旋转元素
代码
<div data-animated data-rotate="{x:180,y:180,z:180}"">1000</div>效果
1000
说明：
元素显示之前的缩放比例
代码
<div data-animated data-scale="2">1000</div>效果
1000
