使用 CGPath 为笔画末端设置动画颜色

Posted 2023-03-13

【中文标题】使用 CGPath 为笔画末端设置动画颜色

【英文标题】：Animate color of stroke's ends using CGPath

【发布时间】：2015-07-04 23:30:07

【问题描述】：

快速图表！我正在尝试实现这一点：

我目前几乎 100% 都在工作（虽然这是动画的一个稍微不同的阶段）：

减去笔触末端的淡入淡出效果后，一切看起来都不错。使用简单的CGPath 可以吗？我正在为strokeStart 和strokeEnd 制作动画以获得当前效果。我尝试使用CAGradientLayer 作为图层上的蒙版，但这会在整个图层上添加渐变，而不仅仅是末端。覆盖drawRect 是不可能的，因为我正在使用动画动态地执行此操作。

关于如何实现这种效果的任何想法？我不知道该往哪个方向走。

【问题讨论】：

我想我曾经做过你所说的事情。我的方法是使用 CAShapeLayer，然后绘制 CGPath，然后使用 CGContextReplacePathWithStrokedPath(context) 和 CGContextClip(context) 制作剪切路径。然后我将 CGContextDrawLinearGradient 应用于上下文。所有这些都在 CAShapeLayer 的 drawInContext 中，我使用了一个自定义的动画变量，以便剪切路径和（颜色）线性渐变在整个动画过程中一起变化。

@SamuelW。感谢您提供详细信息。我试图摆脱使用 drawInContext 或任何类型的手动覆盖绘图函数，但这可能是不可能的。如果没有更多的想法，我会尝试一下。

@DylanGattey 你能解决这个问题吗？我会对您的解决方案非常感兴趣。

我尝试了 Sam 的方式，但对于我们的需求来说太慢了。仍在努力实现这一点，所以不，还没有解决方案。有什么想法吗？

【参考方案1】：

根据不透明度的重要性以及动画其余部分的复杂程度，一种选择是制作两个模糊的尾部对象，follow the ends of the path 正在制作动画。

迂回解决方案，抱歉我想不出另一种通用的方法！