高性能CSS属性和SVG属性动画JS库插件-爱编程

高性能CSS属性和SVG属性动画JS库插件

来源：htmleaf 阅读：4 时间：2018-02-04 01:28

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")
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
});

在线预览源码下载