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,一经查实,立即删除!

相关文章

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

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

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…

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

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

使用 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 …

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

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

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

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

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

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

go语言之基本数据类型

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

java 解决异常 Class path contains multiple SLF4J bindings

前面 为了使用 j2cache pom中导入了 <dependency><groupId>net.oschina.j2cache</groupId><artifactId>j2cache-core</artifactId><version>2.8.4-release</version> </dependency><dependency><groupId>net.osc…

Java开发之JDBC

JDBC 介绍JDBC程序&#xff08;Statement&#xff09;相关细节URLResultSet 连接池程序&#xff08;PreparedStatement&#xff09; 本文主要记录一下学习JDBC的一些知识点 介绍JDBC 首先谈谈什么是JDBC。下面放几张图&#xff0c;大致就可以清楚JDBC了。程序&#xff08;Sta…

网络编程—— Http的Get请求

http: hyper text transport protocal:超文本传输协议。 http是一种基于客户端-服务器模式的协议(Client-Server)。它规定只能由客户端先发起请求给服务器&#xff0c; 服务器做出响应。 http数据传输以数据报文的形式进行&#xff0c; 客户端向服务器发起的请求叫做请求报文。…

【Linux玩物志】Linux环境开发基本工具使用(终章) ——git与gdb调试器

W...Y的主页 &#x1f60a; 代码仓库分享 &#x1f495; 前言&#xff1a;这是最后一篇Linux工具篇&#xff0c;今天这篇文章我们要来简单讲一件git与调试器gdb。 目录 使用 git 命令行 安装 git 在 Github 创建项目 注册账号 创建项目 ​编辑 下载项目到本地 在 Gite…

融合基因组序列识别scATAC-seq的细胞类型

利用scATAC-seq技术进行单细胞分析&#xff0c;可以在单细胞分辨率下深入了解基因调控和表观遗传异质性&#xff0c;但由于数据的高维性和极端稀疏性&#xff0c;scATAC-seq的细胞注释仍然具有挑战性。现有的细胞注释方法大多集中在细胞峰矩阵上&#xff0c;没有充分利用潜在的…

商品指数创年内新高,粘性通胀成为美联储噩梦

文章概述 虽然美国4月CPI增幅放缓让美联储今年降息的可能性大增&#xff0c;但与此同时&#xff0c;大宗商品价格却达到了一年来的最高水平&#xff0c;粘性通胀可能成为美联储的噩梦。数据显示&#xff0c;跟踪24种能源、金属和农业合约彭博大宗商品现货指数今年以来已经上涨…

使用Flask ORM进行数据库操作的技术指南

文章目录 安装Flask SQLAlchemy配置数据库连接创建模型类数据库操作插入数据查询数据更新数据删除数据 总结 Flask是一个轻量级的Python Web框架&#xff0c;其灵活性和易用性使其成为开发人员喜爱的选择。而ORM&#xff08;对象关系映射&#xff09;则是一种将数据库中的表与面…

LeetCode题练习与总结:二叉树的最大深度--104

一、题目描述 给定一个二叉树 root &#xff0c;返回其最大深度。 二叉树的 最大深度 是指从根节点到最远叶子节点的最长路径上的节点数。 示例 1&#xff1a; 输入&#xff1a;root [3,9,20,null,null,15,7] 输出&#xff1a;3示例 2&#xff1a; 输入&#xff1a;root […