TAT.dnt 使用 pasition 制作酷炫Path过渡动画
In HTML5,Web开发 on 2017年07月03日 by view: 2,244
1

pv
pv

pasition

Pasition – Path Transition with little JS code, render to anywhere – 超小尺寸的Path过渡动画类库

最近和贝塞尔曲线杠上了,如curvejspasition 都是贝塞尔曲线的应用案例,未来还有一款和贝塞尔曲线相关的开源的东西,暂时保密。

安装

CDN地址下载下来使用:

https://unpkg.com/pasition@1.0.1/dist/pasition.js

使用指南

pasition.lerp

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

pasition.animate

path从哪里来?你可以从svg的path的d属性获取。

支持所有的SVG Path命令:

举个例子:

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

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

在progress里可以拿到path转变过程中的shapes和运动进度percent(范围是0-1)。下面来看看shapes的结构:

在开发者工具里截图:

每条curve都包含8个数字,分别代表三次贝塞尔曲线的 起点 控制点 控制点 终点。

每个shape都是闭合的,所以shape的基本规则是:

  • 每条curve的终点就是下一条curve的起点
  • 最后一条curve的终点就是第一条curve的起点

知道基本规则之后,我们可以进行渲染,这里拿canvas里渲染为例子:

Fill模式:

Stroke模式:

当然你也可以把shapes转成SVG的命令在SVG渲染,这应该不是什么困难的事情:

这个函数可以自行尝试一下,生成出的字符串赋值给SVG的Path的d就可以了。

更新: liyongleihf2006 的SVG解决方案

Github

https://github.com/AlloyTeam/pasition

License

This content is released under the MIT License.

原创文章转载请注明:

转载自AlloyTeam:http://www.alloyteam.com/2017/07/12803/

  1. Sorrow.X 2017 年 7 月 23 日

    顶顶,好久没来看博客了,哈哈

发表评论