pasition

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

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

安装

npm install pasition

CDN地址下载下来使用:

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

使用指南

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){ }
})

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

支持所有的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 运动结束的回调函数

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

[
[
[], //curve
[], //curve
[] //curve
], //shape
[[],[],[],[],[]], //shape
[[],[],[],[],[]] //shape
]

在开发者工具里截图:

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

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

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

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

Fill模式:

function renderShapes(context, curves, color){
context.beginPath();
context.fillStyle = color||'black';
context.moveTo(curves[0][0], curves[0][1]);
curves.forEach(function(points){
context.bezierCurveTo(points[2], points[3], points[4], points[5], points[6], points[7]);
})
context.closePath();
context.fill();
} shapes.forEach(function(curves){
renderShapes(context,curves,"#006DF0")
})

Stroke模式:

function renderCurve(context, points, color){
context.beginPath();
context.strokeStyle = color||'black';
context.moveTo(points[0], points[1]);
context.bezierCurveTo(points[2], points[3], points[4], points[5], points[6], points[7]);
context.stroke();
} shapes.forEach(function(curves){
curves.forEach(function (curve) {
renderCurve(context, curve, "#006DF0")
})
})

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

    function toSVGPath(shapes){
//把 shapes数组转成 M....C........C........Z M....C.....C....C...Z 的字符串。
}

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

Github

https://github.com/AlloyTeam/pasition

License

This content is released under the MIT License.

腾讯AlloyTeam正式发布pasition - 制作酷炫Path过渡动画的更多相关文章

  1. [转]收集android上开源的酷炫的交互动画和视觉效果:Interactive-animation

    原文链接:http://www.open-open.com/lib/view/open1411443332703.html 描述:收集android上开源的酷炫的交互动画和视觉效果. 1.交互篇 2. ...

  2. Android github上开源项目、酷炫的交互动画和视觉效果地址集合

    Android上开源的酷炫的交互动画和视觉效果:http://blog.csdn.net/u013278099/article/details/50323689 Awesome-android-ui: ...

  3. [转]收集android上开源的酷炫的交互动画和视觉效果

    原文链接:http://www.open-open.com/lib/view/open1411443332703.html 描述:收集android上开源的酷炫的交互动画和视觉效果. 1.交互篇 2. ...

  4. Flutter酷炫的路由动画效果

    现在Flutter的路由效果已经非常不错了,能满足大部分App的需求,但是谁不希望自己的App更酷更炫那,下面介绍几个酷炫的路由动画. 其实路由动画的原理很简单,就是重写并继承PageRouterBu ...

  5. 腾讯AlloyTeam正式发布Canvas魔幻线条 - curvejs

    [原文链接] ## 写在前面 curvejs 中文读["克js"],是腾讯AlloyTeam打造的一款魔幻线条框架,让线条成为一名优秀的舞者,让线条们成为优秀的舞团,HTML5 ...

  6. 教你使用Python制作酷炫二维码

    这篇文章讲的是如何利用python制作狂拽酷炫吊炸天的二维码,非常有趣哦! 可能你见过的二维码大多长这样: 普普通通,平平凡凡,没什么特色... 但,如果二维码长这样呢! 或者 这样! 是不是炒鸡好看 ...

  7. 【Flutter 实战】酷炫的开关动画效果

    此动画效果是我在浏览文章时发现的一个非常酷炫的效果,于是就使用 Flutter 实现了. 更多动画效果及Flutter资源:https://github.com/781238222/flutter-d ...

  8. 使用 CSS 构建强大且酷炫的粒子动画

    粒子动画,顾名思义,就是页面上存在大量的粒子构建而成的动画.传统的粒子动画主要由 Canvas.WebGL 实现. 当然,不使用 HTML + CSS 的主要原因在于,粒子动画通常需要较多的粒子,而如 ...

  9. 用canvas制作酷炫射击游戏--part1

    好久没写博客了,因为过年后一直在学游戏制作方面的知识.学得差不多后又花了3个月时间做了个作品出来,现在正拿着这个作品找工作. 作品地址:https://betasu.github.io/Crimonl ...

随机推荐

  1. HTML5的article和section的区别

    内容区块是指将HTML页面按逻辑分割后的单位.对于页面网站来说,导航菜单.文章正文.文章的评论等每一个部分都可称为内容区块.      article元素      article元素代表文档.页面或 ...

  2. eclipse--java工程转web工程 以及 java或java web工程转maven工程

    1.  打开工程文件夹,编辑工程的.project文件. 在<natures></natures>中加入 <nature>org.eclipse.wst.commo ...

  3. Python变量运算字符串等

    一,作用域 操作 name = 'liuyueming' if 1==1:... print name... liuyueming 两次回车执行 修改代码 >>> if 1==1:. ...

  4. 点击文字选中checkbox

    <html> <head> <title>test</title> <meta http-equiv="content-Type&quo ...

  5. 云计算之路-阿里云上:攻击又来了,4个IP分别遭遇超过30G的流量攻击

    继5月13日下午被攻击之后,今天下午,攻击又肆无忌惮地来了,14:35.14:39.14:40.14:41 ,依次有4个IP遭遇超过30G的流量攻击,被阿里云“云盾”关进“黑洞”,造成被攻击IP上的站 ...

  6. nodejs6下使用koa2

    koa2里面使用ES7的语法,如async.await所以需要运行在node7.6之后:但在node7.6之前也可以利用babel是的koa2可以运行. 首先项目中安装babel,和babel的几个模 ...

  7. 自己实现so加载器

    在进行安全研究中,我们需要经常使用ida等工具对app的so进行动态调试.这其中遇到的最大问题可能就是app加了反调试.反root等保护手段对应用运行环境进行检测,而这些手段往往是在我们附加进程之前就 ...

  8. 原生JS Ajax 请求

    var username = document.getElementById('username').value; var password = document.getElementById('pa ...

  9. protobuf 系列 ---------下载、编译与使用

    protobuf是谷歌开发并开源的二进制序列化工具,比常用的xml,json体积更小,解析速度更快. 目前,手头上的项目有涉及到这个工具,打算仔细研究一番,顺带记录遇到的问题,解决方法,时间足够的话, ...

  10. servlet context 和 servlet config

    servletConfig Servlet容器初始化一个servlet对象时,会为这个servlet对象创建一个servletConfig对象,该对象中包含了servlet的<init-para ...