是否可以在两个视图背景图像之间淡入淡出?

时间:2022-03-10 20:33:01

I would like to know if it's possible for some button to cause a fade from one background image to another? The following code I have results in an abrupt change from the current image, background-image-1, to the new image, background-image-2.

我想知道一些按钮是否可能导致从一个背景图像淡入另一个背景图像?我的以下代码导致从当前图像background-image-1到新图像background-image-2的突然变化。

func buttonPressed() {
    if let image = UIImage(named: "background-image-2") {
        UIView.animateWithDuration(2, delay: 0, options: .CurveEaseInOut, animations: {_ in
            self.view.backgroundColor = UIColor(patternImage: image)
        }, completion: nil)
}

Thanks

EDIT

Though the accepted answer does work, I was finding slight glitches when toggling quickly between images. A similar method using UIView.animateWithDuration solves this:

虽然接受的答案确实有效,但在图像之间快速切换时,我发现了轻微的故障。使用UIView.animateWithDuration的类似方法解决了这个问题:

func buttonPressed() {
    let oldImageView = UIImageView(image: UIImage(named: "background-image-1"))
    oldImageView.frame = view.frame
    let newImageView = UIImageView(image: UIImage(named:"background-image-2"))
    newImageView.frame = view.frame
    newImageView.alpha = 0
    view.insertSubview(newImageView, aboveSubview: backgroundImageView)
    view.insertSubview(oldImageView, aboveSubview: newImageView)
    UIView.animateWithDuration(1.0, delay: 0.0, options: .CurveEaseInOut, animations: {
        oldImageView.alpha = 0
        newImageView.alpha = 1
        }, completion: { completed in
            self.backgroundImageView.image = newImage
            newImageView.removeFromSuperview()
            oldImageView.removeFromSuperview()
    })
}

2 个解决方案

#1


7  

Say imageView is the UIImageView you are using for your animation. image1 is your original image. image2 is the new image. Try this:

假设imageView是您用于动画的UIImageView。 image1是您的原始图像。 image2是新图像。尝试这个:

let crossFade: CABasicAnimation = CABasicAnimation(keyPath: "contents")
crossFade.duration = 1
crossFade.fromValue = image1.CGImage
crossFade.toValue = image2.CGImage
self.imageView.image = image2
self.imageView.layer.addAnimation(crossFade, forKey: "animateContents")

Hope this helps.

希望这可以帮助。

#2


0  

The background color is supposed to be an animatable property, but a pattern color must not work.

背景颜色应该是可动画的属性,但图案颜色不能起作用。

Do you actually want a pattern color, or are you using that in order to insert an image as the background of the view without using the repeating pattern?

你真的想要一种图案颜色,或者你是否使用它来插入图像作为视图的背景而不使用重复图案?

#1


7  

Say imageView is the UIImageView you are using for your animation. image1 is your original image. image2 is the new image. Try this:

假设imageView是您用于动画的UIImageView。 image1是您的原始图像。 image2是新图像。尝试这个:

let crossFade: CABasicAnimation = CABasicAnimation(keyPath: "contents")
crossFade.duration = 1
crossFade.fromValue = image1.CGImage
crossFade.toValue = image2.CGImage
self.imageView.image = image2
self.imageView.layer.addAnimation(crossFade, forKey: "animateContents")

Hope this helps.

希望这可以帮助。

#2


0  

The background color is supposed to be an animatable property, but a pattern color must not work.

背景颜色应该是可动画的属性,但图案颜色不能起作用。

Do you actually want a pattern color, or are you using that in order to insert an image as the background of the view without using the repeating pattern?

你真的想要一种图案颜色,或者你是否使用它来插入图像作为视图的背景而不使用重复图案?