专栏首页韦弦的偶尔分享SwiftUI:视图的显示和隐藏动画

SwiftUI:视图的显示和隐藏动画

SwiftUI最强大的功能之一是能够自定义视图的显示和隐藏方式。以前,您已经了解了如何使用常规if条件有条件地包含视图,这意味着当条件更改时,我们可以从视图层次结构中插入或移除视图。

转换控制插入和删除的方式,我们可以使用内置转换,以不同的方式组合它们,甚至创建完全自定义的转换。

为了演示这一点,这里有一个带有按钮和矩形的VStack

struct ContentView: View {
    var body: some View {
        VStack {
            Button("Tap Me") {
                // do nothing
            }

            Rectangle()
                .fill(Color.red)
                .frame(width: 200, height: 200)
        }
    }
}

我们可以让矩形只有满足一定的条件时才能出现。首先,我们添加一些可以操作的状态:

@State private var isShowingRed = false

接下来,我们使用该状态作为显示矩形的条件:

if isShowingRed {
    Rectangle()
        .fill(Color.red)
        .frame(width: 200, height: 200)
}

最后,我们可以在按钮的点击事件中将isShowingRed在“true”和“false”之间切换:

self.isShowingRed.toggle()

如果你运行程序,你会看到按下按钮显示或者隐藏红色方块。没有动画;它只是突然出现和消失。

通过使用withAnimation()包装状态更改,我们可以获得SwiftUI的默认视图转换,如下所示:

withAnimation {
    self.isShowingRed.toggle()
}

有了这个小小的改变,应用程序现在淡入淡出红色矩形,同时向上移动按钮以腾出空间。看起来不错,但是我们可以使用transition()修饰符做得更好。

例如,我们可以通过向矩形添加transition()修饰符使其上下缩放,如图所示:

Rectangle()
    .fill(Color.red)
    .frame(width: 200, height: 200)
    .transition(.scale)

现在点击按钮看起来好多了:当按钮腾出空间时,矩形会放大,当再次点击时,矩形会缩小。(PS: 直接在Canvas运行效果可能有差别,所以还是在模拟器或者真机运行查看实际效果吧)

如果你想尝试的话,你可以尝试一些其他的转换。一个有用的方法是不对称,它允许我们在显示视图时使用一个转换,在视图消失时使用另一个转换。若要尝试,请将矩形的现有过渡替换为:

.transition(.asymmetric(insertion: .scale, removal: .opacity))

译自Showing and hiding views with transitions

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • SwiftUI:创建显式动画

    您已经了解了SwiftUI如何通过将animation()修饰符附加到视图来创建隐式动画,以及它如何通过将animation()修饰符添加到绑定来创建动画,但是...

    韦弦zhy
  • 为什么SwiftUI的视图使用结构体?

    如果您曾经为UIKit或AppKit(Apple的iOS和macOS原始用户界面框架)编程,您会知道它们使用类而非结构体来构造视图。SwiftUI并非如此:我们...

    韦弦zhy
  • Hacking with iOS: SwiftUI Edition 里程碑(一)之 What you learned?

    你现在已经完成了前两个SwiftUI项目,并且也完成了一个技术项目——两个应用程序和一个技术项目的节奏将持续到课程结束,这将帮助你快速提升知识,同时花时间回顾和...

    韦弦zhy
  • 使用 Nginx 部署前后端分离项目,解决跨域问题

    前后端分离这个问题其实松哥和大家聊过很多了,上周松哥把自己的两个开源项目部署在服务器上以帮助大家可以快速在线预览(喜大普奔,两个开源的 Spring Boot ...

    江南一点雨
  • 深擎科技柴志伟:打造极致用户体验,探索金融科技的无限应用可能

    “随着经济环境的变化,金融行业正在经历一场大变革:客户代际快速转化,新兴科技迅速普及,金融服务无处不在,为业务的发展带来新的机遇和挑战。在科技变革的巨浪之下,'...

    镁客网
  • TensorFlow从1到2 - 5 - 非专家莫入!TensorFlow实现CNN

    当看到本篇时,根据TensorFlow官方标准《Deep MNIST for Experts》,你已经达到Expert Level,要恭喜了。 且不说是否夸大...

    黑猿大叔
  • 资深前端工程师---乔先生专访

    用户1272076
  • TensorFlow从1到2 | 第五章 非专家莫入!TensorFlow实现CNN

    当看到本篇时,根据TensorFlow官方标准《Deep MNIST for Experts》(https://tensorflow.google.cn/get...

    用户1332428
  • 查理·芒格—如何理性愉快地度过一生?

    不管怎么样,我想我来这里演讲是合适的。我自己养育过许多子女,我知道他们真的比坐在前面这些穿学位礼服的学生更感光荣。父母为子女付出了很多心血,把智慧和价值传授给子...

    宇相
  • ASP.Net Core 2.2 InProcess托管的Bug:unable to open database file

    最近把项目更新到了ASP.Net Core 2.2,发布之后发现在IIS下使用SQLite数据库不行了,报异常说不能打开数据库。"unable to open ...

    Mr. Wei

扫码关注云+社区

领取腾讯云代金券