一、实战需求

需要实现通过按钮控制视图显示与隐藏，并且要有延迟效果，SwiftUI该如何实现？

Jietu20200602-145543@2x.jpg

Jietu20200602-145602.gif

二、本文价值与收获

看完本文后，您将能够作出下面的界面

三、基础知识

1、animation(_:) 修饰器给视图赋予动画效果

给视图增加动画效果

func animation(_ animation: Animation?) -> some View

参数：

• animation
  view里面应用的动画类型

返回值：
封装该视图并将动画应用于该视图中

特性：
建议最好在叶子视图使用animation而不是容器视图上使用此修饰符。因为，动画适用于此视图中的所有子视图，在容器视图上调用animation（_ :)可能会导致无限范围。

2、Animation 动画类型

Animation用于管理动画的类型

@frozen public struct Animation : Equatable

• spring(response:dampingFraction:blendDuration:)
  类似弹簧的效果

动画曲线

3、delay()延时修饰器

通过delay我们可以控制视图动画的启动时间，不通的delay可以组合出复杂的动画效果。

4、transition(_:)

设置视图从一个状态到另外一个状态的效果

Image(“driving”)
    .transition(AnyTransition.slide)
    .animation(.default)

重要的是要注意，带有过渡和动画的视图仍然无效。您必须将具有过渡效果的视图添加到屏幕上（并可以选择将其从屏幕上删除）才能看到效果。

if change {
    Image(“driving”)
        .transition(AnyTransition.slide)
        .animation(.default)
 }

四、解决方案与代码

（一）要实现动态进出效果，我们需要完成下面几个步骤：

• 1、触发动画的开关
  我们可以通过定义bool变量来实现动画触发工作

@State var show: Bool = false