小贝子编程

UIView 隐藏/显示与动画



我的简单目标是淡化隐藏和显示函数的动画。

Button.hidden = YES;

足够简单。但是，是否有可能让它淡出而不是消失？这样看起来很不专业。

在iOS 4及更高版本中，有一种方法可以使用UIView转换方法来实现这一点，而无需导入QuartzCore。你可以说：

目标C

[UIView transitionWithView:button
                  duration:0.4
                   options:UIViewAnimationOptionTransitionCrossDissolve
                animations:^{
                     button.hidden = YES;
                }
                completion:NULL];

迅速

UIView.transition(with: button, duration: 0.4, 
                  options: .transitionCrossDissolve, 
                  animations: {
                 self.button.isHidden = false
              })

以前的解决方案

Michail的解决方案会奏效，但这实际上并不是最好的方法。

Alpha 淡入淡出的问题在于，有时不同的重叠视图层在淡出时看起来很奇怪。还有其他一些使用核心动画的替代方法。首先，在您的应用程序中包含 QuartzCore 框架，并将#import <QuartzCore/QuartzCore.h>添加到您的标头中。现在，您可以执行以下操作之一：

  1. 设置button.layer.shouldRasterize = YES;，然后使用米哈伊尔在他的答案中提供的 alpha 动画代码。这将防止图层奇怪地混合，但会略微降低性能，并且如果按钮未在像素边界上完全对齐，则会使按钮看起来模糊。

或者：

  1. 请改用以下代码对淡入淡出进行动画处理：

    CATransition *animation = [CATransition animation];animation.type = kCATransitionFade;动画持续时间 = 0.4;[按钮.图层添加动画：动画键：无];

    按钮隐藏 = 是;

这种方法的好处是，即使按钮的任何属性不可动画化(例如按钮的文本或图像(，您也可以交叉淡入淡出按钮的任何属性，只需设置过渡，然后立即设置属性。

UIView 动画属性为：

- frame
- bounds
- center
- transform
- alpha
- backgroundColor
- contentStretch

描述于： 动画

isHidden不是其中之一，所以在我看来，最好的方法是：

斯威夫特 4：

func setView(view: UIView, hidden: Bool) {
    UIView.transition(with: view, duration: 0.5, options: .transitionCrossDissolve, animations: {
        view.isHidden = hidden
    })
}

目标C：

- (void)setView:(UIView*)view hidden:(BOOL)hidden {
    [UIView transitionWithView:view duration:0.5 options:UIViewAnimationOptionTransitionCrossDissolve animations:^(void){
        [view setHidden:hidden];
    } completion:nil];
}

淡出：

目标-C 

[UIView animateWithDuration:0.3 animations:^{
    button.alpha = 0;
} completion: ^(BOOL finished) {//creates a variable (BOOL) called "finished" that is set to *YES* when animation IS completed.
    button.hidden = finished;//if animation is finished ("finished" == *YES*), then hidden = "finished" ... (aka hidden = *YES*)
}];

斯威夫特 2

UIView.animateWithDuration(0.3, animations: {
    button.alpha = 0
}) { (finished) in
    button.hidden = finished
}

斯威夫特 3， 4， 5

UIView.animate(withDuration: 0.3, animations: {
    button.alpha = 0
}) { (finished) in
    button.isHidden = finished
}

要淡入：

目标-C

button.alpha = 0;
button.hidden = NO;
[UIView animateWithDuration:0.3 animations:^{
    button.alpha = 1;
}];

斯威夫特 2

button.alpha = 0
button.hidden = false
UIView.animateWithDuration(0.3) {
    button.alpha = 1
}

斯威夫特 3， 4， 5

button.alpha = 0
button.isHidden = false
UIView.animate(withDuration: 0.3) {
    button.alpha = 1
}

使用此解决方案可实现平滑的淡入和淡入效果

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

用法就像 

uielement.fadeIn()
uielement.fadeOut()

谢谢

我使用这个小的 Swift 3 扩展： 

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 = 0.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)
  }
}

Swift 3 

func appearView() {
     self.myView.alpha = 0
     self.myView.isHidden = false
     UIView.animate(withDuration: 0.9, animations: {
         self.myView.alpha = 1
     }, completion: {
         finished in
         self.myView.isHidden = false
     })
}

swift 4.2

带扩展名 ：

extension UIView {
func hideWithAnimation(hidden: Bool) {
        UIView.transition(with: self, duration: 0.5, options: .transitionCrossDissolve, animations: {
            self.isHidden = hidden
        })
    }
}

简单方法：

func setView(view: UIView, hidden: Bool) {
    UIView.transition(with: view, duration: 0.5, options: .transitionCrossDissolve, animations: {
        view.isHidden = hidden
    })
}

