当前位置：首页 > 网页特效 > 动画效果

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

分类：动画效果日期：2024-05-14 点击(0) 评论(0)

演示免费下载

简介

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

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

------------

##### 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 运动结束的回调函数

web299.com

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

简介

html5浪漫粒子表白文字特效

SlidesJS幻灯片特效

html5瀑布流相册特效

css3 svg实现的情人节表白鲜花动画特效

t-scroll.js基于ES6的DOM元素,过渡动画库插件

纯js写省市区三级联动效果