CustomShapes/自定义形状, CustomCurves/自定义曲线, AnimateableData/数据变化动画 的使用

1. CustomShapes 自定义形状视图

  1.1 资源图文件 therock.png

  1.2 创建自定义形状视图 CustomShapesBootcamp.swift

import SwiftUI/// 三角形
struct Triangle: Shape{func path(in rect: CGRect) -> Path {Path { path inpath.move(to: CGPoint(x: rect.midX, y: rect.minY))path.addLine(to: CGPoint(x: rect.maxX, y: rect.maxY))path.addLine(to: CGPoint(x: rect.minX, y: rect.maxY))path.addLine(to: CGPoint(x: rect.midX, y: rect.minY))}}
}/// 菱形
struct Diamond: Shape{func path(in rect: CGRect) -> Path {Path { path inlet horizontalOffset: CGFloat = rect.width * 0.2path.move(to: CGPoint(x: rect.midX, y: rect.minY))path.addLine(to: CGPoint(x: rect.maxX - horizontalOffset, y: rect.midY))path.addLine(to: CGPoint(x: rect.midX, y: rect.maxY))path.addLine(to: CGPoint(x: rect.minX + horizontalOffset, y: rect.midY))path.addLine(to: CGPoint(x: rect.midX, y: rect.minY))}}
}/// 梯型
struct Trapezoid: Shape{func path(in rect: CGRect) -> Path {Path { path inlet horizontalOffset: CGFloat = rect.width * 0.2//let verticalOffset: CGFloat = rect.height * 0.58let verticalOffset: CGFloat = rect.height * 0.2path.move(to: CGPoint(x: rect.minX + horizontalOffset, y: rect.minY + verticalOffset))path.addLine(to: CGPoint(x: rect.maxX - horizontalOffset, y: rect.minY + verticalOffset))path.addLine(to: CGPoint(x: rect.maxX, y: rect.maxY))path.addLine(to: CGPoint(x: rect.minX, y: rect.maxY))path.addLine(to: CGPoint(x: rect.minX + horizontalOffset, y: rect.minY + verticalOffset))}}
}/// 自定义形状
struct CustomShapesBootcamp: View {var body: some View {VStack(spacing: 20) {// triangleView// imageViewdiamondViewtrapezoidView}}/// 三角形var triangleView: some View{Triangle().stroke(style: StrokeStyle(lineWidth: 5, lineCap: .round, dash: [10]))//.trim(from: 0, to: 0.5).foregroundColor(.accentColor).frame(width: 300, height: 300)}/// 图片设置var imageView: some View{Image("therock").resizable().scaledToFill().frame(width: 300, height: 300).clipShape(Triangle().rotation(Angle(degrees: 180)))}/// 菱形var diamondView: some View{Diamond()//.trim(from: 0, to: 0.5).fill(LinearGradient(gradient: Gradient(colors: [Color.red, Color.blue]), startPoint: .leading, endPoint: .trailing)).frame(width: 300, height: 300)}/// 梯形var trapezoidView: some View{Trapezoid().frame(width: 300, height: 300 * 0.5)}
}struct CustomShapesBootcamp_Previews: PreviewProvider {static var previews: some View {CustomShapesBootcamp()}
}

  1.3 效果图:

       

2. CustomCurves 自定义曲线视图

