Ios 如何将插入符号形状设置为平滑圆弧的动画？

我想创建一个动画，其中插入符号形状（“>”）动画化为圆弧。它适用于有插入符号的应用程序，插入符号转换为3/4圆弧，然后在网络事务运行时旋转

动画应如下所示：

---

每当我尝试这样做路径动画，我会得到非常奇怪的结果。如何创建平滑动画？

这类动画的秘诀是将路径安装到

CAShapeLayer

中，并在路径上使用

CABasicAnimation

将路径从起始状态转换为结束状态。棘手的部分是起始路径和结束路径需要具有相同数量和类型的控制点

我写了一个演示应用程序，创建了上面的动画。你可以（链接）

以下是回购协议的自述，详细解释了其工作原理：

---

卡雷托动画

此项目为插入符号到跨越3/4个圆的圆弧的简单变换设置动画。看起来是这样的：

它通过设置安装到CAShapeLayer中的路径的动画来工作

class override var layerClass: AnyClass {
        return CAShapeLayer.self
    }

为了使路径动画正常工作，起始路径和结束路径需要具有相同数量和类型的控制点

要从插入符号到圆弧设置动画，它将插入符号创建为2条立方贝塞尔曲线。第一条“曲线”（实际上是一条直线）从插入符号的左下角开始，沿较低的线段通过路径的1/3和2/3点，并在插入符号中的“弯曲”处结束。这将创建渲染为线段的贝塞尔曲线。第二条曲线也是一条直线贝塞尔曲线。第二个从插入符号的弯曲处开始，在左上角结束

圆弧也由2条三次贝塞尔曲线组成，绘制方向与插入符号中的方向相同。但是，选择圆弧Bezier曲线的控制点，以使生成的曲线接近3π/2弧度或270度或3/4圆环的圆弧。圆弧略大于它所替换的插入符号，并且朝向相同的方向

如果添加贝塞尔控制点的视觉表示，则更容易理解，如下所示：

插入符号/曲线上的红点是两条贝塞尔曲线的端点。圆弧外侧的红点是定义曲线形状的控制点。对于插入符号形状，控制点位于直线上，这导致贝塞尔曲线采用直线形状

我曾经得到两条贝塞尔曲线的控制点。我不想算出数学，所以我只是在该页面的交互式圆弧渲染器上设置曲线以绘制3/8的圆，写下所有控制点的坐标，然后翻转它们以获得第二条贝塞尔曲线

以下是我用于查找贝塞尔控制点的贝塞尔圆弧逼近器web模拟的屏幕截图：

（在该屏幕截图中，角度滑块以弧度表示。3/4圆弧的一半是整圆的3/8，或2π的3/8。2π*3/8约为2.36，这就是我选择的弧角。）

CareToarcAnimation应用程序定义了一个

CareToarcView

类，该类是

UIView

的子类

大部分有趣的工作都是在

CaretToArcView

类中完成的

它有一个静态变量

layerClass

，返回

CAShapeLayer.self

。这将导致视图的背景层设置为CAShapeLayer

class override var layerClass: AnyClass {
        return CAShapeLayer.self
    }

CaretToArcView.swift文件定义枚举视图状态：

enum ViewState: Int {
    case none
    case caret
    case arc
}

自定义视图类具有类型为

viewState

的var

viewState

。其初始值为

。无

，表示视图中未安装任何路径

如果将状态设置为

.caret

或

.arc

，它将检查当前图层路径是否为零。如果是，它将在没有动画的情况下将适当的路径安装到层中

如果上一个路径是另一个路径类型，它将使用新形状构建一个路径，并使用上一个路径的

fromState

和新路径的

toState

创建一个

cabasicaniation

。动画的持续时间是使用实例变量

animationDuration

设置的。动画使用“缓入”和“缓出”计时，尽管很容易更改

该类还具有公共函数

rotate（doRotate:Bool）

。如果用

doRotate==false

调用它，它将从视图的层中删除所有动画。如果使用

doRotate==true

调用它，它会向层中添加一个无限重复的旋转动画，使用线性计时将其旋转360°

应用程序的视图控制器驱动

CaretToArcView

中的设置，并且它具有阻止自定义视图同时调用两个动画的逻辑（如果这样做，会发生奇怪的事情。不要这样做。）

应用程序的屏幕如下图所示

视图控制器在切换动画期间禁用按钮和开关，并在旋转开关打开且形状旋转时禁用“切换”按钮