当前位置: 首页 > 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...

终极指南:使用boardgame.io在React Native中开发跨平台棋盘游戏的完整教程

终极指南&#xff1a;使用boardgame.io在React Native中开发跨平台棋盘游戏的完整教程 【免费下载链接】boardgame.io State Management and Multiplayer Networking for Turn-Based Games 项目地址: https://gitcode.com/gh_mirrors/bo/boardgame.io 想要在移动设备上创…...

船载AIS的Class A、Class B和接收器到底怎么选?一篇讲清休闲帆船、渔船和小货船的设备配置指南

船载AIS设备选购全指南&#xff1a;从合规到实战的智能决策 清晨的港口&#xff0c;一艘30英尺的休闲帆船正在做最后的出海准备。船长盯着仪表盘上闪烁的AIS接收器信号&#xff0c;思考着是否该升级为收发一体的Class B设备——这个决定可能关系到未来航行中能否被大型商船及时…...

用STM32F103和DHT11做个智能温湿度报警器,附ESP8266远程监控代码

STM32F103与DHT11打造智能环境监测系统&#xff1a;从本地报警到云端监控全解析 在智能家居和工业物联网快速发展的今天&#xff0c;环境监测系统已成为许多创客和开发者入门的首选项目。本文将带你用STM32F103微控制器和DHT11温湿度传感器&#xff0c;构建一个功能完善的智能…...

技术方案:QuPath图像通道自动化复制与批量处理高效方案

技术方案&#xff1a;QuPath图像通道自动化复制与批量处理高效方案 【免费下载链接】qupath QuPath - Open-source bioimage analysis for research 项目地址: https://gitcode.com/gh_mirrors/qu/qupath 在生物医学图像分析领域&#xff0c;多通道图像处理是病理学研究…...

自动驾驶系统底层开发完整指南:从硬件到软件的技术深度解析 [特殊字符]

自动驾驶系统底层开发完整指南&#xff1a;从硬件到软件的技术深度解析 &#x1f697; 【免费下载链接】lowlevelprogramming-university How to be low-level programmer 项目地址: https://gitcode.com/gh_mirrors/lo/lowlevelprogramming-university 想要掌握自动驾驶…...

微信支付 微信转账 微信退款 订单流程链路指南文档

1.官网文档地址 https://pay.weixin.qq.com/doc/v3/merchant/4012791856 2.支付产品 JSAPI支付&#xff1a;提供商户在微信客户端内部浏览器网页中使用和小程序使用 APP支付&#xff1a;提供商户在自己的APP中使用 H5支付&#xff1a;提供商户在手机浏览器网页&#xff08…...

网盘下载提速终极指南:9大平台直链获取工具完整教程

网盘下载提速终极指南&#xff1a;9大平台直链获取工具完整教程 【免费下载链接】Online-disk-direct-link-download-assistant 一个基于 JavaScript 的网盘文件下载地址获取工具。基于【网盘直链下载助手】修改 &#xff0c;支持 百度网盘 / 阿里云盘 / 中国移动云盘 / 天翼云…...

如何在浏览器中高效使用微信网页版:浏览器扩展的终极解决方案

如何在浏览器中高效使用微信网页版&#xff1a;浏览器扩展的终极解决方案 【免费下载链接】wechat-need-web 让微信网页版可用 / Allow the use of WeChat via webpage access 项目地址: https://gitcode.com/gh_mirrors/we/wechat-need-web 还在为无法在浏览器中直接使…...

MCP Jenkins Intelligence:基于AI的Jenkins智能运维与效率提升实践

1. 项目概述&#xff1a;当Jenkins遇上AI&#xff0c;DevOps的“副驾驶”来了如果你和我一样&#xff0c;每天都要和Jenkins打交道&#xff0c;盯着那些流水线看构建状态、查失败日志、分析性能瓶颈&#xff0c;那你肯定也幻想过&#xff1a;要是能像聊天一样问它问题就好了。比…...

阿里季报图解:营收2434亿 AI迎商业化拐点,模型及应用ARR年底破300亿,派息25亿美元

雷递网 雷建平 5月13日阿里巴巴&#xff08;美股代码&#xff1a;“baba”&#xff0c;港股代号&#xff1a;9988&#xff09;今日发布2026年第一季度的财报。财报显示&#xff0c;阿里2026年第一季度营收为2433.8亿元&#xff08;352.83亿美元&#xff09;&#xff0c;同比增长…...