渐变动画-减速和提速

Question

我正在制作一部CAGradientLayer的动画，类似于苹果在iPhone主屏幕上的“滑动解锁”动画。然而，我的动画有点不同，因为它在某些点上减速和加速。

对如何减慢/加快渐变有什么想法吗？

Answer 1

大多数情况下，在动画软件中，这种效果不是通过动画渐变的颜色位置来创建的，而是通过将整个渐变移动到文本下面，将文本视为蒙版来创建的。一般来说，这会更有效，因为重新绘制渐变的代价很高。

这意味着将渐变绘制到材质(上下文)中，然后将其渲染到图像中，并将图像移动到文本下面，而文本则遮挡住该图像。在游戏的传统中，使用两个图像，所以他们完美地滚动，无缝地给你正确的效果。

然后，您只需加快或减慢作为渐变的图像的位置动画。

我希望这能对你有所帮助。尽管你现在做事情的方式有一段距离。

这里有一篇关于使用CATextLayers作为掩码的小博客文章：https://littlebitesofcocoa.com/245-masking-views-with-text-using-catextlayer

这里是位置的动画曲线，以获得您想要的结果：

​

​

这会产生这样的结果：

​

​

更新：

这就是它的机械外观，从表面材料中切出一个文本的“洞”，下面通过一个渐变纹理，上面的屏幕截图中显示了动画曲线：

​

​

Answer 2

也许可以在每个动画之间暂停(或延迟)？在您的didMoveToWindow()中的代码之间尝试一个变体：

func delay(_ delay:Double, closure:@escaping ()->()) {
    DispatchQueue.main.asyncAfter(
        deadline: DispatchTime.now() + Double(Int64(delay * Double(NSEC_PER_SEC))) / Double(NSEC_PER_SEC), execute: closure)
}