ios - CABasicAnimation 持续时间和保持图层位置

Question

我正在尝试为 UIButton 制作非常基本的动画。目标是将图层旋转 180 度。这是我从 beginTrackingWithTouch 调用的动画代码:

private func rotateButton() {
    let rotationAnimation = CABasicAnimation(keyPath: "transform.rotation.z")
    rotationAnimation.timingFunction = CAMediaTimingFunction(name: "easeIn")
    rotationAnimation.toValue = M_PI
    rotationAnimation.duration = CollapseButton.kCollapseButtonAnimationDuration
    rotationAnimation.repeatCount = 1
    rotationAnimation.cumulative = true
    layer.addAnimation(rotationAnimation, forKey: "rotationAnimation")
}

现在我想在点击此按钮时添加折叠 View 动画。在我的 VC 中:

__weak __typeof(self) weakSelf = self;
[UIView animateWithDuration:CollapseButton.kCollapseButtonAnimationDuration animations:^{

    CGRect currentFrame = weakSelf.frame;
    currentFrame.size.height = 20;
    weakSelf.frame = currentFrame;

}];

我有两个问题:

1. 按钮完成其动画后，它会重置图层位置。因此，如果箭头显示在顶部，它会动画显示为向下并最终重置为顶部。如何保持图层方向？

2. 如您所见，动画持续时间和计时函数是相同的。由于我无法理解 UIView 的动画速度要慢得多。有任何想法吗？

Answer 1

核心动画很奇怪。动画会创建一个“表示层”，它会生成您正在动画化的变化的外观，但实际上不会更改相关属性。

为了让您的动画在对象结束状态时结束，您应该设置一个 fromValue(在开始设置)和一个 toValue，然后在提交动画后将属性设置为其结束值:

private func rotateButton() {
    let rotationAnimation = CABasicAnimation(keyPath: "transform.rotation.z")
    rotationAnimation.timingFunction = CAMediaTimingFunction(name: "easeIn")
    rotationAnimation.fromValue = 0.0 //<<--- NEW CODE
    rotationAnimation.toValue = M_PI
    rotationAnimation.duration = CollapseButton.kCollapseButtonAnimationDuration
    rotationAnimation.repeatCount = 1
    rotationAnimation.cumulative = true
    layer.addAnimation(rotationAnimation, forKey: "rotationAnimation")
    layer.transform = CATransformMakeRotation(M_PI) //<<--- NEW CODE
}

您还可以将动画的 removeWhenFinished 属性设置为 true，但这会带来其他问题。

顺便说一句，您不应该尝试操纵具有非恒等式变换的 View 的框架。相反，在 View 的变换上设置比例。

我不确定为什么这 2 个动画会花费不同的时间。我确实注意到您将 CAAnimation 的计时函数设置为 easeIn，但将 UIView 的计时函数保留为默认值(缓入、缓出。)这将创建看起来不像相同的。您可能还应该将 View 动画设置为使用 easeIn 计时。 (为此，您需要使用更长的形式 animateWithDuration:delay:options:animations:completion:)