在 UIView.animate 期间对形状图层类型自定义 UIView 进行动画处理？

Question

想象一个又高又瘦的视图，我们会说它看起来像一个梯子。

高100。我们将其动画化为屏幕的全高。所以，在伪代码中..

func expandLadder() {
view.layoutIfNeeded()
UIView.animate(withDuration: 4 ...
  ladderTopToTopOfScreenConstraint = 0
  ladderBottomToBottomOfScreenConstraint = 0
  view.layoutIfNeeded()
}

没问题。

不过。我们在 layoutSubviews 中绘制阶梯。（我们的梯子就是一条粗黑线。）

@IBDesignable class LadderView: UIView {
override func layoutSubviews() {
  super.layoutSubviews()
  setup()
}

func setup() {
  heightNow = frame size height
  print("I've recalculated the height!")
  shapeLayer ...
  topPoint = (0, 0)
  bottomPoint = (0, heightNow)
  p.addLines(between: [topPoint, bottomPoint])
  shapeLayer!.path = p
  shapeLayer add a CABasicAnimation or whatever
  layer.addSublayer(shapeLayer!)
}

没问题。

所以我们只是制作了一条线 p 来填充视图的高度 "heightNow"。

问题当然是，当你这样做时......

func expandLadder() {
view.layoutIfNeeded()
UIView.animate(withDuration: 4 ...
  ladderToTopOfScreenConstraint = 0
  ladderBottomOfScreenConstraint = 0
  view.layoutIfNeeded()
}

...当您这样做时，LayoutSubviews（或 setBounds、draw#rect 或您能想到的任何其他内容）仅调用 "before and after" UIView.animate 动画.真的很痛苦。

在示例中，"actual" 阶梯，即 shapeLayer，将跳转到下一个值，在您为视图 L.I.E. 的大小设置动画之前："I've recalculated the height!" 仅在之前和之后调用一次UIView.animate 动画。假设你不裁剪子视图，你会在长度为 L 的每个动画之前看到 "wrong, upcoming" 大小。）

有什么解决办法？

顺便说一句，您当然可以使用 draw#rect 和动画来完成此操作，即使用 CADisplayLink（如 Josh 所述）。所以没关系。仅使用 layer/path 绘制形状非常容易：我的问题是在示例中如何在 setup() 运行的约束的 UIView 动画的每个步骤中制作代码有问题的观点。

Answer 1

layoutIfNeeded() 只会在需要时调用 layoutSubviews()。我在你的代码中没有看到调用 setNeedsLayout()。没有约束的时候就是这么干的！如果你有约束，你应该调用 setNeedsUpdateConstraints() 并在你的 animationBlock layoutIfNeeded.

view.setNeedsUpdateConstraints()
UIView.animate(...) {
    ...
    view.layoutIfNeeded()
}

Answer 2

您描述的行为与 iOS 动画的工作方式有关。特别是当您在 UIAnimation 块中设置视图的框架时（这就是 layoutIfNeeded 所做的——它会根据自动布局规则强制同步重新计算框架）视图的框架立即更改为新值，即动画结束时的表观值（在 layoutIfNeeded 后添加打印语句，您可以看到这是真的）。顺便说一下，在调用 layoutIfNeeded 之前更改约束不会执行任何操作，因此您甚至不需要将约束更改放入动画块中。

但是在动画期间，系统显示表示层而不是支持层，并且它在动画持续时间内将表示层的帧值从初始值插入到最终值。这使得视图看起来像是在移动，即使检查该值将显示视图已经占据了它的最终位置。

因此，如果您想要动画运行时屏幕图层的实际坐标，则必须使用 view.layer.presentationLayer 来获取它们。参见：https://developer.apple.com/reference/quartzcore/calayer/1410744-presentationlayer

这并不能完全解决您的问题，因为我假设您要做的是随着时间的推移生成更多层。如果您不能使用简单的插值，那么您最好在开始时生成所有层，然后使用关键帧动画在动画进行时以特定间隔打开它们。您可以将层位置基于 view.layer.presentationLayer.bounds（您的子层位于其超层坐标中，因此不要使用框架）。在不知道您要完成什么的情况下很难提供准确的解决方案。

另一种可能的解决方案是将 drawRect 与 CADisplayLink 一起使用，它可以让您随心所欲地重绘每一帧，因此它更适合于无法轻易在帧与帧之间插值的事物（即游戏或您的情况 adding/removing 和动画几何作为时间的函数）。

编辑：这是一个 Playground 示例，展示了如何与视图平行地设置图层动画。

    //: Playground - noun: a place where people can play

    import UIKit
    import PlaygroundSupport

    class V: UIViewController {
        var a = UIView()
        var b = CAShapeLayer()
        var constraints: [NSLayoutConstraint] = []
        override func viewDidLoad() {
            view.addSubview(a)
            a.translatesAutoresizingMaskIntoConstraints = false
            constraints = [
                a.topAnchor.constraint(equalTo: view.topAnchor, constant: 100),
                a.leadingAnchor.constraint(equalTo: view.leadingAnchor, constant: 100),
                a.widthAnchor.constraint(equalToConstant: 200),
                a.heightAnchor.constraint(equalToConstant: 200)

            ]
            constraints.forEach {[=10=].isActive = true}
            a.backgroundColor = .blue
        }

        override func viewDidAppear(_ animated: Bool) {
            b.path = UIBezierPath(ovalIn: a.bounds).cgPath
            b.fillColor = UIColor.red.cgColor
            a.layer.addSublayer(b)
            constraints[3].constant = 400
            constraints[2].constant = 400
            let oldBounds = a.bounds
            UIView.animate(withDuration: 3, delay: 0, options: .curveLinear, animations: {
                self.view.layoutIfNeeded()
            }, completion: nil)
            let scale = a.bounds.size.width / oldBounds.size.width
            let animation = CABasicAnimation(keyPath: "transform.scale")
            animation.fromValue = 1
            animation.toValue = scale
            animation.duration = 3
            b.add(animation, forKey: "scale")
            b.transform = CATransform3DMakeScale(scale, scale, 1)

        }
    }

    let v = V()
    PlaygroundPage.current.liveView = v

在 UIView.animate 期间对形状图层类型自定义 UIView 进行动画处理？

Animating shape layer type custom UIViews, during a UIView.animate?

xcode

animation

core-animation

swift