  2.1 创建自定义曲线视图 CustomCurvesBootcamp.swift

import SwiftUI/// 自定义曲线
struct CustomCurvesBootcamp: View {var body: some View {VStack(spacing: 20) {//arcSampleView//shapeWithArcView//quadSampleViewwaterView}}/// 弧形样本var arcSampleView :some View{ArcSample().stroke(lineWidth: 5).frame(width: 200, height: 200)}///  弧形形状var shapeWithArcView: some View{ShapeWithArc().frame(width: 200, height: 200)//.rotationEffect(Angle(degrees: 90))}/// 四边曲线样本var quadSampleView: some View{QuadSample().frame(width: 200, height: 200).padding(.top, 30)}/// 水波浪var waterView: some View{WaterShape().fill(LinearGradient(gradient: Gradient(colors: [Color(#colorLiteral(red: 0.2196078449, green: 0.007843137719, blue: 0.8549019694, alpha: 1)), Color(#colorLiteral(red: 0.06274510175, green: 0, blue: 0.1921568662, alpha: 1))]),startPoint: .topLeading,endPoint: .bottomTrailing)).ignoresSafeArea()}
}struct CustomCurvesBootcamp_Previews: PreviewProvider {static var previews: some View {CustomCurvesBootcamp()}
}/// 弧形样本
struct ArcSample: Shape{func path(in rect: CGRect) -> Path {Path { path inpath.move(to: CGPoint(x: rect.maxX, y: rect.midY))path.addArc(center: CGPoint(x: rect.midX, y: rect.midY),radius: rect.height / 2,startAngle: Angle(degrees: 0),endAngle: Angle(degrees: 40),clockwise: true)}}
}/// 弧形形状
struct ShapeWithArc: Shape{func path(in rect: CGRect) -> Path {Path { path in// 上 左path.move(to: CGPoint(x: rect.minX, y: rect.minY))// 上 右path.addLine(to: CGPoint(x: rect.maxX, y: rect.minY))// 中 右path.addLine(to: CGPoint(x: rect.maxX, y: rect.midY))// 下path.addArc(center: CGPoint(x: rect.midX, y: rect.midY),radius: rect.height * 0.5,startAngle: Angle(degrees: 0),endAngle: Angle(degrees: 180),clockwise: false)//path.addLine(to: CGPoint(x: rect.midX, y: rect.maxY))// 中 左path.addLine(to: CGPoint(x: rect.minX, y: rect.midY))}}
}/// 四边曲线形样本
struct QuadSample: Shape{func path(in rect: CGRect) -> Path {Path { path inpath.move(to: .zero)// 添加四边形曲线path.addQuadCurve(to: CGPoint(x: rect.midX, y: rect.midY),control: CGPoint(x: rect.maxX - 50, y: rect.minY - 100))}}
}/// 水波浪形状
struct WaterShape: Shape{func path(in rect: CGRect) -> Path {Path { path inpath.move(to: CGPoint(x: rect.minX, y: rect.midY))// 添加四边形曲线path.addQuadCurve(to: CGPoint(x: rect.midX, y: rect.midY),control: CGPoint(x: rect.width * 0.25, y: rect.height * 0.40))path.addQuadCurve(to: CGPoint(x: rect.maxX, y: rect.midY),control: CGPoint(x: rect.width * 0.75, y: rect.height * 0.60))path.addLine(to: CGPoint(x: rect.maxX, y: rect.maxY))path.addLine(to: CGPoint(x: rect.minX, y: rect.maxY))}}
}

  2.2 效果图:

       

3. AnimateableData 根据数据的变化设置动画效果

  3.1 创建数据变化的动画 AnimateableDataBootcamp.swift

import SwiftUI/// 数据变化动画
struct AnimateableDataBootcamp: View {@State private var animate: Bool = falsevar body: some View {// rectangleWithSingleCornerAnimationpacmanView}/// 一个圆角的矩形动画 Viewvar rectangleWithSingleCornerAnimation: some View{ZStack {// RoundedRectangle(cornerRadius: animate ? 60 : 0)RectangleWithSingleCornerAnimation(cornerRadius: animate ? 60 : 0).frame(width: 250, height: 250)}.onAppear {// 添加动画withAnimation(Animation.linear(duration: 2.0).repeatForever()) {animate.toggle()}}}/// 吃豆人动画var pacmanView: some View{Pacman(offsetAmount: animate ? 20 : 0).frame(width: 250, height: 250).onAppear {// 添加动画withAnimation(Animation.easeInOut.repeatForever()) {animate.toggle()}}}
}/// 一个圆角的矩形动画
struct RectangleWithSingleCornerAnimation :Shape{var cornerRadius: CGFloat// 自带动画数据var animatableData: CGFloat {get { cornerRadius }set { cornerRadius = newValue }}func path(in rect: CGRect) -> Path {Path { path inpath.move(to: .zero)path.addLine(to: CGPoint(x: rect.maxX, y: rect.minY))path.addLine(to: CGPoint(x: rect.maxX, y: rect.maxY - cornerRadius))// 添加曲线path.addArc(center: CGPointMake(rect.maxX - cornerRadius, rect.maxY - cornerRadius),radius: cornerRadius,startAngle: Angle(degrees: 0),endAngle: Angle(degrees: 360),clockwise: false)path.addLine(to: CGPoint(x: rect.maxX - cornerRadius, y: rect.maxY))path.addLine(to: CGPoint(x: rect.minX, y: rect.maxY))}}
}/// 吃豆人动画
struct Pacman: Shape{var offsetAmount: Doublevar animatableData: Double{get{ offsetAmount }set{ offsetAmount = newValue}}func path(in rect: CGRect) -> Path {Path { path inpath.move(to: CGPoint(x: rect.midX, y: rect.minY))path.addArc(center: CGPoint(x: rect.midX, y: rect.minY),radius: rect.height * 0.5,startAngle: Angle(degrees: offsetAmount),endAngle: Angle(degrees: 360 - offsetAmount),clockwise: false)}}
}struct AnimateableDataBootcamp_Previews: PreviewProvider {static var previews: some View {AnimateableDataBootcamp()}
}