@Umair Afzal 的代码经过一些更改后在 swift 5 中工作正常 

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

供使用 

yourView.fadeOut()
yourView.fadeIn()

我为此目的为UIView创建了类别，并实现了一个特殊的小概念：visibility 。我的解决方案的主要区别在于您可以调用[view setVisible:NO animated:YES]，然后立即同步检查[view visible]并获得正确的结果。这非常简单，但非常有用。

此外，允许避免使用"负布尔逻辑"(有关更多信息，请参阅代码完成，第 269 页，使用正布尔变量名称(。

迅速

UIView+Visibility.swift 

import UIKit

private let UIViewVisibilityShowAnimationKey = "UIViewVisibilityShowAnimationKey"
private let UIViewVisibilityHideAnimationKey = "UIViewVisibilityHideAnimationKey"

private class UIViewAnimationDelegate: NSObject {
    weak var view: UIView?
    dynamic override func animationDidStop(animation: CAAnimation, finished: Bool) {
        guard let view = self.view where finished else {
            return
        }
        view.hidden = !view.visible
        view.removeVisibilityAnimations()
    }
}

extension UIView {
    private func removeVisibilityAnimations() {
        self.layer.removeAnimationForKey(UIViewVisibilityShowAnimationKey)
        self.layer.removeAnimationForKey(UIViewVisibilityHideAnimationKey)
    }
    var visible: Bool {
        get {
            return !self.hidden && self.layer.animationForKey(UIViewVisibilityHideAnimationKey) == nil
        }
        set {
            let visible = newValue
            guard self.visible != visible else {
                return
            }
            let animated = UIView.areAnimationsEnabled()
            self.removeVisibilityAnimations()
            guard animated else {
                self.hidden = !visible
                return
            }
            self.hidden = false
            let delegate = UIViewAnimationDelegate()
            delegate.view = self
            let animation = CABasicAnimation(keyPath: "opacity")
            animation.fromValue = visible ? 0.0 : 1.0
            animation.toValue = visible ? 1.0 : 0.0
            animation.fillMode = kCAFillModeForwards
            animation.removedOnCompletion = false
            animation.delegate = delegate
            self.layer.addAnimation(animation, forKey: visible ? UIViewVisibilityShowAnimationKey : UIViewVisibilityHideAnimationKey)
        }
    }
    func setVisible(visible: Bool, animated: Bool) {
        let wereAnimationsEnabled = UIView.areAnimationsEnabled()
        if wereAnimationsEnabled != animated {
            UIView.setAnimationsEnabled(animated)
            defer { UIView.setAnimationsEnabled(!animated) }
        }
        self.visible = visible
    }
}

目标-C

UIView+Visibility.h 

#import <UIKit/UIKit.h>
@interface UIView (Visibility)
- (BOOL)visible;
- (void)setVisible:(BOOL)visible;
- (void)setVisible:(BOOL)visible animated:(BOOL)animated;
@end

UIView+Visibility.m 

#import "UIView+Visibility.h"
NSString *const UIViewVisibilityAnimationKeyShow = @"UIViewVisibilityAnimationKeyShow";
NSString *const UIViewVisibilityAnimationKeyHide = @"UIViewVisibilityAnimationKeyHide";
@implementation UIView (Visibility)
- (BOOL)visible
{
    if (self.hidden || [self.layer animationForKey:UIViewVisibilityAnimationKeyHide]) {
        return NO;
    }
    return YES;
}
- (void)setVisible:(BOOL)visible
{
    [self setVisible:visible animated:NO];
}
- (void)setVisible:(BOOL)visible animated:(BOOL)animated
{
    if (self.visible == visible) {
        return;
    }
    [self.layer removeAnimationForKey:UIViewVisibilityAnimationKeyShow];
    [self.layer removeAnimationForKey:UIViewVisibilityAnimationKeyHide];
    if (!animated) {
        self.alpha = 1.f;
        self.hidden = !visible;
        return;
    }
    self.hidden = NO;
    CGFloat fromAlpha = visible ? 0.f : 1.f;
    CGFloat toAlpha = visible ? 1.f : 0.f;
    NSString *animationKey = visible ? UIViewVisibilityAnimationKeyShow : UIViewVisibilityAnimationKeyHide;
    CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"opacity"];
    animation.duration = 0.25;
    animation.fromValue = @(fromAlpha);
    animation.toValue = @(toAlpha);
    animation.delegate = self;
    animation.removedOnCompletion = NO;
    animation.fillMode = kCAFillModeForwards;
    [self.layer addAnimation:animation forKey:animationKey];
}
#pragma mark - CAAnimationDelegate
- (void)animationDidStop:(CAAnimation *)animation finished:(BOOL)finished
{
    if ([[self.layer animationForKey:UIViewVisibilityAnimationKeyHide] isEqual:animation]) {
        self.hidden = YES;
    }
}
@end

Swift 5.0，泛型：

func hideViewWithAnimation<T: UIView>(shouldHidden: Bool, objView: T) {
    if shouldHidden == true {
        UIView.animate(withDuration: 0.3, animations: {
            objView.alpha = 0
        }) { (finished) in
            objView.isHidden = shouldHidden
        }
    } else {
        objView.alpha = 0
        objView.isHidden = shouldHidden
        UIView.animate(withDuration: 0.3) {
            objView.alpha = 1
        }
    }
}

用：

hideViewWithAnimation(shouldHidden: shouldHidden, objView: itemCountLabelBGView)
hideViewWithAnimation(shouldHidden: shouldHidden, objView: itemCountLabel)
hideViewWithAnimation(shouldHidden: shouldHidden, objView: itemCountButton)

这里itemCountLabelBGView是一个UIView，itemCountLabel是一个UILabel，itemCountButton是一个UIButton，所以它适用于父类为UIView的每个视图对象。

Swift 4 

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

要使用它，只需调用以下函数，例如：

yourView.fadeOut() // this will hide your view with animation
yourView.fadeIn() /// this will show your view with animation

isHidden 是一个即时值，您无法影响其上的动画，而不是这个您可以使用 Alpha 隐藏您的视图 

UIView.transition(with: view, duration: 0.5, options: .transitionCrossDissolve, animations: {
        view.alpha = 0
    })

并用于显示： 

UIView.transition(with: view, duration: 0.5, options: .transitionCrossDissolve, animations: {
      view.alpha = 1
})

func flipViews(fromView: UIView, toView: UIView) {
    toView.frame.origin.y = 0
    self.view.isUserInteractionEnabled = false
    UIView.transition(from: fromView, to: toView, duration: 0.5, options: .transitionFlipFromLeft, completion: { finished in            
        fromView.frame.origin.y = -900
        self.view.isUserInteractionEnabled = true
    })

}

你可以试试这个。 

 func showView(objView:UIView){
    objView.alpha = 0.0
    UIView.animate(withDuration: 0.5, animations: {
        objView.alpha = 0.0
    }, completion: { (completeFadein: Bool) -> Void in
        objView.alpha = 1.0
        let transition = CATransition()
        transition.duration = 0.5
        transition.timingFunction = CAMediaTimingFunction(name: kCAMediaTimingFunctionEaseInEaseOut)
        transition.type = kCATransitionFade
        objView.layer.add(transition, forKey: nil)
    })
}
func HideView(objView:UIView){
    UIView.animate(withDuration: 0.5, animations: {
        objView.alpha = 1.0
    }, completion: { (completeFadein: Bool) -> Void in
        objView.alpha = 0.0
        let transition = CATransition()
        transition.duration = 0.5
        transition.timingFunction = CAMediaTimingFunction(name: kCAMediaTimingFunctionEaseInEaseOut)
        transition.type = kCATransitionFade
        objView.layer.add(transition, forKey: nil)
    })
}

并传递您的视图名称 

        showView(objView: self.viewSaveCard)
        HideView(objView: self.viewSaveCard)

如果您的视图默认设置为隐藏，或者您更改了我认为在许多情况下应该更改的隐藏状态，那么此页面中的任何方法都不会同时为您提供淡入/淡出动画，它只会对其中一个状态进行动画处理，原因是您在调用 UIView.animate 之前将隐藏状态设置为 false方法会导致突然可见，如果您只对 alpha 进行动画处理，那么对象空间仍然存在但不可见，这将导致一些 UI 问题。

因此，最好的方法是首先检查视图是否隐藏，然后将 alpha 设置为 0.0，就像这样，当您将隐藏状态设置为 false 时，您不会看到突然的可见性。

func hideViewWithFade(_ view: UIView) {
    if view.isHidden {
        view.alpha = 0.0
    }
    view.isHidden = false
    UIView.animate(withDuration: 0.3, delay: 0.0, options: .transitionCrossDissolve, animations: {
        view.alpha = view.alpha == 1.0 ? 0.0 : 1.0
    }, completion: { _ in
        view.isHidden = !Bool(truncating: view.alpha as NSNumber)
    })
}

UIView.transition(with：(功能很好，很整洁。

许多人已经发布了它，但没有人注意到只有当您运行它时才会出现故障。

您可以将隐藏属性完美地转换为 true，而当您尝试将其转换为 false 时，视图将突然消失，没有任何动画。

这是因为此 api 仅在视图中工作，这意味着当您将视图转换为显示时，实际上它本身会立即显示，只是其内容逐渐动画化。

当您尝试隐藏此视图时，它本身会立即隐藏，从而使动画的内容毫无意义。

若要解决此问题，隐藏视图

时，过渡目标应该是其父视图，而不是要隐藏的视图。

func transitionView(_ view: UIView?, show: Bool, completion: BoolFunc? = nil) {
    guard let view = view, view.isHidden == show, let parent = view.superview else { return }
    let target: UIView = show ? view : parent
    UIView.transition(with: target, duration: 0.4, options: [.transitionCrossDissolve], animations: {
        view.isHidden = !show
    }, completion: completion)
}

UIView.transition(with: title3Label, duration: 0.4,
                          options: .transitionCrossDissolve,
                          animations: {
                            self.title3Label.isHidden = !self.title3Label.isHidden
                      })

在视图上应用过渡时会有一些延迟，从而产生隐藏和显示效果

您可以使用Animatics库非常轻松地做到这一点：

//To hide button:
AlphaAnimator(0) ~> button
//to show button
AlphaAnimator(1) ~> button

我的 Swift 3 解决方案。因此，我创建了函数，该函数以正确的顺序隐藏/取消隐藏视图(隐藏时 - 将 alpha 设置为 0，然后将 isHidden 设置为 true;取消隐藏 - 首先显示视图，然后将其 alpha 设置为 1(：

func hide(_ hide: Bool) {
    let animations = hide ? { self.alpha = 0 } :
                            { self.isHidden = false }
    let completion: (Bool) -> Void = hide ? { _ in self.isHidden = true } :
                                            { _ in UIView.animate(withDuration: duration, animations: { self.alpha = 1 }) }
    UIView.animate(withDuration: duration, animations: animations, completion: completion)
}
Swift 4 Transition(英语：

Swift 4 Transition

( 
    UIView.transition(with: view, duration: 3, options: .transitionCurlDown,
                      animations: {
                        // Animations
                        view.isHidden = hidden
    },
                      completion: { finished in
                        // Compeleted
    })

如果您将该方法用于较旧的 swift 版本，则会收到一个错误： 

Cannot convert value of type '(_) -> ()' to expected argument type '(() -> Void)?'

有用的参考。

此代码给出了一个动画，例如将视图控制器推入 UI导航控制器...

CATransition *animation = [CATransition animation];
 animation.type = kCATransitionPush;
 animation.subtype = kCATransitionFromRight;
 animation.duration = 0.3;
 [_viewAccountName.layer addAnimation:animation forKey:nil];
 _viewAccountName.hidden = true;

用于流行动画...

 CATransition *animation = [CATransition animation];
 animation.type = kCATransitionPush;
 animation.subtype = kCATransitionFromLeft;
 animation.duration = 0.3;
 [_viewAccountName.layer addAnimation:animation forKey:nil];
 _viewAccountName.hidden = false;

尝试了一些退出的答案，有些只适用于一种情况，有些需要添加两个函数。

选项 1

与view.isHidden无关.

extension UIView {
    func animate(fadeIn: Bool, withDuration: TimeInterval = 1.0) {
        UIView.animate(withDuration: withDuration, delay: 0.0, options: .curveEaseInOut, animations: {
            self.alpha = fadeIn ? 1.0 : 0.0
        })
    }
}

然后通过isFadeIn(true或false(

view.animate(fadeIn: isFadeIn)

选项 2

不要传递任何参数。它根据isUserInteractionEnabled淡入或淡出。这也非常适合来回动画的情况。

func animateFadeInOut(withDuration: TimeInterval = 1.0) {
    self.isUserInteractionEnabled = !self.isUserInteractionEnabled
    UIView.animate(withDuration: withDuration, delay: 0.0, options: .curveEaseInOut, animations: {
        self.alpha = self.isUserInteractionEnabled ? 1.0 : 0.0
    })
}

然后你打电话

yourView.animateFadeInOut()

为什么self.isUserInteractionEnabled？

试图用self.isHidden替换self.isUserInteractionEnabled， 一点运气都没有。

就是这样。花我一些时间，希望它对某人有所帮助。

相关内容

  • 没有找到相关文章

最新更新


热门标签：

javascript python java c# php android html jquery c++ css ios sql mysql arrays asp.net json python-3.x ruby-on-rails .net sql-server django objective-c excel regex ruby linux ajax iphone xml vba spring asp.net-mvc database wordpress string postgresql wpf windows xcode bash git oracle list vb.net multithreading eclipse algorithm macos powershell visual-studio image forms numpy scala function api selenium