SwiftUI中的动画.animation和withAnimation

动画是通过改变视图的状态来给视图添加平滑视图变化的能力。SwiftUI中有两种类型的动画:隐式动画显式动画
不管是哪种动画,我们都需要一个被@State包装的状态属性值,通过这个值的改变来促使与之相关的UI刷新,继而执行动画。

隐式动画.animation(_:value:)

这是一个SwiftUI视图的修饰器。第一个参数的值是动画行为,它包lineareaseOuteaseIneaseInOut等。第二个参数接受一个不断变化的值,即下面用到的isAnimated.animation会对这个值做出反应。

@State var isAnimated: Bool = false
var body: some View {VStack {RoundedRectangle(cornerRadius: isAnimated ? 50 : 25).fill(isAnimated ? Color.red : Color.green).frame(width: isAnimated ? 100 : 300,height: isAnimated ? 100 : 300).rotationEffect(Angle(degrees: isAnimated ? 360 : 0)).offset(y: isAnimated ? -200 : 0).animation(Animation.linear(duration: 1).repeatForever(autoreverses: false),value: isAnimated).onTapGesture {isAnimated.toggle()}}}

上面代码中对RoundedRectangle设置了动画,我们通过onTapGesture手势触发动画,当点击后isAnimated的值改变,RoundedRectangle中与isAnimated有关的UI进行刷新,因为RoundedRectangle.animation动画修饰器修饰了,并且该修饰器关注isAnimated的变化,因此与isAnimated有关的UI将会以指定动画的方式刷新,效果如下面两个图。

autoreverses: false
动画1

autoreverses: true
动画2

duration

为了更精确地控制我们的动画,我们可以添加单次动画的持续时间。

// 动画执行时间为2秒
.animation(.easeInOut(duration: 2), value: value)
.repeatCount/.repeatForever

我们可以通过设置repeatCount(count) 或者 repeatForever()来设置动画重复次数等等。

// 动画执行两次
.animation(.easeInOut(duration: 1).repeatCount(2), value: value)
// 动画一直重复执行
.animation(.easeInOut(duration: 1).repeatForever(), value: value)

在设置动画重复执行是可以额外设置一个参数autoreverses,指示动画序列在向前播放后是否反向播放。
比如一个旋转动画,从0度到360度,一直循环执行:

  • 如果autoreversesfalse,当动画执行旋转到360度后,瞬间重置到0度,然后再从0度到360度做动画,这样反复执行,效果如上面动画1.
  • 如果autoreversestrue,当动画执行旋转到360度后,再从360度做动画回到0度,然后再从0度动画到360,这样反复执行,效果如上面动画2.

显示动画withAnimation()

显式动画不是视图修饰器。而是调用withAnimation()函数,并在括号之间添加想要动画化的内容。
在下面的代码中,我们在onTapGesture的执行代码快中调用withAnimation()函数,并设置动画参数,在withAnimation的闭包体里改变isAnimated的状态值,继而促使UI刷新,执行动画。

@State var isAnimated: Bool = false
var body: some View {VStack {RoundedRectangle(cornerRadius: isAnimated ? 50 : 25).fill(isAnimated ? Color.red : Color.green).frame(width: isAnimated ? 100 : 300,height: isAnimated ? 100 : 300).rotationEffect(Angle(degrees: isAnimated ? 360 : 0)).offset(y: isAnimated ? -200 : 0).onTapGesture {withAnimation(Animation.linear(duration: 1).repeatForever(autoreverses: true)) {isAnimated.toggle()}}}}

我们将isAnimated的改变放到了withAnimation函数的闭包里,意味着因isAnimated的改变引起的UI变化都要以指定的动画方式执行。该段代码的执行效果如同上面的两个动画图。

内置动画类型

