SwiftUI 实现关键帧动画

实现一个扫描二维码的动画效果,然而SwiftUI中没有提供CABasicAnimation 动画方法,该如何实现这种效果?先弄清楚什么关键帧动画,简单的说就是指视图从起点至终点的状态变化,可以是形状、位置、透明度等等

本文提供了一种方法Timer + offset + animation+@State,来实现位移变化

struct HomePage: View {@State var openScanQR = false@State var scanResult:String = ""@State var isAnimated = false@State var timer = Timer.publish(every: 3, on: .main, in: .common).autoconnect()var body: some View {VStack{}.ignoresSafeArea(edges: .top).fullScreenCover(isPresented: $openScanQR, content: {ScannerView(result: $scanResult).overlay(ZStack{Color.black.opacity(0.5)Image("scan_round").resizable().renderingMode(.template).aspectRatio(contentMode: .fill).foregroundColor(.blue).frame(height: UIScreen.main.bounds.width - 80).padding(.horizontal, 40)Image("scan_line").resizable().renderingMode(.template).aspectRatio(contentMode: .fill).foregroundColor(.blue).frame(height: 2).padding(.horizontal, 40).offset(y: !isAnimated ? -(UIScreen.main.bounds.width - 80)/2:  (UIScreen.main.bounds.width - 80)/2).animation(.easeOut(duration: 3), value: isAnimated)}).edgesIgnoringSafeArea(.all)}).onReceive(timer, perform: { _ inwithAnimation {isAnimated.toggle()}}).background(Color.background_color).edgesIgnoringSafeArea(.top)}
}

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

如若内容造成侵权/违法违规/事实不符,请联系一条长河网进行投诉反馈,一经查实,立即删除!

相关文章

pytorch学习笔记二:用pytorch神经网络模型做气温预测、分类任务构建

