pasitionPasition-PathTransitionwithlittleJScode,rendertoanywhere-Github源码在线演示超小型Path转场动画库最近和Bezier曲线条是的，例如，curvejs和pasition都是贝塞尔曲线的应用案例。以后会开源一个和贝塞尔曲线相关的东西，暂时保密。安装npminstallpasitionCDN下载使用地址：https://unpkg.com/pasition@1.0.0/dist/pasition.js用户指南pasition.lerp可以通过pasition.lerp方法获取插值中的形状：varshapes=position.lerp(pathA,pathB,0.5)//得到shapes后可以在任何你想渲染的地方绘制，比如canvas、svg、webgl等...pasition.animatepasition.animate({from:fromPath,to:toPath,time:time,easing:function(){},begin:function(shapes){},progress:function(shapes,percent){},end:function(shapes){}})路径在哪里来自？您可以从svg路径的d属性中获取它。支持所有SVG路径命令：M/m=movetoL/l=linetoH/h=horizo??ntallinetoV/v=verticallinetoC/c=curvetoS/s=smoothcurvetoA/a=ellipticalArcZ/z=closepathQ/q=quadraticBelziercurveT/t=smoothquadraticBelziercurveto例如：position.animate({from:'M4040Q60808040T12040T16040z',to:'M32,0C14.4,0,0,14.4,0,32s14.3,32,32,32s32-14.3,32-32S49.7,0,32,0z',time:1000,easing:function(){},begin:function(shapes){},进度：function(shapes,percent){//你可以在任何你想画的地方画，比如canvas,svg,webgl},end:function(shapes){}});对上面传入的配置项一一解释下：从起始路径到结束路径time从到到easing缓动函数所需的时间（不填则默认匀速运动）begin启动的回调函数movementprogress运动过程中的回调函数end运动结束的回调该函数可以获取progress中路径变换过程中的形状和运动进度百分比（范围为0-1）。我们来看看形状的结构：[[[],//curve[],//curve[]//curve],//shape[[],[],[],[],[]],//shape[[],[],[],[],[]]//shape]在开发者工具中截图：每条曲线包含8个数字，代表三次贝塞尔曲线的起点控制点指向最后。每个形状都是封闭的，所以形状的基本规则是：每条曲线的终点是下一条曲线的起点，最后一条曲线的终点是第一条曲线的起点。了解基本规则后，我们就可以进行渲染了，这里我们以Renderingincanvas为例：填充方式：functionrenderShapes(context,curves,color){context.beginPath();context.fillStyle=color||'黑色';context.moveTo(曲线[0][0],曲线[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")})描边模式：functionrenderCurve(context,points,color){context.beginPath();context.strokeStyle=color||'黑色';context.moveTo（点[0]，点[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")})})当然也可以将shape转成SVG命令并在SVG中呈现它们，这应该不是什么难事：functiontoSVGPath(shapes){//将shapes数组转换成M....C.....C.....ZM....C的字符串。....C....C...Z}这个函数可以自己试试，将生成的字符串赋值给SVGPath的d。Githubhttps://github.com/AlloyTeam/pasitionLicense本内容在MITLicense下发布。
