web299.com
全部
教育
语言/资格考试
法律
互联网
政务民生
Word模板
Excel模板
PPT模板
网页特效
小程序模板
网站模板
首页
教育
语言/资格考试
法律
互联网
政务民生
Word模板
Excel模板
PPT模板
网页特效
小程序模板
网站模板
当前位置:
首页
>
网页特效
>
动画效果
酷炫Path过渡动画js类库pasition.js
分类:
动画效果
日期:
2024-05-14
点击(0)
评论(0)
演 示
免费下载
简介
在页面中引入/pasition.js文件。 ```html ``` #### 使用指南 ------------ ##### pasition.lerp 你可以通过 pasition.lerp 方法拿到插值中的shapes: ```html var shapes = pasition.lerp(pathA, pathB, 0.5) //拿到shapes之后你可以在任何你想要渲染的地方绘制,如canvas、svg、webgl等 ... ``` ##### pasition.animate ```html 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 例如: ```html 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 运动结束的回调函数
相关推荐
html5浪漫粒子表白文字特效
SlidesJS幻灯片特效
html5瀑布流相册特效
css3 svg实现的情人节表白鲜花动画特效
t-scroll.js基于ES6的DOM元素,过渡动画库插件
纯js写省市区三级联动效果
广告
广告