SwiftUI(四) 基础动画

效果图：

QQ20190706-103954.gif

如何创建显式动画:
如果将动画修改器附加到视图，最终会得到隐式动画 - 即使您只是递增整数或切换布尔值，更改视图中其他位置的某些状态也可能会使用动画。
另一种方法是使用显式动画，在这种情况下，您不会将修改器附加到相关视图，而是要求SwiftUI为您要进行的精确更改设置动画。为此，请在对withAnimation（）的调用中包装更改。

例如，这使用显式动画使每次点击时按钮逐渐消失：

import SwiftUI

struct ContentView : View {
    
     /// 背景颜色
    @State private var bgColor = Color.gray

    /// 半径弧度
    @State private var cr :CGFloat = 122
    
    var body: some View {
        Button(action: {            
             /// 按钮事件
             withAnimation() {
                self.bgColor = self.bgColor == Color.gray ? Color.blue : Color.gray
                self.cr = self.cr == 12 ? 100 : 12
            }
        }) {
            /// 按钮文字标题内容
            Text("Animation dis33")
            /// 前景颜色
            .foregroundColor(.white)
            /// 大小
            .frame(width: 200, height: 200, alignment: .center)
            ///背景颜色
            .background(bgColor)
            ///字体类型
            .font(.title)
            ///半径弧度
            .cornerRadius(cr)
            ///动画
            .animation(.basic(duration: 2, curve: .easeInOut))
        }
    }
}

#if DEBUG
struct ContentView_Previews : PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}
#endif

withAnimation（）接受一个指定所需动画类型的参数，因此您可以创建一个三秒钟的基本动画，如下所示：

 withAnimation(.basic(duration: 3, curve: .easeInOut)) {
                self.bgColor = self.bgColor == Color.gray ? Color.blue : Color.gray
                self.cr = self.cr == 12 ? 100 : 12
            }

显式动画通常很有用，因为它们会使每个受影响的视图都出现动画，而不仅仅是那些附加了隐式动画的动画。例如，如果视图A必须为视图B腾出空间作为动画的一部分，但只有视图B附加了动画，那么除非使用显式动画，否则视图A将跳转到其新位置而不进行动画处理。

=======================================================
hackingwithswift网站上的说明如下：（https://www.hackingwithswift.com/quick-start/swiftui/working-with-state）

@State 的简介：
All apps change state. For example, the user might have tapped a button to reveal more information, they might have entered some text into a text box, or chosen a date from a date picker – all things that involve the app moving from one state to another.
The problem with state is that it’s messy: when it changes we need to spot that change and update our layouts to match. That might sounds simple at first, but as our state grows and grows it becomes increasingly hard – it’s easy to forget to update one thing, or to get the update order wrong so that the user interface state doesn’t match what was expected.
SwiftUI solves this problem by removing state from our control. When we add properties to our views they are effectively inert – they have values, sure, but changing them doesn’t do anything. But if we added the special @State attribute before them, SwiftUI will automatically watch for changes and update any parts of our views that use that state.
When it comes to referring to some state – for example, telling a state property to change when a toggle switch changes – we can’t refer to the property directly. This is because Swift would think we’re referring to the value right now rather than saying “please watch this thing.” Fortunately, SwiftUI’s solution is to place a dollar sign before the property name, which lets us refer to the data itself rather than its current value. I know this is a little confusing at first, but it becomes second nature after an hour or two.
Remember, SwiftUI is declarative, which means we tell it all layouts for all possible states up front, and let it figure out how to move between them when properties change. We call this binding – asking SwiftUI to synchronize changes between a UI control and an underlying property.
Working with state will cause you a few headaches at first if you’re used to a more imperative style of programming, but trust me – once you’re through that it’s clear sailing.

译文如下：

所有应用都会改变状态例如，用户可能已经点击了一个按钮来显示更多信息，他们可能已经在文本框中输入了一些文本，或者从日期选择器中选择了一个日期 - 所有涉及应用程序从一个状态移动到另一个状态的事情。
状态问题是它很混乱：当它发生变化时，我们需要发现变化并更新我们的布局以匹配。这听起来可能听起来很简单，但随着我们的状态的增长和增长，它变得越来越难 - 很容易忘记更新一件事，或者让更新顺序错误，以致用户界面状态与预期的不匹配。
SwiftUI通过从控件中删除状态来解决此问题。当我们向视图添加属性时，它们实际上是惰性的 - 它们具有值，当然，但更改它们不会做任何事情。但是如果我们在它们之前添加了特殊的@State属性，SwiftUI将自动监视更改并更新使用该状态的视图的任何部分。
当涉及某个状态时 - 例如，当切换开关改变时告诉状态属性改变 - 我们不能直接引用该属性。这是因为Swift认为我们现在指的是价值，而不是说“请注意这件事。”幸运的是，SwiftUI的解决方案是在属性名称前放置一个美元符号，这样我们就可以参考数据本身而不是它的当前价值。我知道这开始有点令人困惑，但它在一两个小时后变成了第二天性。
请记住，SwiftUI是声明性的，这意味着我们预先告诉它所有可能状态的所有布局，并让它弄清楚当属性发生变化时如何在它们之间移动。我们称之为绑定 - 要求SwiftUI同步UI控件和底层属性之间的更改。
如果你已经习惯了一种更为迫切的编程方式，那么与州合作会让你头疼一些，但请相信我 - 一旦你完成了它，那就明确了。

参考链接：
https://www.hackingwithswift.com/quick-start/swiftui/how-to-create-an-explicit-animation
https://www.youtube.com/watch?v=IlYal6MKwMg
https://www.hackingwithswift.com/quick-start/swiftui/working-with-state