您的（和我的）第一个带有核心动画的贝塞尔曲线

我很高兴学习Xcode中的动画。 这是我的背景，也是我的热情。 但是当我们学习UIView动画时，我非常失望。 这个过程感觉很笨拙，就像我无法在Maya或After Effects中所能控制的地方一样。

我决定学习Core Animation，这就是我要带您了解的内容。 这是一个用于bezier动画的非常简单的教程，只是让您不知所措。

什么是贝塞尔曲线？

让我们从这里开始。 在设计工作时要理解这是一个非常重要的概念。 Adobe Creative Suite会大量使用它们。 贝塞尔曲线简单且可扩展，非常适合矢量图像。 如果您使用过Illustrator或Photoshop，则可能已经看到过贝塞尔手柄：

贝塞尔曲线也是计算机动画的基础。 可以沿贝塞尔曲线移动对象。 速度图使用贝塞尔曲线手柄。 它们允许轻松控制动画流，同时仍保持事物的紧密和流畅。

但是，贝塞尔实际上是什么？ 长的答案在于函数，但这不是您必须记住的东西。 我能找到的最好的视觉解释来自博客文章（如果您想深入研究贝塞尔曲线及其背后的微积分，则值得一读）：

简短的答案以及您需要了解的所有内容是， 贝塞尔曲线是具有起点和终点的直线，在点之间平滑插值以创建曲线。

如何为Core Animation制作动画？

在探讨如何沿贝塞尔曲线进行动画处理之前，让我们研究一下Core Animation。 核心动画（用于与之关联的类，协议等的缩写CA）是一种基础结构，可用于为应用程序的视图和其他可视元素制作动画。

1. 导入QuartzCore ，但是如果您已经包含在UIKit中 ，则不需要这样做，它是其中的一部分
2. 设置要更改的视图。 我通过将变量声明为UIView并将其添加到主视图并设置其框架来以编程方式进行操作。 别忘了也给它加上背景色！ 和我一起玩，变黑。
3. 输入以下代码：

 让changeColor = CABasicAnimation（keyPath：“ backgroundColor”） 

  changeColor.fromValue = backgroundView.backgroundColor 
  changeColor.toValue = UIColor.white.cgColor 

  changeColor.duration = 2 

  backgroundView.layer.add（changeColor，forKey：“ backgroundColor”） 

这里发生了什么事？

• 首先，将一个变量声明为CABasicAnimation（keypath :)的实例
• 密钥路径不必是属性，以后也不必与密钥路径相同。 这只是一个标识符。 放任何东西。
• 然后给它一个from值（在这里我将其设置为它已经具有的值），然后给一个to值，在这里将其设置为白色。 确保它是CGColor，这是通过在UIColor初始化的末尾添加.cgColor来实现的。
• 给它一个持续时间（我决定2秒）
• 然后将动画添加到对象的layer 。 不是对象本身。

运行！ 您应该看到视图从黑色逐渐消失为白色。 做得好！ 现在，如果有人问您是否曾经使用过核心动画，您可以说“是的，这一次我读博客！”

如何创建贝塞尔曲线动画？

现在，我们了解了基础知识，让我们制作一个UIBezierCurve动画！

我首先在视图控制器中创建函数。 我在viewDidLoad（）中调用了该函数，然后制作了一个名为sky的背景视图，该视图被限制为ViewController主视图的大小。 简单的东西。

因此，让我们开始创建一个通用的UIBezierCurve。

 让路径= UIBezierPath（） 

然后让我们添加太阳的图像。 我在资产中的太阳图像被称为“太阳”。

 让imageSunName =“ Sun” 
 让imageSun = UIImage（named：imageSunName） 
 让imageView = UIImageView（image：imageSun） 

  imageView.frame = CGRect（x：0，y：0，宽度：100，高度：100） 
  self.view.addSubview（imageView） 

使用path.move（to 🙂设置曲线开始的CG点。 然后使用path.QuadCurve（to：controlPoint 🙂添加另外两个CG点。 to：将是端点， controlPoint：将是贝塞尔曲线将插值到的矩形的顶部。

  path.move（至：CGPoint（x：sky.frame.maxX，y：sky.frame.maxY）） 
  path.addQuadCurve（至CGPoint（x：0，y：sky.frame.maxY），controlPoint：CGPoint（x：sky.frame.maxX / 2，y：0）） 

然后，创建动画：

1. 创建一个动画常量（我们需要使其成为CAKeyframeAnimation才能使用贝塞尔曲线路径。
2. 将贝塞尔曲线设置为animation.path属性。
3. 给它一个重复计数（如果需要）和持续时间
4. 然后将动画添加到图层。

 让动画= CAKeyframeAnimation（keyPath：“位置”） 
  animation.path = path.cgPath 

  animation.repeatCount = 0 
  animation.duration = 2.0 

  imageView.layer.add（animation，forKey：“沿路径动画”） 

  imageView.center = CGPoint（x：0，y：sky.frame.maxY） 

快点！ 看着你的太阳升起并落山！

现在，像我一样，掌握您的新知识并继续前进！ 我希望以更高级的动画回到我的博客，以分享和增强我自己。