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

当前位置:主页 > Html5库 > SVG > 高性能CSS属性和SVG属性动画JS库插件
高性能CSS属性和SVG属性动画JS库插件
分享:

    插件介绍

    Animate Plus是一款可以制作CSS属性动画和SVG动画的高性能JS库插件。Animate Plus适合于在桌面设备和移动手机设备中制作快速UI交互以及较长的动画序列。

    浏览器兼容性

    浏览器兼容性
    时间:06-13
    阅读:
简要教程

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

  • Argumentsanimate接收一个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会自动指定:角度使用degtranslateperspective使用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
});