带有 timeRange 的 CAAnimation - iOS

Question

我需要一个CALayer 与一些CAAnimation 一起在指定时间出现在屏幕上（例如fadeIn）。我希望它在屏幕上停留几秒钟，然后以 fadeOut 动画消失。

示例：如果我有一个 timeRange 为： CMTimeRangeMake(start: 3 , end : 5) 我在 3 秒开始时需要一个 CAAnimation，在 5 秒结束时需要一个。CALayer 只能在 timeRange 的持续时间内出现。

我找到了一种解决方法来显示 CALayer 以便它出现在指定的时间，但是我不知道如何让它保持给定的持续时间。

        // Call this method in   viewDidLoad for quick demo

      func layerAnimation(){

    let box =             CALayer()
    box.frame =           CGRect(x:100, y: 100, width: 100, height: 100)
    box.backgroundColor = UIColor.orange.cgColor
     self.view.layer.addSublayer(box)

    // Animation

    CATransaction.begin()

    let hide = CABasicAnimation(keyPath: "opacity")
    hide.duration =  3                               // The Start time for the box to appear in seconds
    hide.fromValue = 0
    hide.toValue =   0
    hide.isRemovedOnCompletion = false
    hide.fillMode = kCAFillModeBoth

     CATransaction.setCompletionBlock({() -> Void in

        let fadeInFadeOut = CABasicAnimation(keyPath: "opacity")
        fadeInFadeOut.duration =  0
        fadeInFadeOut.fromValue = 0
        fadeInFadeOut.toValue =   1
        fadeInFadeOut.isRemovedOnCompletion = false
        fadeInFadeOut.fillMode = kCAFillModeBoth
        fadeInFadeOut.autoreverses = true


        box.add(fadeInFadeOut, forKey: "fadeInFadeOut")
    })
    box.add(hide, forKey: "hide")
    CATransaction.commit()

}

我终于希望能够为视频添加标题以制作像 this one 这样的歌词视频。

Answer 1

如果我理解你是正确的，你希望动画延迟 3 秒，淡入，然后在完全不透明显示 2 秒后淡出。如果它应该立即消失，只需删除完成块内的开始时间设置。试试这个。我正在使用 beginTime 属性，并且我删除了 isRemovedOnCompletion，因为您通常应该尽量避免使用它，因为您不想污染presentationLayer。我将实际动画持续时间更改为 0.5 秒。这是完全淡出我们需要多长时间。如果你想把它改成更长的，你可以。

// Call this method in   viewDidAppear <-//Please for quick demo
func layerAnimation(){

        let box =             CALayer()
        box.frame =           CGRect(x:100, y: 100, width: 100, height: 100)
        box.backgroundColor = UIColor.orange.cgColor
        self.view.layer.addSublayer(box)

        // Animation

        CATransaction.begin()

        let fadeIn = CABasicAnimation(keyPath: "opacity")
        fadeIn.duration =  0.5
        fadeIn.beginTime = CACurrentMediaTime() + 3.0 // The Start time for the box to appear in seconds
        fadeIn.fromValue = 0
        fadeIn.toValue =   1
        //makes the animation start from the from value when there is a delay
        fadeIn.fillMode = kCAFillModeBackwards

        CATransaction.setCompletionBlock({() -> Void in
            let fadeOut = CABasicAnimation(keyPath: "opacity")
            fadeOut.duration =  0.5
            fadeOut.beginTime = CACurrentMediaTime() + 2.0 // The Start time for the box to appear in seconds
            fadeOut.fromValue = 1
            fadeOut.toValue =   0
            //makes the animation start from the from value when there is a delay
            fadeOut.fillMode = kCAFillModeBackwards
            box.add(fadeOut, forKey: "hide")

            //update the model so that it is really hidden. best not to use isRemovedOnCompletion
            box.opacity = 0
        })
        box.add(fadeIn, forKey: "show")
        CATransaction.commit()

    }