在Swift动画中实现淡入淡出效果

Question

我有一个带有动画的UIImageView，并在UIView中应用fadeIn效果，但当触摸到正在动画的UIImageView时，需要应用fadeOut。

这是我用来实现淡入效果的代码。

UIView.animateWithDuration(0.5, delay: delay, 
    options: UIViewAnimationOptions.CurveEaseOut, animations: {
        uiImageView.alpha = 1.0
        }

- PlugInBoy

---

你的问题是在淡入动画期间触发时，无法使图像视图淡出吗？ - Ben Kane

Answer 1

根据我的研究，以下是我会做的事情：（假设你正在使用Storyboard）

1. 进入你的UIImageView，在属性下检查“启用用户交互”复选框。

2. 将一个TapGestureRecognizer拖到图像视图上方。

3. 在Tap Gesture上控制点击并拖动以在ViewControler.swift上进行操作。

4. 在内部添加以下代码：

UIView.animate(withDuration: 0.5, delay: 0.5, options: .curveEaseOut, animations: {
    self.uiImageView.alpha = 0.0
}, completion: nil) 

接下来你就完成了！

- AntiStrike12

---

我需要在延迟中设置什么值？ - PlugInBoy

@PlugInBoy，我编辑了我的答案中的代码块。那应该可以正常工作了。 - AntiStrike12

Answer 2

Swift 4。为UIView对象添加淡入和淡出功能

extension UIView {

    func fadeIn(_ duration: TimeInterval = 0.5, delay: TimeInterval = 0.0, completion: @escaping ((Bool) -> Void) = {(finished: Bool) -> Void in}) {
        UIView.animate(withDuration: duration, delay: delay, options: UIViewAnimationOptions.curveEaseIn, animations: {
            self.alpha = 1.0
    }, completion: completion)  }

    func fadeOut(_ duration: TimeInterval = 0.5, delay: TimeInterval = 1.0, completion: @escaping (Bool) -> Void = {(finished: Bool) -> Void in}) {
        UIView.animate(withDuration: duration, delay: delay, options: UIViewAnimationOptions.curveEaseIn, animations: {
            self.alpha = 0.3
    }, completion: completion)
   }
}

例子

label.fadeIn()

label.fadeOut()

imageView.fadeOut(completion: {
    (finished: Bool) -> Void in
    imageView.removeFromSuperview()
})

label.fadeIn(completion: {
    (finished: Bool) -> Void in
    label.text = "Changed!"
})

- August Lin

---

感谢分享。UIViewAnimationOptions现在是UIView.Animation Options。 - Ben

Answer 3

iOS 10 开始，苹果推出了全新的 iOS Animations SDK，这个新版本更加强大，特别是在时间函数和交互方面。

使用这种方法淡出代码将会：

UIViewPropertyAnimator(duration: 0.5, curve: .easeOut, animations: {
    self.uiImageView.alpha = 0.0
}).startAnimation()

要了解有关属性动画的更多细节，请查看iOS 10 Animations demo。

- Olga Konoreva

Answer 4

Swift 5

这对我很有帮助。我想要对一个标签进行连续的淡入淡出动画。我将标签放在“cardHeaderView”中。

原始答案: Original Answer

@IBOutlet weak var cardHeaderView: UIView!

将此代码放在 "viewDidAppear" 中。 我使用了0秒的延迟，以便动画会立即开始。翻译后的结果：

将此代码放在"viewDidAppear"中。我选择了0秒的延迟，这样动画就可以立即开始。

fadeViewInThenOut(view: cardHeaderView, delay: 0)

Here is the function.

func fadeViewInThenOut(view : UIView, delay: TimeInterval) {

    let animationDuration = 1.5

    UIView.animate(withDuration: animationDuration, delay: delay, options: [UIView.AnimationOptions.autoreverse, UIView.AnimationOptions.repeat], animations: {
        view.alpha = 0
    }, completion: nil)

}

- Bill

Answer 5

这是我为2秒淡入、2秒暂停、2秒淡出并重复的解决方案。

func startAnimation() {
     UIView.animateKeyframes(withDuration: 6.0,
                                    delay: 0,
                                    options: [.repeat, .autoreverse, .calculationModeLinear]) {
        UIView.addKeyframe(withRelativeStartTime: 0.0, relativeDuration: 0.165) { [weak self] in
            self?.view1.alpha = 0.0
        }
        UIView.addKeyframe(withRelativeStartTime: 0.165, relativeDuration: 0.165) { [weak self] in
            self?.view2.alpha = 1.0
        }
        UIView.addKeyframe(withRelativeStartTime: 0.66, relativeDuration: 0.165) { [weak self] in
            self?.view2.alpha = 0.0
        }
        UIView.addKeyframe(withRelativeStartTime: 0.825, relativeDuration: 0.165) { [weak self] in
            self?.view1.alpha = 1.0
        }
    }
}

- some dude