Animate Plus是一款可以制作CSS属性动画和SVG动画的高性能JS库插件。Animate Plus适合于在桌面设备和移动手机设备中制作快速UI交互以及较长的动画序列。
安装
可以使用nmp来安装该js插件。
npm install animateplus
或下载animate.min.js文件并在页面中引入。
<script src=animate.min.js></script>
使用方法
初始化
animate({ el: "div", translateX: 100, opacity: .5, duration: 500 });
API
- Arguments:
animate
接收一个Object
或一个最少包含一个元素属性键值对map
作为参数:animate({ el: "div", opacity: 0 });
或者:
var params = new Map(); params.set("el", "div"); params.set("opacity", 0); animate(params);
- el:要进行动画的元素。
el
可以是:- CSS选择器:
"div"
- jQuery对象:
$("div")
- DOM元素:
document.querySelector("div")
- DOM元素数组:
[document.querySelector("div")]
- 节点列表或HTMLCollection:
document.getElementsByTagName("div")
- CSS选择器:
- duration:动画的持续时间,单位毫秒,默认值1000。
- delay:动画开始前的延迟时间,单位毫秒,默认值0。
- easing:easing效果的类型。默认值为
easeOutElastic
。你可以在这里预览各种easing效果。- linear
- easeInQuad
- easeInCubic
- easeInQuart
- easeInQuint
- easeInSine
- easeInExpo
- easeInCirc
- easeInElastic
- easeInBack
- easeOutQuad
- easeOutCubic
- easeOutQuart
- easeOutQuint
- easeOutSine
- easeOutExpo
- easeOutCirc
- easeOutElastic
- easeOutBack
- easeOutBounce
- easeInOutQuad
- easeInOutCubic
- easeInOutQuart
- easeInOutQuint
- easeInOutSine
- easeInOutExpo
- easeInOutCirc
- easeInOutElastic
- easeInOutBack
- loop:布尔值。指定动画是否无限循环。默认值:
false
- direction:动画的方向。默认值为:
normal
。可选值有:- normal
- reverse
- alternate (只有在无限循环动画中可用)
- begin:在动画执行前触发的函数。由
el
参数决定的一组元素会被传入作为第一个参数。<!doctype html> <title>Example</title> <style> div { display: none; width: 100px; height: 100px; background: black; } </style> <div></div> <div></div> <script src=animate.min.js></script> <script> animate({ el: "div", scaleX: 2, begin: show }); function show(elements) { elements.forEach(function(el) { el.style.display = "block"; }); } </script>
- complete:和
begin
一样,但是是在动画结束后触发回调函数。
CSS动画
支持的属性有:
- opacity
- translateX
- translateY
- translateZ
- scaleX
- scaleY
- scaleZ
- rotateX
- rotateY
- rotateZ
- skewX
- skewY
- perspective
动画从CSS的默认值开,到你指定的CSS属性值结束。
animate({ el: "div", opacity: 0, // 从1到0淡出 translateX: 20 // 向右滑动20像素 });
你也可以通过传入一个数组对象来指定开始动画。
animate({ el: "div", opacity: [0, 1], // 从0到1淡入 translateX: [20, 0] // 从20像素向左滑动到0 });
如果你没有指定单位,animate
会自动指定:角度使用deg
,translate
和perspective
使用px
:
animate({ el: "div", translateX: "100%" });
SVG动画
SVG动画需要开始和结束点值的数组,任何接收数值的SVG属性都可以执行动画。
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="400" height="200"> <polygon /> </svg>
var colors = ["#0bf", "#fc0"]; var points = ["96 180 37 180 0 180 0 69 0 0 96 0 191 0 191 69 191 180 154 180", "95 147 36 180 50 114 0 69 67 61 95 0 122 61 190 69 139 114 153 180"]; animate({ el: "polygon", easing: "easeOutCubic", translateX: 200, fill: colors, points: points });