文章目录 一、搭建pytorch神经网络进行气温预测1)基础搭建2)实际操作标识特征和标签3)构建成标准化的预处理数据(做标准化收敛速度更快) 二、按照建模顺序构建完成网络架构1)np.array格式的标签(y)和特征(x…

Spring Boot管理用户数据

目录 学习目标前言Thymeleaf 模板JSON 数据步骤 1: 创建 Spring Boot 项目使用 Spring Initializr 创建项目使用 IDE 创建项目 步骤 2: 添加依赖步骤 3: 创建 Controller步骤 4: 新建index页面步骤 5: 运行应用程序 表单提交步骤 1: 添加 Thymeleaf 依赖在 Maven 中添加依赖 步…

Github 2024-09-22 php开源项目日报 Top10

根据Github Trendings的统计,今日(2024-09-22统计)共有10个项目上榜。根据开发语言中项目的数量,汇总情况如下: 开发语言项目数量PHP项目10Blade项目1Coolify: 开源自助云平台 创建周期:1112 天开发语言:PHP, Blade协议类型:Apache License 2.0Star数量:10527 个Fork数量…

串的存储实现方法(与链表相关)

一、 定义 字符串是由零个(空串)或多个字符组成的有限序列。 eg:S"Hello World!" 串相等:两个串长度相等并且对应位置的字符都相等时,两个串才相等。 二、串的存储实现 2.1 定长顺序串 2.2 堆串 和定长顺序串的…

nodejs 014: React.FC 与 Evergreen(常青树) React UI 框架的的Dialog组件

React.FC React.FC是React中用于定义函数组件“Function Component”的类型。它代表,可以帮助你在TypeScript中提供类型检查和自动补全。使用React.FC时,可以明确指定组件的props类型,并且它会自动推导children属性。下面是一个使用 React.F…

二、MySQL环境搭建

文章目录 1. MySQL的卸载步骤1:停止MySQL服务步骤2:软件的卸载步骤3:残余文件的清理步骤4:清理注册表(选做)步骤5:删除环境变量配置 2. MySQL的下载、安装、配置2.1 MySQL的4大版本2.2 软件的下…

Ubuntu以及ROS的一些方便设置及使用

目录 增加环境变量 取消终端sudo密码 关闭开机密码 编写sh文件 虚拟环境的启用与关闭 launch文件小技巧 增加环境变量 1.在home目录下按ctrlh打开隐藏文件,打开.bashrc直接修改即可 2.输入gedit/vim ~/.bashrc修改即可 对于source ~/.bashrc这条指令只是适用…

从零开始讲DDR(5)——读懂Datasheet

对于开发人员来说,需要根据实际场景和使用的需要,使用不同厂家,不同型号的DDR,虽然原理上大同小异,但是还是有一些细节上的需要注意的地方,接触一个新的DDR芯片,首先就是需要找到对应的datashee…

软考高级:系统安全分析与设计- 加密管理:PKI 和 KMI 区别

讲解 PKI(公钥基础设施)和 KMI(密钥管理基础设施)都是与加密和密钥管理相关的重要概念,但它们有不同的侧重点。接下来,我将通过一个生活化的例子和概念讲解,帮助你理解它们的区别。 生活化例子…

【redis-02】深入理解redis中RBD和AOF的持久化

redis系列整体栏目 内容链接地址【一】redis基本数据类型和使用场景https://zhenghuisheng.blog.csdn.net/article/details/142406325【二】redis的持久化机制和原理https://zhenghuisheng.blog.csdn.net/article/details/142441756 如需转载,请输入:htt…

[Java EE] 网络原理 ---- UDP协议 序列化 / 反序列化 长短连接

Author:MTingle major:人工智能 Build your hopes like a tower! 文章目录 文章目录 一. UDP 协议 1.UDP协议的特点 2. UDP 的结构 3. md5算法 二. 长短连接 协程 IO多路复用 序列化和反序列化 1.长短连接 2. 协程 3. IO 多路复用 4.序列化 / 反序列化 一…

队列+宽搜专题篇

目录 N叉树的层序遍历 二叉树的锯齿形层序遍历 二叉树最大宽度 在每个树行中找最大值 N叉树的层序遍历 题目 思路 使用队列层序遍历来解决这道题,首先判断根节点是否为空,为空则返回空的二维数组;否则,就进行层序遍历&#x…

论文阅读 | 可证安全隐写(网络空间安全科学学报 2023)

可证安全隐写:理论、应用与展望 一、什么是可证安全隐写? 对于经验安全的隐写算法,即使其算法设计得相当周密,隐写分析者(攻击者)在观察了足够数量的载密(含有隐写信息的数据)和载体…

6.数据库-数据库设计

6.数据库-数据库设计 文章目录 6.数据库-数据库设计一、设计数据库的步骤二、绘制E-R图三、关系模式第一范式 (1st NF)第二范式 (2nd NF)第三范式 (3nd NF)规范化和性能的关系 一、设计数据库的步骤 收集信息 与该系统有关人员进行交流、座谈,充分了解用户需求&am…

Vulkan 学习(9)---- vkSuraceKHR 创建

目录 OverView创建窗口表面参考代码 OverView Vulkan 是一个平台无关的图形API,这意味着它不能直接与特定的窗口系统(Windows,linux 和 macOS 的窗口系统)进行交互 为了解决这个问题,Vulkan 引入了窗口系统集成(Window System Intergration …

DOM【JavaScript】

在JavaScript中,DOM (Document Object Model:文档对象模型) 是web页面的编程接口,用于表示和操作 HTML 和 XML 文档。它将文档结构化为一个树形结构,允许开发者通过 JavaScript 访问和修改网页的内容、结构和样式。以下是一些关于…

基于单片机的智能校园照明系统

由于校园用电量较大,本设计可以根据实际环境情况的改变,实现实时照明的控制。本设计以单片机芯片为控制芯片,热释电传感器采集教室中学生出入的信息,并把信息传递给单片机芯片,单片机芯片根据传感器传递过来的信息来控…

【软件测试】Bug 篇

哈喽,哈喽,大家好~ 我是你们的老朋友:保护小周ღ 今天给大家带来的是 【软件测试】Bug 篇,首先了解, 什么是Bug, 如何定义一个Bug, 如何描述一个 Bug, Bug的级别, 和 Bug 的生命周期, 以及测试人员跟开发人员产生争执如何处理,…

【MYSQL】聚合查询、分组查询、联合查询

目录 聚合查询聚合函数count()sum()avg()max()和min()总结 分组查询group by 子句having 子句 联合查询笛卡尔积内连接外连接自连接子查询单行子查询多行子查询from子句使用子查询 合并查询 聚合查询 聚合查询就是针对表中行与行之间的查询。 聚合函数 count() count(列名)&a…

个人随想-代码生成工具v0+claude+cursor

cursor出来已经有一段时间了,不知道大家用了感觉怎么样。今天就以我个人为例,给大家介绍一下我是如何使用cursor搭建原型。 首先,我并不觉得cursor对于后端程序员带来了革命性改进,我们与很多团队沟,使用cursor80%以上…