web-dev-qa-db-ja.com

swiftでラベルをフェードインまたはフェードアウトさせる方法

ラベルをviewDidLoad()でフェードインさせ、タイマーが3になった後、フェードアウトさせようとしています。 fadein関数またはfadeout関数についてはよく知りません。

これを行うにはどうすればよいですか？

iosswiftfadeinfadeoutfading
12
Ty Victorson

ビューはロードされていますが、viewDidLoadが呼び出されたときにユーザーに表示されない場合があります。これは、目撃したときにアニメーションが既に始まっているように見える場合があることを意味します。この問題を克服するには、代わりにviewDidAppearでアニメーションを開始する必要があります。

fadeIn関数とfadeOut関数については、存在しません。自分で書く必要があります。ありがたいことに、これを行うのは非常に簡単です。以下のようなもので十分かもしれません。

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

    let animationDuration = 0.25

    // Fade in the view
    UIView.animateWithDuration(animationDuration, animations: { () -> Void in
        view.alpha = 1
        }) { (Bool) -> Void in

            // After the animation completes, fade out the view after a delay

            UIView.animateWithDuration(animationDuration, delay: delay, options: .CurveEaseInOut, animations: { () -> Void in
                view.alpha = 0
                },
                completion: nil)
    }
}
9
Andy

私の提案は、Swift拡張機能を活用して、コードをもう少しモジュール化して使いやすくすることです。たとえば、複数のラベルをフェードイン/アウトしたり、1つのラベルをフェードイン/アウトしたりする場合複数のビューでは、animateWithDurationメソッドをすべての場所に渡す必要があるため、面倒になる可能性があります。UIView.Swift（UIView拡張機能）というファイルを作成するのがよりわかりやすい方法です。このファイルに次のコードを追加します。

import Foundation

extension UIView {


func fadeIn(duration: NSTimeInterval = 1.0, delay: NSTimeInterval = 0.0, completion: ((Bool) -> Void) = {(finished: Bool) -> Void in}) {
    UIView.animateWithDuration(duration, delay: delay, options: UIViewAnimationOptions.CurveEaseIn, animations: {
        self.alpha = 1.0
        }, completion: completion)  }

func fadeOut(duration: NSTimeInterval = 1.0, delay: NSTimeInterval = 3.0, completion: (Bool) -> Void = {(finished: Bool) -> Void in}) {
    UIView.animateWithDuration(duration, delay: delay, options: UIViewAnimationOptions.CurveEaseIn, animations: {
        self.alpha = 0.0
        }, completion: completion)
}

}

UIViewの任意の子（UILabel、UIImageなど）にfadeIn/fadeout機能を追加できるようになりました。 viewDidLoad（）関数の内部に、以下を追加できます。

self.statusLabel.alpha = 0
self.statusLabel.text = "Sample Text Here"
self.myLabel.fadeIn(completion: {
        (finished: Bool) -> Void in
        self.myLabel.fadeOut()
        })

これで、このサンプルコードを画像ビュー、ラベル、テキストビュー、スクロールビュー、またはUIViewの任意の子に使用できます。これがお役に立てば幸いです。

22
Troy Nunnally

Swift 3-拡張子を使用して回答を更新しました

extension UIView {
    func fadeIn(duration: TimeInterval = 1.0, 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 = 1.0, delay: TimeInterval = 3.0, completion: @escaping (Bool) -> Void = {(finished: Bool) -> Void in}) {
        UIView.animate(withDuration: duration, delay: delay, options: UIViewAnimationOptions.curveEaseIn, animations: {
            self.alpha = 0.0
        }, completion: completion)
    }
}

用途：

self.statusLabel.alpha = 0
self.statusLabel.text = "Sample Text Here"
self.myLabel.fadeIn(completion: {
        (finished: Bool) -> Void in
        self.myLabel.fadeOut()
        })
10
Ed.

更新Swift 3.1-@Andyコード

func fadeViewInThenOut(view : UIView, delay: TimeInterval) {
        let animationDuration = 0.25

        // Fade in the view
        UIView.animate(withDuration: animationDuration, animations: { () -> Void in
            view.alpha = 1
        }) { (Bool) -> Void in

            // After the animation completes, fade out the view after a delay

            UIView.animate(withDuration: animationDuration, delay: delay, options: [.curveEaseOut], animations: { () -> Void in
                view.alpha = 0
            }, completion: nil)
        }
    }
4
Tuan Huynh

Swift 4.2

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

    func fadeOut(duration: TimeInterval = 1.0, delay: TimeInterval = 3.0, completion: @escaping (Bool) -> Void = {(finished: Bool) -> Void in}) {
        UIView.animate(withDuration: duration, delay: delay, options: .curveEaseIn, animations: {
            self.alpha = 0.0
        }, completion: completion)
    }
}
1
Ahmed Safadi

Swift 5

これは私にはうまくいきました。 「cardHeaderView」内にラベルを配置しました。

@IBOutlet weak var cardHeaderView: UIView!

これを「viewDidAppear」内に配置します。遅延をゼロにして、アニメーションがすぐに始まるようにしました。

fadeViewInThenOut(view: cardHeaderView, delay: 0)

これが関数です。

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)

}
1
Bill