在SwiftUI中,系统提供了多种内置的动画类型,可以通过.animation()修饰器或者withAnimation()来应用这些动画效果。以下是一些常见的系统动画类型:

  1. linear:线性动画,以恒定速度进行动画过渡。
  2. easeIn:缓慢开始的动画,逐渐加速。
  3. easeOut:缓慢结束的动画,逐渐减速。
  4. easeInOut:缓慢开始和结束的动画,先加速后减速。
  5. easeInOut(duration: Double):缓慢开始和结束的动画,可以指定持续时间。
  6. spring:弹簧动画,具有弹性效果。
  7. interactiveSpring(response: Double, dampingFraction: Double, blendDuration: Double):交互式弹簧动画,可以调整响应、阻尼和混合持续时间。
  8. default:默认动画,系统根据情况选择合适的动画类型。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/839182.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

mariadb10.5.8版本主从搭建

主从服务安装我们先略过了,网上的安装教程一大把,直接开始讲配置 主服务配置 [mysqld] ...server-id1 #开启二进制日志 log-binmysql-bin #中继日志的前缀名称 relay-logmysql-relay-bin #控制binlog的写入频率。每执行多少次事务写入一次 sync_binlog…

正点原子[第二期]Linux之ARM(MX6U)裸机篇学习笔记-19讲 串口实验UART

前言: 本文是根据哔哩哔哩网站上“正点原子[第二期]Linux之ARM(MX6U)裸机篇”视频的学习笔记,在这里会记录下正点原子 I.MX6ULL 开发板的配套视频教程所作的实验和学习笔记内容。本文大量引用了正点原子教学视频和链接中的内容。…

水平垂直居中的六种方法

1. 使用 Flexbox Flexbox 是一个现代的布局模型,可以轻松实现元素的水平和垂直居中。 .container {display: flex;justify-content: center; /* 水平居中 */align-items: center; /* 垂直居中 */height: 100vh; /* 视窗高度 */ }2. 使用 Grid CSS Grid 是另一种强…

【Golang】 Go语言中如何将参数添加到URL中

文章目录 前言一、参数解释二、代码实现三、总结 前言 在开发Web应用程序时,我们经常需要将参数添加到URL中,以便将数据发送到服务器。这些参数通常用于GET请求,以向服务器传递查询条件或其他信息。在Go语言中,我们可以使用net/u…

Vivado IP核的快速入门 官方手册和例程

在IP Catalog中选择要使用的IP核,可以查看支持的器件与资料。 在设计源sources页面中选中配置完成的IP核点击右键选择 Open IP Example Design,等待工程加载完成即可,可以点击Run Simulation进行功能仿真进行IP核的学习。 参考&#xff1…

Mac Pro中的开源虚拟机UTM安装ubuntu(Applce M1,M2芯片)(1)

MacPro安装UTM 1 UTM 下载UTM虚拟机链接: https://mac.getutm.app/ 建议官网下载: 下载 Ubuntu Arm 64版 下载 Ubuntu Arm 64版链接: https://cn.ubuntu.com/download/server/arm 2 安装UTM 2.1 安装在mac上 2.2 点Open 2.3 建虚拟机### 2.4 点出虚拟机 2.5 O…

系统分析师-案例分析-数据库

系统分析师-案例分析-数据库 更多软考资料 https://ruankao.blog.csdn.net/ 文章目录 系统分析师-案例分析-数据库数据库考察知识点规范化函数依赖范式1NF2NF3NF 规范化问题不规范化反规范化设计反规范化设计同步问题 并发控制性能优化完整性约束视图安全分布式数据库特点优点…

前端性能优化:从系统分析讲到实践策略

前言 在过去几年,我曾经写过几篇和性能优化相关的文章,例如有性能优化方法相关的,有性能监控相关的。但是都只关注于局部,没有从整体上去看待、分析性能优化。所以本文打算尝试从整体上去分析前端性能优化,从性能指标…

使用 RisingWave 和 Redash 处理和可视化实时数据

在创建流处理管道时,需要两个关键组件:一个用于处理和转换数据,一个用于数据可视化。RisingWave 和 Redash 就提供了一个优秀的解决方案。 RisingWave 是一个支持实时数据处理的分布式 SQL 流数据库。它提供增量更新的物化视图,使…

