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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 204,732评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 87,496评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 151,264评论 0 338
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,807评论 1 277
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,806评论 5 368
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,675评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,029评论 3 399
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,683评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 41,704评论 1 299
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,666评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,773评论 1 332
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,413评论 4 321
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,016评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,978评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,204评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,083评论 2 350
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,503评论 2 343