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 日

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

发表评论到 Sorrow.X