SwiftUI直通车系列(6)—— 使用动画

Easter79
• 阅读 522

SwiftUI直通车系列(6)—— 使用动画

     本系列博客是针对SwiftUI开发框架的快速入门介绍,之前系列博客地址:

SwiftUI直通车系列(1)—— 视图的布局与组织

SwiftUI直通车系列(2)—— 列表视图

SwiftUI直通车系列三(3)—— 使用导航

SwiftUI直通车系列(4)—— 处理用户交互

SwiftUI直通车系列(5)—— 自定义绘制

前面的博客整体对使用SwiftUI进行页面布局与简单的用户交互做了介绍。我们知道,作为一个优秀的UI框架,其很重要的一点是对动画的支持,动画是提升用户体验的重要方式,在SwiftUI中,实现动画效果将变得非常容易。

一、使用属性动画

     属性动画是指当组件的属性发生变化时所展示动画效果,例如组件的颜色、位置、尺寸、旋转角度等。在SwiftUI中,我们知道要动态的对组件样式进行更改,需要使用状态来控制。我们也可以使用状态来控制动画动作。

      例如,我们定义一个按钮组件,当点击时,让其旋转180度,并略微放大,代码如下:

struct DrawContent:View {
    @State private var begin = false
    var body: some View {
        VStack(alignment: .center, spacing: 20) {
            Button(action: {
                self.begin.toggle()
            }) {
                Text("开始")
                    .font(Font.system(size: 30))
                    .rotationEffect(.degrees(self.begin ? 180 : 0))
                    .scaleEffect(self.begin ? 2 : 1)
                    .animation(.easeInOut(duration: 3))
                                        
            }
        }
    }
}

其中,begin状态属性用来记录动画的状态,当一次点击此按钮时,会将当前按钮放大一倍,并旋转180度,再次点击按钮会动画还原。

      rotationEffect用来定义组件的旋转角度,scaleEffect用来定义组件缩放的比例,与之类似,大部分用来渲染视图样式的属性都支持进行动画。animation用来设置动画的执行方式,如上代码所示,设置的为easeInOut表示动画执行的过程采用渐入渐出的方式,且动画执行的时长为3秒。

二、使用转场动画

      属性动画用在组件的某些属性发生变化的场景,转场动画会影响组件的切换动作。当对组件进行展示或隐藏时,通常可以采用转场动画来处理。我们以上一篇博客自定义的图形组件为例,我们可以为其出现时加一个滑动动画,示例代码如下:

extension Animation {
    static func custom() -> Animation {
        Animation.spring(response: 1.5, dampingFraction: 0.5, blendDuration: 0.5)
            .speed(2)
            .delay(0.03)
    }
}

struct DrawContent:View {
    @State private var begin = false
    var body: some View {
        VStack(alignment: /*@START_MENU_TOKEN@*/.center/*@END_MENU_TOKEN@*/, spacing: 20) {
            Button(action: {
                withAnimation {
                    self.begin.toggle()
                }
            }) {
                Text("开始")
                    .font(Font.system(size: 30))
                    .rotationEffect(.degrees(self.begin ? 180 : 0))
                    .scaleEffect(self.begin ? 2 : 1)
                    .animation(.easeInOut(duration: 3))
                                        
            }
            if self.begin {
                ZStack{
                    ForEach(0 ..< 10) { i in
                        DrawTestView(angle: Angle(degrees:Double(36*i))).opacity( 0.3)
                    }
                }.animation(.custom())
                .transition(.slide)
            }

        }

    }
}

如上代码所示,其中custom是我们自定义的一种动画模式,上面采用了阻尼动画,并自定义了动画的阻尼参数,速度,延时等属性。

点赞
收藏
评论区
推荐文章
blmius blmius
2年前
MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1
文章目录问题用navicat导入数据时,报错:原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。全局s
Jacquelyn38 Jacquelyn38
3年前
2020年前端实用代码段,为你的工作保驾护航
有空的时候,自己总结了几个代码段,在开发中也经常使用,谢谢。1、使用解构获取json数据let jsonData  id: 1,status: "OK",data: 'a', 'b';let  id, status, data: number   jsonData;console.log(id, status, number )
待兔 待兔
1星期前
手写Java HashMap源码
HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程22
Easter79 Easter79
2年前
SwiftUI直通车系列(3)—— 使用导航
SwiftUI直通车系列三(3)——使用导航  关于SwiftUI,我们前两篇博客介绍了独立组件的布局与属性设置相关内容,并且介绍了开发中最常用的列表视图的使用。但是一个完整的应用程序不可能是单界面的,如何使用SwiftUI进行界面间的导航跳转,是我们本博客讨论的重点。前两篇博客地址如下:Swi
Easter79 Easter79
2年前
SwiftUI直通车系列(4)—— 处理用户交互
SwiftUI直通车系列(4)——处理用户交互前情回顾:SwiftUI直通车系列(1)——视图的布局与组织(https://my.oschina.net/u/2340880/blog/4529951)SwiftUI直通车系列(2)——列表视图(https://my.oschina.n
Easter79 Easter79
2年前
SwiftUI直通车系列(1)—— 视图的布局与组织
SwiftUI直通车系列(1)——视图的布局与组织一、引言    SwiftUI提供了一种更快、更高效也更简单的页面开发方式。我们知道相对于ObjectiveC,Swift语言本身就更加高效简洁,SwiftUI采用了结构化的布局方式,使得应用的界面开发更加直观快速。本系列博客,
Easter79 Easter79
2年前
SwiftUI直通车系列(5)—— 自定义绘制
SwiftUI直通车系列(5)——自定义绘制前情回顾:SwiftUI直通车系列(1)——视图的布局与组织(https://my.oschina.net/u/2340880/blog/4529951)SwiftUI直通车系列(2)——列表视图(https://my.oschina.net
Easter79 Easter79
2年前
SwiftUI直通车系列(2)—— 列表视图
SwiftUI直通车系列(2)——列表视图  列表视图的开发中非常常用的页面元素。SwiftUI中也有专门用来渲染列表的元素提供。一、编写行视图   列表实际上是一组行视图的组合,在布局列表视图之前,你首先需要定义好行视图的布局。例如,我们使用一个Image元素和两个Tex
Wesley13 Wesley13
2年前
MySQL部分从库上面因为大量的临时表tmp_table造成慢查询
背景描述Time:20190124T00:08:14.70572408:00User@Host:@Id:Schema:sentrymetaLast_errno:0Killed:0Query_time:0.315758Lock_
Python进阶者 Python进阶者
6个月前
Excel中这日期老是出来00:00:00,怎么用Pandas把这个去除
大家好,我是皮皮。一、前言前几天在Python白银交流群【上海新年人】问了一个Pandas数据筛选的问题。问题如下:这日期老是出来00:00:00,怎么把这个去除。二、实现过程后来【论草莓如何成为冻干莓】给了一个思路和代码如下:pd.toexcel之前把这
Easter79
Easter79
Lv1
今生可爱与温柔,每一样都不能少。
文章
2.8k
粉丝
5
获赞
1.2k