  3.2 效果图:

       

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

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

相关文章

云原生网关可观测性综合实践

云原生网关可观测性综合实践

作者：钰诚 可观测性 可观测性（Observability）是指系统、应用程序或服务的运行状态、性能和行为能够被有效地监测、理解和调试的能力。 随着系统架构从单体架构到集群架构再到微服务架构的演进，业务越来越庞大，也越来…
阅读更多...
数字孪生在制造运行管理（MOM）的七大应用场景

数字孪生在制造运行管理（MOM）的七大应用场景

数字经济时代，数字孪生作为实现各行各业智能化、数字化的重要手段之一，受到了各方的广泛重视。随着各项关键使能技术的不断发展，数字孪生的应用价值有望得到进一步释放。这些关键使能技术包括建模、渲染、仿真、物联网、虚拟调试、可视化等&a…
阅读更多...
02_单片机及开发板介绍

02_单片机及开发板介绍

单片机简介 单片机，又称为微控制器（Microcontroller），是一种集成了微处理器核心、存储器、输入/输出接口及各种功能模块的集成电路芯片。它通常由中央处理器（CPU）、存储器、输入/输出接口以及各种外设组成&…
阅读更多...
文献阅读快速法-ChatPDF

文献阅读快速法-ChatPDF

如题，直接提供给大家一款能够快速阅读文档的好工具——iTextMaster。 iTextMaster是一款免费的pdf阅读浏览器，上传pdf文档后等待几秒钟，AI就会自动反馈给用户关于文档的摘要总结。十分的方便且实用。 ChatPDF为您提供简洁的文档摘要。对于那…
阅读更多...
【算法|动态规划No.21】leetcode494. 目标和

【算法|动态规划No.21】leetcode494. 目标和

个人主页：兜里有颗棉花糖 欢迎 点赞👍 收藏✨ 留言✉ 加关注💓本文由 兜里有颗棉花糖 原创 收录于专栏【手撕算法系列专栏】【LeetCode】 🍔本专栏旨在提高自己算法能力的同时，记录一下自己的学习过程，希望…
阅读更多...
8月19日PMP成绩，预计10月16日公布！附查询入口、流程

8月19日PMP成绩，预计10月16日公布！附查询入口、流程

PMP的考试成绩一般在考后6-8周即可查询，8月PMP的成绩预计会在北京时间10月16日晚上公布，具体时间以官方公告为准。 如何查询8月考试成绩？ 渠道一：收到PMI邮件提醒 当你注册PMI所使用的邮箱收到一封PMI发来的，标题为…
阅读更多...
全波形反演的目标和技术

全波形反演的目标和技术

本篇文章主要讲述了全波形反演的目标和可能用到的方法，对其概念进行解释，以加深理解。若有不正确的地方，欢迎批评指正。 一. 全波形反演的目标: 1. 如何保障模型的拟合能力? 2. 如何保障模型的泛化能力? 3. 如何使结果 (速度模型) 满足物理…
阅读更多...
Scrapy框架中的Middleware扩展与Scrapy-Redis分布式爬虫

Scrapy框架中的Middleware扩展与Scrapy-Redis分布式爬虫

在爬虫开发中，Scrapy框架是一个非常强大且灵活的选择。在本文中，我将与大家分享两个关键的主题：Scrapy框架中的Middleware扩展和Scrapy-Redis分布式爬虫。这些主题将帮助你更好地理解和应用Scrapy框架，并提升你的爬虫开发技能。 …
阅读更多...
【位运算】必知必会：二进制位的原码反码补码转换 以及 按位与、按位或|、异或^

【位运算】必知必会：二进制位的原码反码补码转换 以及 按位与、按位或|、异或^

二进制位的原码反码补码转换 以及 按位与&、按位或|、异或^ 一、二进制位的原码、反码、补码转换1.机器数2.原码3.反码4.补码 二、按位与&、按位或|、异或^ 最近在练习LeetCode上的算法题，遇到了位运算求解的问题，作以复习总结。 一、二进制位的…
阅读更多...
『PyQt5-Qt Designer篇』｜ 13 Qt Designer中如何给工具添加菜单和工具栏？

『PyQt5-Qt Designer篇』｜ 13 Qt Designer中如何给工具添加菜单和工具栏？

13 Qt Designer中如何给工具添加菜单和工具栏？ 1 创建默认窗口2 添加菜单栏3 查看和调用1 创建默认窗口 当新创建一个窗口的时候，默认会显示有：菜单栏和状态栏，如下： 可以在菜单栏上右键-移除菜单栏： 可以在菜单栏上右键-移除状态栏： 2 添加菜单栏 在窗口上，右键-创建…
阅读更多...
软件测试定位bug方法+定位案例（详解）

软件测试定位bug方法+定位案例（详解）

1、问题bug定位技巧 首先，作为开发也好，测试也好，定位问题有一个总的思路，而这个思路是和数据的走向一致的。 大致是这样： 用户层面问题 -> Web页面/软件界面 -> 中间件 -> 后端服务 -> 代码 -> 数据…
阅读更多...
【Kubeedge小白安装教程】Centos7.9+K8Sv1.22.17(kubeadm)+Kubeedgev1.13.1部署教程详解----亲测过

【Kubeedge小白安装教程】Centos7.9+K8Sv1.22.17(kubeadm)+Kubeedgev1.13.1部署教程详解----亲测过

第一：部署kubernetes1.22版本 这里部署k8s版本为1.22或者1.23版本。这里参考kubeedge支持的程度，选择1.22版本，后续会支持更高的k8s版本。 相关部署环境及部署组件： 主机名ip地址节点类型系统版本k8s-master192.168.0.61master…
阅读更多...
简易的慢SQL自定义告警实战经验（支持多数据源）

简易的慢SQL自定义告警实战经验（支持多数据源）

背景 对于慢SQL相信大家都不陌生了，一旦遇到后，相信大家会很快的提供出来对应的优化方法、索引优化建议工具使用等等，对于此我相信大家已经熟悉的不能再熟悉了，但是比较不尽人意的是：在此之前我们往往是花费了大量时间才发现造成系统出现问题的是慢SQL引起的，风险自然而…
阅读更多...
如何正确维护实验室超声波清洗器？

如何正确维护实验室超声波清洗器？

实验室一直被视为一个严谨而严肃的场所，实验应遵循一定的步骤，使用的设备也经历了详细的选择，如实验室超声波清洗机，其特点远强于一般类型的清洗机。专门负责采购的实验室人员一般对优质服务的实验室超声波清洗机印象深刻&#xf…
阅读更多...
故障维修无忧服务：OLED透明拼接屏的专业技术支持与保修服务

故障维修无忧服务：OLED透明拼接屏的专业技术支持与保修服务

OLED透明拼接屏作为未来显示技术的领军者，以其卓越的画质和全方位的优势在市场上备受推崇。 本文将深入探讨OLED透明拼接屏的画质特点和独有的优势，并为您提供选购指南、价格表以及故障维修服务，助您了解并选择最适合的OLED透明拼接屏。 一、…
阅读更多...
使用CFimagehost源码搭建无需数据库支持的PHP免费图片托管私人图床

使用CFimagehost源码搭建无需数据库支持的PHP免费图片托管私人图床

文章目录 1.前言2. CFImagehost网站搭建2.1 CFImagehost下载和安装2.2 CFImagehost网页测试2.3 cpolar的安装和注册 3.本地网页发布3.1 Cpolar临时数据隧道3.2 Cpolar稳定隧道（云端设置）3.3.Cpolar稳定隧道（本地设置） 4.公网访问测…
阅读更多...
NPM 常用命令（十二）

NPM 常用命令（十二）

目录 1、npm unpublish 1.1 使用语法 1.2 描述 2、npm unstar 2.1 使用语法 3、npm update 3.1 使用语法 3.2 描述 3.3 示例 插入符号依赖 波浪号依赖 低于 1.0.0 的插入符号依赖 子依赖 更新全局安装的包 4、npm version 4.1 使用语法 5、npm view 5.1 使用语…
阅读更多...
Raven2靶机渗透

Raven2靶机渗透

1. 信息收集 1.1 主机探测 sudo arp-scan -l1.2 端口扫描 nmap -p- -A 192.168.16.185开放了80端口，尝试登录网址查看信息，通过浏览器插件找出指纹 1.3 目录扫描 访问登录界面，发现remember Me怀疑是shiro界面 登录/vendor/界面&#xff0…
阅读更多...
「深入探究Web页面生命周期：DOMContentLoaded、load、beforeunload和unload事件」

「深入探究Web页面生命周期：DOMContentLoaded、load、beforeunload和unload事件」

🎬 江城开朗的豌豆：个人主页 🔥 个人专栏 :《 VUE 》 《 javaScript 》 📝 个人网站 :《 江城开朗的豌豆🫛 》 ⛺️ 生活的理想，就是为了理想的生活 ! 目录 引言 1. DOMContentLoaded 1.1 属性 1.2 A…
阅读更多...
【aloam】ubuntu20.04 配置 aloam 环境，编译过程报错及成功解决方法

【aloam】ubuntu20.04 配置 aloam 环境，编译过程报错及成功解决方法

为什么写这篇博客 ALOAM是slamer的必经之路，official提供的基础环境推荐ubuntu16.04或者18.04，而我用20.04已经有一段时间了，不方便换，但由于其他原因也不得不去配置。过程中出现了几个问题，在这里也就20分钟&#xf…
阅读更多...
最新文章

Copyright @ 2022~2023