当前位置: 首页 > news >正文

AnyTransition/过渡动画, MatchedGeometryEffect/匹配几何动画效果 的使用

1. AnyTransition 过渡动画效果

  1.1 创建过度动画案例 AnyTransitionBootcamp.swift

import SwiftUI/// 旋转修饰 View
struct RotateViewModifier :ViewModifier{let rotation: Doublefunc body(content: Content) -> some View {content.rotationEffect(Angle(degrees: rotation)).offset(x: rotation != 0 ? UIScreen.main.bounds.width : 0,y: rotation != 0 ? UIScreen.main.bounds.height : 0)}
}// 扩展
extension AnyTransition{/// 旋转static var rotation: AnyTransition{modifier(active: RotateViewModifier(rotation: 180),identity: RotateViewModifier(rotation: 0))}/// 旋转自定义角度static func rotation(rotation: Double) -> AnyTransition{modifier(active: RotateViewModifier(rotation: rotation),identity: RotateViewModifier(rotation: 0))}/// 旋转 不对称方式static var rotateOn: AnyTransition{asymmetric(insertion: .rotation,removal: .move(edge: .leading))}
}/// 过渡动画
struct AnyTransitionBootcamp: View {@State private var showRectangle: Bool = falsevar body: some View {VStack {Spacer()if showRectangle {RoundedRectangle(cornerRadius: 25).fill(Color.black).frame(width: 250, height: 350).frame(maxWidth: .infinity, maxHeight: .infinity)//.transition(.move(edge: .leading))//.transition(AnyTransition.scale.animation(.easeInOut))//.transition(AnyTransition.rotation.animation(.easeInOut))// 旋转//.transition(.rotation)// 旋转自定义角度//.transition(.rotation(rotation: 1080))// 不对称旋转.transition(.rotateOn)}Spacer()Text("Click Me!").withDefaultButtonFormatting().padding(.horizontal, 40).onTapGesture {//duration: 5.0withAnimation(.easeInOut) {showRectangle.toggle()}}}}
}struct AnyTransitionBootcamp_Previews: PreviewProvider {static var previews: some View {AnyTransitionBootcamp()}
}

  1.2 效果图:

2. MatchedGeometryEffect 匹配几何动画效果

