酷炫Path过渡动画js类库pasition.js

当前位置:主页 > Html5库 > SVG > 酷炫Path过渡动画js类库pasition.js
酷炫Path过渡动画js类库pasition.js
分享:

    插件介绍

    pasition.js是一款腾讯AlloyTeam正式发布的酷炫Path过渡动画js类库。通过pasition.js你可以轻松的制作各种路径变形过渡动画效果。

    浏览器兼容性

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

pasition.js是一款腾讯AlloyTeam正式发布的酷炫Path过渡动画js类库。通过pasition.js你可以轻松的制作各种路径变形过渡动画效果。

安装

可以通过npm来安装pasition.js。

npm install pasition                
                

使用方法

在页面中引入/pasition.js文件。

<script src="./dist/pasition.js"></script>     
                
使用指南

pasition.lerp

你可以通过 pasition.lerp 方法拿到插值中的shapes:

var shapes  = pasition.lerp(pathA, pathB, 0.5)
//拿到shapes之后你可以在任何你想要渲染的地方绘制,如canvas、svg、webgl等
...                  
                

pasition.animate

pasition.animate({
    from : fromPath,
    to : toPath,
    time : time,
    easing : function(){ },
    begin :function(shapes){ },
    progress : function(shapes, percent){ },
    end : function(shapes){ }
})
                

你可以从svg的path的d属性获取path。支持所有的SVG Path命令:

  • M/m = moveto
  • L/l = lineto
  • H/h = horizontal lineto
  • V/v = vertical lineto
  • C/c = curveto
  • S/s = smooth curveto
  • A/a = elliptical Arc
  • Z/z = closepath
  • Q/q = quadratic Belzier curve
  • T/t = smooth quadratic Belzier curveto

例如:

pasition.animate({
    from: 'M 40 40 Q 60 80 80 40T 120 40 T 160 40 z',
    to: 'M32,0C14.4,0,0,14.4,0,32s14.3,32,32,32 s32-14.3,32-32S49.7,0,32,0z',
    time: 1000,
    easing : function(){ },
    begin:function(shapes){ },
    progress : function(shapes, percent){
        //你可以在任何你想绘制的地方绘制,如canvas、svg、webgl
    },
    end : function(shapes){ }
});                  
                

对上面传入的配置项一一解释如下:

  • from 起始的路径
  • to 终点的路径
  • time 从from到to所需要的时间
  • easing 缓动函数(不填默认是匀速运动)
  • begin 开始运动的回调函数
  • progress 运动过程中的回调函数
  • end 运动结束的回调函数

该Path过渡动画js类库的gihub地址为:https://github.com/AlloyTeam/pasition