腾讯AlloyTeam正式发布pasition - 制作酷炫Path过渡动画

shadowbook 发布于2019-08-20 17:24 / 3035人阅读

摘要：下面来看看的结构在开发者工具里截图每条都包含个数字，分别代表三次贝塞尔曲线的起点控制点控制点终点。这个函数可以自行尝试一下，生成出的字符串赋值给的的就可以了。

pasition

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

Github源代码

在线演示

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

安装

</>复制代码 
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.

GPU云服务器云服务器翻转过渡动画 ios过渡动画 jquery过渡动画正式发布

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/83559.html

2017-06-21 前端日报

摘要：前端日报精选实践总结掘金第期动画与动效之四完全指南众成翻译个编码小技巧教程使用浏览器开发者工具检查动画性能众成翻译中文图书深入理解译变量的正确使用方法知乎专栏正式发布众成翻译来了知乎专栏代码运行过程简述一个人文章的中文 2017-06-21 前端日报精选 redux-react实践总结 - 掘金【第972期】HTML5动画与动效之四flexbox 完全指南 - 众成翻译19个Java...

Chao 2019-08-20 17:24 评论0 收藏0
2017-07-04 前端日报

摘要：前端日报精选一起探索的众成翻译性能优化杀手掘金入门知乎专栏用实现无限循环的无缝滚动蚊子的博客前端每周清单组件解耦之道基于的自动化测试是否为时已晚中文译如何在无损的情况下让图片变的更小掘金第期用上古思想写现代前端踩坑集锦掘金 2017-07-04 前端日报精选一起探索 ES6 的 Generators - 众成翻译V8 性能优化杀手 - 掘金入门TypeScript React - ...

kelvinlee 2019-08-20 17:43 评论0 收藏0
SVG

摘要：目前只提供了一些基础功能。中与的区别开发者第一次接触手写那种，虽然很多情况都有设计师使用来完成这项工作，但还是不排除需要利用到的每个元素。轻量级，具备灵活的来自团队，全球非常出名的可视化团队。于是笔者尝试着把移植到中。使用SVG + CSS实现动态霓虹灯文字效果早上无意间进入一个网站，看到他们的LOGO效果略屌，如图：刚开始以为是gif动画之类的，审查元素发现居然是用SVG + ...

104828720 2019-08-29 14:00 评论0 收藏0
css - 收藏集 - 掘金

摘要：绝对底部前端掘金来自国外的设计达人，纯，可以实现当正文内容很少时，底部位于窗口最下面。有效解决图片使用单位边角缺失的问题前端掘金起因在移动端使用布局时图片也需要用单位。 CSS 绝对底部 - 前端 - 掘金来自国外的设计达人，纯CSS，可以实现: 当正文内容很少时，底部位于窗口最下面。当改变窗口高度时，不会出现重叠问题。甚至，创造该CSS的人还专门成立一个网站介绍这个CSS底部布局方案...

phpmatt 2019-08-29 12:41 评论0 收藏0