【SwiftUI基础篇】23 Animation动画详解：隐式动画、显式动画、过渡效果

swiftUI提供了强大的内置动画效果，我们要理解使用动画前首先需要知道在什么时候及什么地方可以应用的有什么样的动画效果。

在使用动画效果前我们需要先知道什么是动画：动画是一个平滑过渡的写照，有一段时间内的用户界面（UI）发生改变时的过渡效果。例如@State的值发生了更改或者更多数据流的更改导致的UI发生了变化。如果没有使用动画我们将看到一个瞬间僵硬的效果。
使用动画可以提升视觉效果，让用户的视觉体验更好，使我们开发的APP更有活性，适当使用动画使人更愉悦，让用户更有粘性。

在SwiftUI中使用动画的必要条件：

1、动画只适用于视图(VIEW)。

2、视图已由容器呈现在了屏幕上。

3、视图发生了变化(View的出现与消失)

4、视图通过ViewModifiers参数修改而发生的变人(颜色、大小、位置、3D、旋转、透明度)

5、形状视图的创建与改变。

我们满足了上面的条件可以使用下面的方式使用动画：

一、.animation(Animation) 隐式动画modifier

隐式动画也称为自动动画，直接用动画修改器标记一个视图，当视图发生了改变应用的动画效果。本质上只是声明或者标记一个视图，这个所有的修改总是以动画方式变化，隐式动画将自动会为视图发生改变时应用动画效果。隐匿动画一般适用于单个视图的动画效果。

通过参数我们可以定义动画视觉效果、持续时间等，可以通过在任何View上调用.animation来完成此操作。

1、一个简单的动画视图：

@State var animationed = true
var body: some View{
Text("Neter8.com")
    .foregroundColor(animationed ? .red : .blue) //蓝红切换
    .font(animationed ? .largeTitle : .headline)//大小切换
    .opacity(animationed ? 1 : 0.5)//透明度切换
    .rotationEffect(Angle.degrees(animationed ? 360 : 0))//旋转360度
    .animation(Animation.easeInOut)//淡入淡出的动画效果
    .onTapGesture {
        animationed.toggle()//点击后切换值
    }
}

 隐藏动画通常情况下只用于子视图的单个动画情况，因为.animation不同用padding可以让子视图都可以遗传父视图的值，.animation只能用于单个视图的修改。

2、系统内置的几种动画曲线

动画曲线其实就是选择系统提供的几种动画可选动画类型，动画曲线控制着播放时的速率，内置了以下几种：

a. default 动画效果默认值

b. easeIn: 缓入效果，其速率类似于火箭发射，缓慢加速然后以固定速度进入轨道。

c. easeInOut:  缓入缓出效果，整个动画过程是开始缓慢的改变不透明度、旋转等、然后加速然后快完成后减速（过程类似于飞机的起降）

d. easeOut: 缓出，其速率类似在高速上行车时减速刹车的过程。

e. linear: 线形效果，整个过程中，速率是恒定的，整个动画是从一个不透明到另一个效果(一次旋转到另一次旋转)发生时，线性恒定速率。

f. spring() :阻尼效果,视觉上像是弹簧一样。

g.interactiveSpring() 方便使用响应值较低的spring()动画，用于驱动交互式动画。

h.interactiveSpring(响应时度, 阻尼度, 过程用时)方便使用响应值较低的spring()动画，用于驱动交互式动画。

i.interpolatingSpring(弹簧的硬度, 阻尼度)用一个阻尼弹簧模型在[0,1]范围内产生值，然后使用插值在[from, to]范围内的动画属性。通过添加每个动画的效果来保持重叠动画的速度。

j.timingCurve() 时间曲线,把动画分为4段，通过4个时间参数设置每个时间段里播放的速度取值

注意：没有学习时总以为这是内置的动画效果，其实我们的眼睛骗了我们，这些参数是为了控制动画展示时播放进程的控制。

注意2：隐式动画因为更靠近子视图，具有更高的优先权，当使用下面的显式动画覆盖时，隐式动画总是会执行。

二、withAnimation(Animation) {} 显式动画

我们在显式动画{}里调用将要产生变化的一些逻辑代码，如Bool.toggle对VuewModifiers或者Shapes的一些更改中。通过withAnimation调用函数、方法、属性等发生的所有视图改变将应用动画效果。显式动画由于是修改参数导致的视图变化，所以可以适用于多个视图产生变化产生的动画效果。

 

 

 注意：上面说到过，隐式动画具有更高的优先权，所以显式动画不要去覆盖隐式动画。

三、.transition 过渡效果

transition(过渡)指定2个视图在切换时产生的效果将转换与视图关联（视频片段间的切换转场效果）所以通常情况下过渡仅在显式动画withAnimation的时候发生,并不适用于隐式动画.animation,因为隐式动画只在单个视图中应用，并没有切换视图。过度效果主要用途就是配合动画给予视图进入与离开时附加的动作，根据AnyTransition参数我们可以得到如scale缩放、opacity 不/透明、slide 滑动。

与.animation不同的是：.transition可被子视图所继承，所以在使用ForEach，Group时可以批量应用过渡效果。transition只是要说使用哪个视图的转场效果，所以要想效果出现依然要配置动画一起使用。要不然你将看不到任何效果。

如果你使用了转场效果又配合了其它的动画情况下，可能是看不到过渡效果的，因为他会被其它动画给覆盖掉。

ZStack{
    if animationed{
        Text("Neter8.com").transition(.slide)//滑动进入或者退出
    }else{
        Text("网络人").transition(.identity)//无效果的
    }
}
.onTapGesture {
    withAnimation(.easeOut){
        animationed.toggle()//配合动画才能看到过渡效果
    }
}

理解过度可以把它当着视频剪辑时2个片段的转场效果，当然是在动画播放时才能看到，所以必须要配置上面2个动画使用，它有下面的类型属性：

1、identity  一个过渡，将未经修改的输入视图返回为输出视图(清除掉过渡效果)。

2、opacity 插入时从不透明过渡到不透明，移除时从不透明过渡到透明(这是默认选项)。

3、scale 缩放效果

4、slide 通过从前缘移入而插入并通过向后缘移出而移除的过渡。

除了类型属性，还提供类型方法以自定义更多更强大的过渡效果：

1、asymmetric(insertion: AnyTransition, removal: AnyTransition) 提供一个复合过渡，该过渡使用不同的过渡进行插入和移除。

2、modifier(active: E, identity: E) 返回在活动修饰符和身份修饰符之间定义的过渡（用于创建自定义的过渡效果）。

3、move(edge: Edge) 返回一个过渡，该过渡将视图移向视图的指定边缘。

4、offset(CGSize) 偏移，可以让视图在屏幕起飞

5、offset(x: CGFloat, y: CGFloat) 坐标偏移

6、scale(scale: CGFloat, anchor: UnitPoint)  按自定义缩放

四、动画的好朋友.onAppear

.onAppear修饰后的视图出现在屏幕时执行闭包里的内容。常常会配合动画达到更好的显示效果。

ZStack{
    if true{
        Text("网络人")
            .onAppear{
                print("《网络人》出现了~")
            }
    }else{
        Text("55mx.com")
            .onAppear{
                print("《55mx.com》出现了~")
            }
    }
}

除非注明，网络人的文章均为原创，转载请以链接形式标明本文地址：https://www.55mx.com/post/138