专栏首页web秀使用 pasition 制作酷炫Path过渡动画

使用 pasition 制作酷炫Path过渡动画

pasition

Pasition – Path Transition with little JS code, render to anywhere – 超小尺寸的Path过渡动画类库 Github源代码 在线演示 最近和贝塞尔曲线杠上了,如curvejspasition 都是贝塞尔曲线的应用案例,未来还有一款和贝塞尔曲线相关的开源的东西,暂时保密。

安装

npm install pasition

CDN地址下载下来使用: https://unpkg.com/pasition@1.0.1/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){ }
});

对上面传入的配置项目一一解释下: 1. from 起始的路径 2. to 终点的路径 3. time 从from到to所需要的时间 4. easing 缓动函数(不填默认是匀速运动) 5. begin 开始运动的回调函数 6. progress 运动过程中的回调函数 7. end 运动结束的回调函数 在progress里可以拿到path转变过程中的shapes和运动进度percent(范围是0-1)。下面来看看shapes的结构:

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

在开发者工具里截图:

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

每个shape都是闭合的,所以shape的基本规则是: 1. 每条curve的终点就是下一条curve的起点 2. 最后一条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就可以了。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 从400多k的大小减到了2B,我的APP是怎么优化的?

    虽然现在网速已经非常快,用户流量也很多,但是对于我们的 Android apk 文件进行优化还是很有必要的,动不动几十上百兆的大小,用户体验还是很不好的,下面我...

    Android技术干货分享
  • Qt编写自定义控件44-天气仪表盘

    天气仪表盘控件是所有控件中唯一一个使用了svg矢量图的控件,各种天气图标采用的矢量图,颜色变换采用动态载入svg的内容更改生成的,其实也可以采用图形字体来做,本...

    feiyangqingyun
  • 在 Node.js 中转换 SVG 图像格式[每日前端夜话0xAD]

    你需要将SVG文件转换为PNG、JPEG、TIFF、WEBP 和 HEIF 格式吗?本文将指导你如何转换为所有这些类型的格式。

    疯狂的技术宅
  • 使用SVG symbols建立图标系统完整指南

    从最开始的使用img图片,到后来的使用css sprite来减少服务器请求,再到流行的图形字体化图标Iconfont。现在,一种全新的图标使用方式开始流行了起来...

    用户6167509
  • CSS3文本与字体

    兼容性:IE5.5+、FireFox15+、Chrome4+、Safari3.1+、Opera15+

    Leophen
  • 啥是佩奇? SVG 线条动画告诉你。

    前面文章《SVG 线条动画基础入门知识》学习到了基础知识,现在来给大家讲讲如何制作SVG 制作复杂图形线条动画。

    Javanx
  • 数据科学篇| Matplotlib和数据可视化(三)

    数据的处理、分析和可视化已经成为Python近年来最为重要的应用领域之一,其中数据的可视化指的是将数据呈现为漂亮的统计图表,然后进一步发现数据中包含的规律以及隐...

    用户6029108
  • 奇技淫巧——CSS 实现波浪效果

    因为实现波浪的曲线需要借助贝塞尔曲线。 而使用纯 CSS 的方式,实现贝塞尔曲线,额,暂时是没有很好的方法。 当然,借助其他力量(SVG、CANVAS),是...

    Javanx
  • SVG 线条动画基础入门知识

    1、CSS3 动画 2、javascript 动画(canvas) 3、html 动画(SVG)

    Javanx
  • 「数据可视化库王者」D3.js 极速上手到Vue应用

    D3近年来一直是 JavaScript最重要的数据可视化库之一,在创建者 MikeBostock的维护下,前景依然无量,至少现在没有能打的:

    用户1462769

扫码关注云+社区

领取腾讯云代金券