CATransaction：视图在完成时闪烁

Question

我正在写一个有点复杂的动画，分两步：

1. 将不需要可见的UIViews 的不透明度更改为0，并将UIImageView（具有alpha = 1）移动到另一个CGPoint（位置）。
2. 将另一个UIView的不透明度改为1，将上一步的UIImageView的不透明度改为0，然后在这一步的动画完成后，将UIImageView从superview中移除。

我是这样做的：

第一步是在没有明确的 CATransaction 的情况下完成的。这两个动画只是将beginTime 设置为CACurrentMediaTime()。我在layer.addAnimation(...) 通话后立即对视图应用更改。 这里一切正常。

在第二步实现中，我在开始时调用CATransaction.begin()。 在begin/commit 内部调用CATransaction 我创建并添加2 个CABasicAnimations 到2 个不同的层：一个用于将不透明度从0 更改为1（用于UIView），一个用于将不透明度从1 更改为0（用于UIImageView)。两个动画都将beginTime 设置为CACurrentMediaTime() + durationOfThePreviousStep。

在CATransaction.begin() 之后我调用CATransaction.setCompletionBlock({...})，在这个完成块中我对这两个视图应用更改：设置它们的新alpha 并从superview 中删除UIImageView。

问题是，在整个动画结束时，将 alpha 动画设置为 1 的 UIView 闪烁，这意味着它的 alpha 设置回 0（尽管我在完成块中将其 alpha 设置为 1）和在此之后，完成块执行并且它的 alpha 再次上升到 1。

好吧，问题是，如何摆脱这种闪烁？也许这个动画可以做得更好？

附：我没有使用UIView 动画，因为我对这些动画的自定义计时函数感兴趣。

编辑 1： 这是代码。我已经删除了UIImageView alpha 动画，因为它并不是真正需要的。

var totalDuration: CFTimeInterval = 0.0

// Alpha animations.
let alphaAnimation = CABasicAnimation()
alphaAnimation.keyPath = "opacity"
alphaAnimation.fromValue = 1
alphaAnimation.toValue = 0
alphaAnimation.beginTime = CACurrentMediaTime()
alphaAnimation.duration = 0.15

let alphaAnimationName = "viewsFadeOut"
view1.layer.addAnimation(alphaAnimation, forKey: alphaAnimationName)
view1.alpha = 0

view2.layer.addAnimation(alphaAnimation, forKey: alphaAnimationName)
view2.alpha = 0

view3.layer.addAnimation(alphaAnimation, forKey: alphaAnimationName)
view3.alpha = 0

view4.layer.addAnimation(alphaAnimation, forKey: alphaAnimationName)
view4.alpha = 0

// Image View moving animation.
// Add to total duration.
let rect = /* getting rect */
let newImagePosition = view.convertPoint(CGPoint(x: CGRectGetMidX(rect), y: CGRectGetMidY(rect)), fromView: timeView)

let imageAnimation = CABasicAnimation()
imageAnimation.keyPath = "position"
imageAnimation.fromValue = NSValue(CGPoint: imageView!.layer.position)
imageAnimation.toValue = NSValue(CGPoint: newImagePosition)
imageAnimation.timingFunction = CAMediaTimingFunction(name: kCAMediaTimingFunctionDefault)
imageAnimation.beginTime = CACurrentMediaTime()
imageAnimation.duration = 0.3

imageView!.layer.addAnimation(imageAnimation, forKey: "moveImage")
imageView!.center = newImagePosition

totalDuration += imageAnimation.duration

// Time View alpha.
CATransaction.begin()
CATransaction.setCompletionBlock {
    self.timeView.alpha = 1
    self.imageView!.removeFromSuperview()
    self.imageView = nil
}

let beginTime = CACurrentMediaTime() + totalDuration
let duration = 0.3

alphaAnimation.fromValue = 0
alphaAnimation.toValue = 1
alphaAnimation.beginTime = beginTime
alphaAnimation.duration = duration
timeView.layer.addAnimation(alphaAnimation, forKey: "timeViewFadeIn")

/* imageView alpha animation is not necessary, so I removed it */

CATransaction.commit()

编辑 2：导致问题的一段代码：

CATransaction.begin()
CATransaction.setCompletionBlock {
    self.timeView.alpha = 1
}

let duration = 0.3

let alphaAnimation = CABasicAnimation()
alphaAnimation.keyPath = "opacity"
alphaAnimation.fromValue = 0.0
alphaAnimation.toValue = 1.0
alphaAnimation.duration = duration
timeView.layer.addAnimation(alphaAnimation, forKey: "timeViewFadeIn")

CATransaction.commit()

也许问题是因为timeView 有一个UITextField 和一个UIScrollView 有4 个子视图。我尝试将timeView 替换为timeView (UIImageView) 的快照，但这没有帮助。

编辑 3： 新代码。使用此代码，timeView 始终具有 alpha = 1，并且它还会从 0 变为 1。

CATransaction.begin()
CATransaction.setCompletionBlock {
    self.imageView!.removeFromSuperview()
    self.imageView = nil
}

let alphaAnimation = CABasicAnimation()
alphaAnimation.keyPath = "opacity"
alphaAnimation.fromValue = 0.0
alphaAnimation.toValue = 1.0
alphaAnimation.duration = 0.3
alphaAnimation.beginTime = beginTime

timeView.layer.addAnimation(alphaAnimation, forKey: "timeViewFadeIn")
timeView.alpha = 1.0
CATransaction.commit()

Answer 1

只看你的代码，我会预计它会闪烁。为什么？因为您已将timeView 层的不透明度从 0 设置为 1，但您还没有将其 设置 为 1（完成处理程序除外，这将在稍后发生）。因此，我们将表示层从 0 设置为 1，然后动画结束，显示真实层的不透明度一直为 0。

所以，在动画开始之前将timeView 的图层不透明度设置为 1。此外，由于您使用的是延迟的beginTime，因此您需要将动画的fillMode 设置为"backwards"。

通过将您的测试代码修改为独立的并看起来像这样，我能够获得良好的结果；有延迟，视图淡入，最后没有闪烁：

    CATransaction.begin()
    let beginTime = CACurrentMediaTime() + 1.0 // arbitrary, just testing
    let alphaAnimation = CABasicAnimation()
    alphaAnimation.keyPath = "opacity"
    alphaAnimation.fromValue = 0.0
    alphaAnimation.toValue = 1.0
    alphaAnimation.duration = 1.0 // arbitrary, just testing
    alphaAnimation.fillMode = "backwards"
    alphaAnimation.beginTime = beginTime
    timeView.layer.addAnimation(alphaAnimation, forKey: "timeViewFadeIn")
    timeView.layer.opacity = 1.0
    CATransaction.commit()

我觉得你的代码还有一些其他的地方很奇怪。以这种方式使用事务完成块有些风险；我不明白你为什么不给你的动画一个委托。此外，您正在多次重复使用alphaAnimation；我不能推荐那个。如果我是你，我会为每个动画创建一个新的 CABasicAnimation。