TRICONEX 3720 技术特点

TRICONEX 3720是一款安全管理系统通讯模块,通常用于工业自动化和安全系统中。它的主要作用是在控制系统中处理和管理数据通讯,确保信息在各个组件之间的有效传递。以下是关于TRICONEX 3720的详细介绍: 功能定位:TRICONEX 3720作为…

计算机操作系统总结(1)

1操作系统的概念(定义)功能和目标 (1)什么是操作系统? (2)操作系统的功能和目标—作为系统资源的管理者 (3)操作系统的功能和目标—向上层提供方便易用的服务 (4)操作系…

IP学习——ospf1

OSPF:开放式最短路径优先协议 无类别IGP协议:链路状态型。基于 LSA收敛,故更新量较大,为在中大型网络正常工作,需要进行结构化的部署---区域划分、ip地址规划 支持等开销负载均衡 组播更新 ---224.0.0.5 224.0.0.6 …

CCF-GESP 等级考试 2023年12月认证C++一级真题解析

2023年12月真题 单选题(每题 2 分,共 30 分) 第 1 题 以下C不可以作为变量的名称的是( )。 A. CCF GESPB. ccfGESPC. CCFgespD. CCF_GESP 正确答案:A 解析: A: 变量名不能包含空格,因此 “CCF GESP” 是不…

区块链开发:区块链软件开发包装相关解析

区块链开发是指设计、构建和维护基于区块链技术的应用程序或系统的过程。区块链是一种分布式账本技术,它通过去中心化的方式记录和验证数据,确保数据的透明性、不可篡改性和安全性。区块链开发者使用各种编程语言和框架来创建这些应用程序。 在加密货币领…

【Linux】-Linux文件的上传和下载、压缩和解压[9]

目录 前言 一、上传和下载 1、使用finalshell对Linux系统进行上传下载 2、rz、sz命令 二、解压和压缩 1、压缩格式 2、tar命令压缩 3、tar命令压缩 4、zip命令压缩文件 5、unzip命令解压文件 前言 在Linux系统中,文件的上传和下载、压缩和解压是非常重要…

redis 使用场景、比较快的原因

https://www.jianshu.com/p/40dbc78711c8 https://www.cnblogs.com/cye9971-/p/11267431.html redis 读取速度比较快的原因 1、数据直接从缓存读取 也支持持久化,需要子进程去处理 2、单线程模式,省去上下文切换的开销 3、合理的数据结构 4、I/O 多路复…

暴风雨的短视频:成都鼎茂宏升文化传媒公司

暴风雨的短视频:大自然的力与美 ​随着科技的进步和网络的普及,短视频已经成为我们生活中不可或缺的一部分。在这些短暂而精彩的瞬间里,我们得以窥见世界的每一个角落,感受生活的多样性和复杂性。成都鼎茂宏升文化传媒公司而当我…

kotlin基础之lambda编程

在Kotlin中,Lambda表达式是一种非常强大的工具,允许我们以更简洁、更声明式的方式编写代码。Kotlin对集合的操作提供了丰富的函数式API,这使得处理集合数据变得更加直观和高效。以下是如何在Kotlin中使用Lambda表达式、集合的创建与遍历以及集…

ubuntu nginx 配置php 网站

1.安装nginx sudo apt-get install nginx 2.安装php 和php-fpm sudo apt-get install phpsudo apt-get install php-fpm 3.配置ngixn 进入/etc/nginxg/sites-enabled vim default //notice 这里只能有一个default的文件 放两个nginx会把报错 完整配置如下 ## # You sho…

go语言之基本数据类型

文章目录 基础数据类型分类整数类型有符号整数无符号整数默认整数类型 浮点类型复数类型布尔类型字符类型字符串replace字符串获取字符串长度字符串的拼接字符串获取指定位置字符更多string操作 数据类型之间的转换其它基本类型转字符串类型fmt包中的Sprintfstrconv包中函数 字…