在UIView.animate期间动画形状图层类型自定义UIViews?

设想一个高瘦的视图L(例如,它看起来像一个梯子)。

假设它是100高,我们将它设置为屏幕的整个高度。 所以,在伪代码中..

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

没问题。 现在说我们在布局中绘制阶梯

@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!)
}

没问题。

所以我们只是制作一个填充视图高度“heightNow”的线p。

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

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

...当你这样做的时候, LayoutSubviews (或者setBounds,或者绘制LayoutSubviews ,或者其他任何你能想到的)只被称为UIView.animate动画之前和之后。 这是一个真正的痛苦。

(在这个例子中,“实际”阶梯shapeLayer将跳转到下一个值,然后再创建视图L的大小,例如,“我重新计算了高度!”仅在调用之前调用过一次并且在UIView.animate动画之后,假设你不剪裁子视图,你会在L的长度的每个动画之前看到“错误的,即将到来的”尺寸)

什么是解决方案?


顺便说一句,(可以这么说),你可以使用draw#rect和动画自己做到这一点,即用CADisplayLink(如Josh提到的)。 这很好。 当然,使用图层/路径绘制图形等是非常容易的:我的问题在于如何在约束的UIView动画的每个步骤中运行代码(即上面setup()中的代码)有问题的观点?


你描述的行为与iOS动画的工作方式有关。 特别是当您在UIAnimation块中设置视图的框架时(这是layoutIfNeeded的作用 - 它会根据自动布局规则强制帧的同步重新计算)视图的框架会立即更改为新值,这是视图动画结束 (在layoutIfNeeded之后添加一个打印语句,你可以看到这是真的)。 偶尔改变约束在layoutIfNeeded被调用之前不会执行任何操作,因此您甚至不需要将约束更改放入动画块中。

但是在动画过程中,系统会显示表示层而不是背景层,并在动画持续时间内将表示层的帧值从初始值插值到最终值。 这使得它看起来像视图正在移动,即使检查该值会揭示视图已经占据了最终位置。

因此,如果您想要在动画播放过程中显示屏幕图层的实际坐标,则必须使用view.layer.presentationLayer来获取它们。 请参阅:https://developer.apple.com/reference/quartzcore/calayer/1410744-presentationlayer

这并不能完全解决你的问题,因为我认为你所要做的是随着时间的推移产生更多的图层。 如果你不能用简单的插值,那么你可能会更好地在开始时产生所有图层,然后使用关键帧动画在动画进行时以特定间隔打开它们。 您可以将您的图层位置基于view.layer.presentationLayer.bounds(您的子图层位于其超级图层坐标中,因此不要使用图框)。 不知道你想要完成什么,很难提供确切的解决方案。

另一种可能的解决方案是使用drawRect和CADisplayLink,它可以让你根据需要重新绘制每一帧,所以它更适合于不能逐帧插入的东西(例如游戏或者在你的情况下添加/移除和将几何动画设置为时间功能)。

编辑:这里是一个示例游乐场,展示了如何与视图并行动画图层。

    //: 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 {$0.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

layoutIfNeeded()仅在需要时调用layoutSubviews() 。 我在你的代码中看不到调用setNeedsLayout() 。 没有限制时就是这样做的! 如果你有约束,你应该调用setNeedsUpdateConstraints()并在你的animationBlock layoutIfNeeded

view.setNeedsUpdateConstraints()
UIView.animate(...) {
    ...
    view.layoutIfNeeded()
}
链接地址: http://www.djcxy.com/p/39149.html

上一篇: Animating shape layer type custom UIViews, during a UIView.animate?

下一篇: How does Docker run a Linux kernel under macOS host?