【发布时间】：2012-02-25 07:34:23
【问题描述】：
我的简单目标是淡化动画隐藏和显示功能。
Button.hidden = YES;
足够简单。但是，是否有可能让它消失而不仅仅是消失？这样看起来很不专业。
【问题讨论】：
标签： ios objective-c uiviewanimation
【发布时间】：2012-02-25 07:34:23
【问题描述】：
在 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: {
button.hidden = false
})
以前的解决方案
Michail 的解决方案可行，但它实际上并不是最好的方法。
Alpha 淡入淡出的问题在于，有时不同的重叠视图层在淡出时看起来很奇怪。还有其他一些使用核心动画的替代方案。首先在您的应用程序中包含 QuartzCore 框架并将#import <QuartzCore/QuartzCore.h> 添加到您的标题中。现在您可以执行以下操作之一：
1) 设置 button.layer.shouldRasterize = YES; 然后使用 Michail 在他的回答中提供的 alpha 动画代码。这将防止图层奇怪地混合，但会带来轻微的性能损失，并且如果按钮未在像素边界上完全对齐，可能会使按钮看起来模糊。
或者：
2) 改用以下代码为渐变设置动画：
CATransition *animation = [CATransition animation];
animation.type = kCATransitionFade;
animation.duration = 0.4;
[button.layer addAnimation:animation forKey:nil];
button.hidden = YES;
这种方法的好处是您可以交叉淡化按钮的任何属性，即使它们不是可动画的（例如按钮的文本或图像），只需设置过渡，然后立即设置属性。
【讨论】：
-
@robmathers ，我只是测试你的代码，上面的两个代码只在 button.hidden = NO 时工作，用于淡入的情况； button.hidden = YES时没有淡出动画效果；
-
似乎在 iOS 12.0 中被破坏了
-
您应该使用您正在制作动画的对象的超级视图作为
transitionWithView参数，以确保成功淡入和淡出。
UIView 动画属性有：
- frame
- bounds
- center
- transform
- alpha
- backgroundColor
- contentStretch
描述于： Animations
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];
}
【讨论】：
-
其实这是最简单最好的答案
-
虽然动画正确，但我尝试显示的 UISearchBar 出现在错误的位置，直到动画完成然后立即跳转到正确的位置。任何想法？我正在使用带有界面生成器和约束的情节提要。
-
这段代码不起作用……它直接改变状态而不动画
-
@evya 仅在 hidden = NO 时适用于淡入，不适用于淡出， hidden = YES
-
太棒了。 10 倍很多
淡出：
Objective-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
}
淡入：
Objective-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
}
【讨论】：
-
将淡入/淡出与隐藏状态结合使用解决了我的问题
-
出于某种原因，动画到 hidden=YES 对我来说效果很好，但是动画到 hidden=NO 什么也没做，所以动画 alpha 和设置 hidden 属性的组合很有帮助。
-
我只是写了一个demo，但是只有hidden = NO，淡入作品，奇怪
我使用这个小小的 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)
}
}
【讨论】：
-
这个确实有效。其他解决方案似乎都没有真正使它淡入/淡出。而且扩展非常好。做得好。 :)
使用此解决方案获得平滑的淡出和淡入效果
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()
谢谢
【讨论】：
-
fadeOut仅在我删除设置self.isHidden的行时才适用于 iOS 13。
斯威夫特 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()
【讨论】：
-
在淡出时提供一些硬效果，添加了一些更好的解决方案here
为此，我为UIView 创建了类别，并实现了一个特殊的稍微不同的概念：visibility。我的解决方案的主要区别在于您可以调用[view setVisible:NO animated:YES]，然后立即同步检查[view visible] 并获得正确的结果。这非常简单，但非常有用。
此外，允许避免使用“负布尔逻辑”（有关详细信息，请参阅Code Complete, page 269, Use positive boolean variable names）。
斯威夫特
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
【讨论】：
-
@valentin shergin Swift 版本来了？
-
当然！我已经添加了 Swift 版本。
-
延迟块在离开 if 范围之前执行。我相信这不是你期望它的行为方式
斯威夫特 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
【讨论】：
-
您刚刚复制了@MarkMckelvie 的答案
-
有区别，他没有隐藏视图。我还需要隐藏视图。这样做并分享它。
-
为什么不直接评论另一个答案，而不是复制它并假装成你自己的？
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 的每个视图对象。
【讨论】：
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)
【讨论】：
如果您的视图默认设置为隐藏，或者您更改了我认为在许多情况下应该的隐藏状态，那么此页面中的任何方法都不会为您提供 FadeIn/FadeOut 动画，它只会为其中一个设置动画这些状态，原因是您在调用 UIView.animate 方法之前将 Hidden 状态设置为 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)
}
【讨论】：
您可以使用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)
}
【讨论】：
-
当
hide为假时，为什么completion块中还有另一个动画？
Swift 4 过渡
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)?'
有用的reference。
【讨论】：
-
这是否适用于自动布局？类似的代码没有动画。
isHidden值会立即呈现（即立即隐藏/显示视图）。
这段代码给出了一个类似于将 viewController 推入的动画 导航控制器...
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， 一点运气都没有。
就是这样。花了我一些时间，希望它对某人有所帮助。
【讨论】：
UIView.transition(with: title3Label, duration: 0.4,
options: .transitionCrossDissolve,
animations: {
self.title3Label.isHidden = !self.title3Label.isHidden
})
在 View 上应用过渡效果有一些延迟会产生隐藏和显示效果
【讨论】：
-
请不要只发布代码作为答案，还要解释您的代码的作用以及它如何解决问题的问题。带有解释的答案通常更有帮助，质量更高，更有可能吸引投票。