如何绘制羽化/模糊的描边路径的动画

时间:2020-09-11 13:34:15

标签: swift core-graphics core-animation

this thread中,我问过如何创建边缘模糊的填充路径的动画,以创建带有羽化边缘的“圆形擦拭”动画。

解决方案是将路径安装在动画效果层的shadowPath属性中。核心图形将可变数量的模糊应用于阴影路径,并且shadowPath属性是可动画的。但是,它会填满您安装到其中的任何路径。您不能使用它绘制有羽毛/模糊的描边路径,因为阴影所呈现的是安装的任何路径的封闭填充版本。

有一种方法copy(strokingWithWidth:lineCap:lineJoin:miterLimit:transform:)可以将描边路径转换为跟踪描边路径轮廓的封闭路径。如果您填充该方法的输出,您将获得原始路径的描边版本。您可以将转换后的路径安装到图层的shadowPath中,并获得漂亮的,模糊的描边路径。

但是,在幕后,copy(strokingWithWidth:lineCap:lineJoin:miterLimit:transform:)方法做的一些事情使生成的路径不适合路径动画。如果您查看Rob Mayoff's excellent answer in this thread,就会发现对于内部拐角,Core Graphics会创建与描边形状的内部重叠的奇数三角形。有时候,它的形状有时也会改变路径输出中的顶点数量。

对于以相当细的线宽描边的路径,它们的动画效果很好。这是一个例子: enter image description here

但是当您增加线宽和/或模糊半径时,事情就会变成“全梨形”(这意味着它们非常错误。)这是具有相同设置的同一条曲线的动画:

enter image description here

您可以看到the project that generates these images on Github,然后自己尝试。

问题:

有人知道一种将描边路径转换为不具有Rob Mayoff's post中所述伪像的填充路径的方法吗?

如果必须的话,我可以编写自己的copy(strokingWithWidth:lineCap:lineJoin:miterLimit:transform:)版本,该版本将创建一个具有固定数量顶点的填充路径,并且没有该方法创建的工件,但这会涉及很多。我希望有一个现有的解决方案。

0 个答案:

没有答案