  2.1 创建匹配几何效果案例,MatchedGeometryEffectBootcamp.swift

import SwiftUI/// 匹配几何效果
struct MatchedGeometryEffectBootcamp: View {/// 是否单击@State private var isClicked: Bool = false@Namespace private var namespacevar body: some View {VStack {if !isClicked {Circle().matchedGeometryEffect(id: "rectangle", in: namespace).frame(width: 100, height: 100)}Spacer()if isClicked {Circle().matchedGeometryEffect(id: "rectangle", in: namespace).frame(width: 300, height: 200)}}.frame(maxWidth: .infinity, maxHeight: .infinity).background(Color.orange).onTapGesture {withAnimation(.easeIn(duration: 0.5)) {isClicked.toggle()}}}
}/// 匹配几何效果二
struct MatchedGeometryEffectBootcamp2: View{let categories: [String] = ["Home", "Popular", "Saved"]@State private var selected: String = "Home"@Namespace private var namespace2var body: some View{HStack {ForEach(categories, id: \.self) { category inZStack(alignment: .bottom) {if selected == category{RoundedRectangle(cornerRadius: 10).fill(Color.red.opacity(0.5)).matchedGeometryEffect(id: "category_background", in: namespace2).frame(width: 35, height: 2).offset(y: 10)}Text(category).foregroundColor(selected == category ? .red : .black)}.frame(maxWidth: .infinity).frame(height: 55).onTapGesture {withAnimation(.spring()) {selected = category}}}}.padding()}
}struct MatchedGeometryEffectBootcamp_Previews: PreviewProvider {static var previews: some View {MatchedGeometryEffectBootcamp()//MatchedGeometryEffectBootcamp2()}
}

  2.2 效果图:

     

相关文章:

AnyTransition/过渡动画, MatchedGeometryEffect/匹配几何动画效果 的使用

1. AnyTransition 过渡动画效果 1.1 创建过度动画案例 AnyTransitionBootcamp.swift import SwiftUI/// 旋转修饰 View struct RotateViewModifier :ViewModifier{let rotation: Doublefunc body(content: Content) -> some View {content.rotationEffect(Angle(degrees: r…...

mac版postman升级后数据恢复办法

postman升级了一下,所有的collections都丢失了。 首先在finder里找到这个路径 /Users/{用户名}/Library/Application Support/Postman找到升级之前的的最新的backup.json,然后在postman里import这个文件。 所有升级前的collections都恢复了&#xff0…...

四.镜头知识之放大倍率

四.镜头知识之放大倍率 文章目录 四.镜头知识之放大倍率4.0 前言4.1 镜头的光学放大倍率的计算方法4.2 显示器的电子放大倍率4.2.1 智能硬件产品的显示放大倍率计算案例4.3 系统放大倍率4.4 智能硬件产品的系统放大倍率计算案例4.4 智能硬件产品的系统放大倍率计算案例4.0 前言…...

Jenkins UI 自动化持续化集成测试

一:安装jenkins 环境 在官网下载msi 直接安装即可 二:设置全局变量 设置allure 路径 三:创建项目 1、创建自由风格项目 2、如果项目在本地,且本地服务器是windows ,找到Jenkins安装根目录,寻找config…...

vue项目中引入地图的详细教程

第一步&#xff1a;在项目中安装地图插件 npm i amap/amap-jsapi-loader --save 第二步&#xff1a;创建一个容器 添加id属性 &#xff08;因为地图必须使用id 不能使用class&#xff09; <div id"maps"></div> 第三步&#xff1a;给这个容器设置宽…...

MyBatisPlus 多数据源配置

目录 一、mybatis-plus 简介 特性 二、支持数据库&#xff1a; 三、 开发实例 1. 引入依赖&#xff1a; 2. 参数配置application.yml 3. 在 Spring Boot 启动类中添加 MapperScan 注解&#xff0c;扫描 Mapper 文件夹&#xff1a; 4. 编写实体类 User.java&#xff08;此处…...

使用Golang实现HTTP代理突破IP访问限制

引言 在当今互联网时代&#xff0c;网站和服务商为了维护安全性和保护用户隐私&#xff0c;常常会对特定的IP地址进行封锁或限制。但是&#xff0c;有时候我们可能需要访问这些被限制的网站或服务。为了突破这种限制&#xff0c;我们可以使用HTTP代理来隐藏真实的客户端IP地址…...

Iterator和ListIterator的区别是什么?

Iterator 和 ListIterator 都是 Java 集合框架中的迭代器,其中 Iterator 是普遍适用于所有实现了 Iterable 接口的集合类的通用迭代器,而 ListIterator 则是专门用于遍历 List 集合的迭代器,它比 Iterator 更加强大,而且只适用于 List 集合。 以下是 Iterator 和 ListItera…...

大坑-MATLAB图片转存时需注意的点

MATLAB中图片的保存和转存有一个巨大的陷阱&#xff0c;我也是在吃了大亏后发现的&#xff0c;正常情况下&#xff0c;MATLAB跑完实验&#xff0c;生成的图片如下 放大后这样 可以方便修改坐标轴标题&#xff0c;最初我就是因为想修改坐标轴标题才给它放大的&#xff0c;因为…...

基于Lang-Chain(ChatGLM和ChatChat)知识库大语言模型的部署搭建

环境准备 阿里云个人认证后&#xff0c;可免费试用机器学习平台PAI&#xff0c;可提供适合大语言模型环境搭建的高配置服务器。 点击试用阿里云服务器 试用产品选择&#xff1a;选择交互式建模PAI-DSW 适合哪些场景 文章/知识库/帮助文档等的检索基于现有知识库实现问答… …...

个人轻博客PHP开源系统/溯雪Sxlog轻博客源码/洁干净轻/占内存极低/php源码

源码简介&#xff1a; 溯雪(sxlog)它是一款很简洁越低内存的轻博客程序&#xff0c;整个程序包不到200KB&#xff0c;占内存极小&#xff0c;比一张照片都要小很多。简洁高效&#xff0c;占用空间内存极小&#xff0c;而且它不依赖任何数据库&#xff0c;不依赖富文本编辑器&a…...

2.Vue-从零开始搭建一个vue项目

题记 从零开始搭建一个vue项目&#xff0c;以下是操作的全过程。 安装Vue CLI脚手架 打开终端&#xff0c;运行以下命令全局安装Vue CLI脚手架&#xff1a; npm install -g vue/cli 查看 Vue CLI脚手架版本&#xff1a; vue -V 注意&#xff1a;查看vue版本的命令不是vue -V&a…...

快速构建代理应对

今天我要和大家分享一个解决反爬策略升级问题的方法&#xff0c;那就是快速构建代理池。如果您是一位爬虫开发人员&#xff0c;一定深知反爬策略的烦恼。但是&#xff0c;通过构建代理池&#xff0c;您可以轻松地应对反爬策略的升级&#xff0c;让您的爬虫持续高效运行。接下来…...

【LeetCode刷题(数据结构)】:另一颗树的子树

给你两棵二叉树 root 和 subRoot 检验 root 中是否包含和 subRoot 具有相同结构和节点值的子树。如果存在&#xff0c;返回 true &#xff1b;否则&#xff0c;返回 false 二叉树 tree 的一棵子树包括 tree 的某个节点和这个节点的所有后代节点。tree 也可以看做它自身的一棵子…...

LeetCode 2903. 找出满足差值条件的下标 I【双指针+维护最大最小】简单

本文属于「征服LeetCode」系列文章之一&#xff0c;这一系列正式开始于2021/08/12。由于LeetCode上部分题目有锁&#xff0c;本系列将至少持续到刷完所有无锁题之日为止&#xff1b;由于LeetCode还在不断地创建新题&#xff0c;本系列的终止日期可能是永远。在这一系列刷题文章…...

【神经网络】如何在Pytorch中从零开始将MNIST网络量化为8位

论文&#xff1a; Quantization and Training of Neural Networks for Efficient Integer-Arithmetic-Only Inference 下载地址&#xff1a;https://arxiv.org/pdf/1712.05877.pdf 更新:量化感知训练的博客文章是在线的&#xff0c;并在这里链接&#xff0c;通过它我们可以训…...

智慧水利:山海鲸数字孪生的革新之路

一、概念 什么是港口&#xff1f; "港口"通常指的是一个水域或岸边的设施&#xff0c;用于装载、卸载、储存和处理货物、以及提供与海上、河流或湖泊交通相关的服务。港口可以包括各种类型的码头、码头设备、仓库、货物运输设施、以及各种管理和物流设施。 什么是数…...

【unity】【VR】白马VR课堂系列-VR开发核心基础04-主体设置-XR Rig的引入和设置

接下来我们开始引入并构建XR Rig。 你可以将XR Rig理解为玩家在VR世界中的替身。 我们先删除Main Camera&#xff0c;在Hierarchy右键点击删除。 然后再在场景层右键选择XR下的XR Origin。这时一个XR Origin对象就被添加到了Hierarchy。 重设XR Origin的Position和Rotation…...

Arcgis实现Tiff合并

Arcgis实现Tiff合并 现有四幅Tiff影像 打开数据管理工具 输入使用这四幅影像 下面这个就是建立数据库&#xff0c;这个不对 点击确定 合成完毕...

将已有jar包放进maven仓库

mvn install:install-file -DfileD:\sapjco3.jar -DgroupIdcom.sap.conn.jco -DartifactIdsapjco3 -Dversion3.0.14 -Dpackagingjar...

冠珠瓷砖×莫氏鸡煲×叠滘东胜东队,德叔有请,莫叔掌勺,“力撑”叠滘龙船传承

5月10日&#xff0c;2026叠滘龙船漂移大赛金牌合作伙伴冠珠瓷砖品牌代表、新明珠集团董事长叶德林“德叔”有请&#xff0c;莫氏鸡煲创始人“莫叔”掌勺&#xff0c;携火爆全网的莫氏祛湿鸡煲、紫洞黄皮酒&#xff0c;探班叠滘东胜东队训练场。当天下午&#xff0c;德叔、莫叔还…...

WSA Toolbox:Windows 11上5分钟搭建Android应用生态的终极指南

WSA Toolbox&#xff1a;Windows 11上5分钟搭建Android应用生态的终极指南 【免费下载链接】wsa-toolbox A Windows 11 application to easily install and use the Windows Subsystem For Android™ package on your computer. 项目地址: https://gitcode.com/gh_mirrors/ws…...

终极指南:boardgame.io v0.50重大更新,打造更强大的回合制游戏框架

终极指南&#xff1a;boardgame.io v0.50重大更新&#xff0c;打造更强大的回合制游戏框架 【免费下载链接】boardgame.io State Management and Multiplayer Networking for Turn-Based Games 项目地址: https://gitcode.com/gh_mirrors/bo/boardgame.io boardgame.io是…...

户外Wi-Fi天线系统热管理方案与优化实践

1. 户外Wi-Fi天线系统热管理挑战解析 在户外通信设备领域&#xff0c;热管理一直是个令人头疼的问题。我经手过多个基站项目&#xff0c;最深切的体会就是&#xff1a;那些在实验室里运行良好的设备&#xff0c;一到实际户外环境就频频出现热关机。以这个案例中的Wi-Fi天线系统…...

极域电子教室破解终极指南:如何快速解除课堂控制实现学习自由

极域电子教室破解终极指南&#xff1a;如何快速解除课堂控制实现学习自由 【免费下载链接】JiYuTrainer 极域电子教室防控制软件, StudenMain.exe 破解 项目地址: https://gitcode.com/gh_mirrors/ji/JiYuTrainer 还在为极域电子教室的全屏控制而烦恼吗&#xff1f;你是…...

Java 注解底层原理、组合注解实现与 AOP 协同机制全解析

Java 注解底层原理与 AOP 协同工作机制 系统性总结 本文严格基于 Java 注解底层原理及 AOP 结合使用的核心技术论述&#xff0c;对知识点进行系统性梳理、重组与优化。全文遵循元注解构建组合注解 → 注解编译与运行底层机制 → 注解AOP 协同工作原理 → 实战问题与解决方案的逻…...

突破性AI编程工具破解方案:cursor-free-vip技术深度解析与全栈实施指南

突破性AI编程工具破解方案&#xff1a;cursor-free-vip技术深度解析与全栈实施指南 【免费下载链接】cursor-free-vip [Support 0.45]&#xff08;Multi Language 多语言&#xff09;自动注册 Cursor Ai &#xff0c;自动重置机器ID &#xff0c; 免费升级使用Pro 功能: Youve …...

期货交易者最大的心魔:为什么你总想“落袋为安”?从海桑的交易系统看盈利奔跑

期货交易者的盈利困境&#xff1a;如何克服"落袋为安"的本能冲动 在期货交易的世界里&#xff0c;有一种奇怪的现象&#xff1a;许多交易者能够保持不错的胜率&#xff0c;却始终无法实现账户的持续增长。他们往往在盈利时过早离场&#xff0c;而在亏损时却坚持持有&…...

3个技巧快速掌握加密压缩包密码找回:ArchivePasswordTestTool新手指南

3个技巧快速掌握加密压缩包密码找回&#xff1a;ArchivePasswordTestTool新手指南 【免费下载链接】ArchivePasswordTestTool 利用7zip测试压缩包的功能 对加密压缩包进行自动化测试密码 项目地址: https://gitcode.com/gh_mirrors/ar/ArchivePasswordTestTool 你是否曾…...

Angular+Claude协同开发全栈实践(企业级项目落地手册)

更多请点击&#xff1a; https://intelliparadigm.com 第一章&#xff1a;AngularClaude协同开发全栈实践&#xff08;企业级项目落地手册&#xff09; 在现代企业级应用开发中&#xff0c;前端框架与AI辅助编程的深度集成正成为提效关键。Angular 提供结构化、可扩展的单页应…...