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.rhkb.cn/news/155825.html

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

相关文章

Win10玩游戏老是弹回桌面的解决方法

Win10玩游戏老是弹回桌面的解决方法

在Win10电脑中，用户不仅可以办公，也可以畅玩各种各样的游戏。但是，有时候用户在玩游戏的时候，遇到了游戏老是自己弹回桌面的问题，这样是非常影响游戏体验的，却不清楚具体的解决方法。下面小编给大家带来了简…
阅读更多...
二叉搜索树-- 删除节点-力扣 450 题

二叉搜索树-- 删除节点-力扣 450 题

例题细节已经讲过&#xff08;二叉搜索树的基础操作-CSDN博客&#xff09;&#xff0c;用非递归和递归均可实现&#xff0c;这里只给出递归参考代码&#xff1a; public TreeNode deleteNode(TreeNode node, int key) {if (node null) {return null;}if (key < node.val) …
阅读更多...
算法进阶——字符串的排列

算法进阶——字符串的排列

题目 输入一个长度为 n 字符串&#xff0c;打印出该字符串中字符的所有排列&#xff0c;你可以以任意顺序返回这个字符串数组。 例如输入字符串ABC,则输出由字符A,B,C所能排列出来的所有字符串ABC,ACB,BAC,BCA,CBA和CAB。 数据范围&#xff1a;n<10 要求&#xff1a;空间复…
阅读更多...
【JavaEE初阶】 死锁详解

【JavaEE初阶】 死锁详解

文章目录 &#x1f38b;死锁的概念&#x1f333;死锁的三个典型情况&#x1f6a9;一个线程一把锁&#x1f6a9;两个线程两把锁&#x1f6a9;n个线程m把锁(哲学家就餐问题) &#x1f384;如何破除死锁&#x1f6a9;破坏循环等待 本文重点&#xff1a; 死锁咋回事 死锁的三个典型…
阅读更多...
【SkyWalking】SkyWalking是如何实现跨进程传播链路数据？

【SkyWalking】SkyWalking是如何实现跨进程传播链路数据？

文章目录 一、简介1 为什么写这篇文章2 跨进程传播协议-简介 二、协议1 Standard Header项2 Extension Header项3 Correlation Header项 三、跨进程传播协议的源码分析1 OpenTracing规范2 通过dubbo插件分析跨进程数据传播3 分析跨进程传播协议的核心源码 四、小结参考 一、简介…
阅读更多...
亚马逊，速卖通，敦煌产品测评补单攻略：低成本、高安全实操指南

亚马逊，速卖通，敦煌产品测评补单攻略：低成本、高安全实操指南

随着电商平台的发展和消费者对产品质量的要求提升&#xff0c;测评补单成为了商家们提升销售和用户口碑的关键环节。然而&#xff0c;如何在保持成本低廉的同时确保操作安全&#xff0c;一直是卖家们面临的挑战。今天林哥分享一些实用的技巧和策略&#xff0c;帮助卖家们产品的…
阅读更多...
嵌入式C语言自我修养《内存堆栈管理》学习笔记

嵌入式C语言自我修养《内存堆栈管理》学习笔记

目录 一、Linux环境下的内存管理 二、栈的管理 三、堆内存管理 四、mmap映射区 五、内存泄漏与防范 六、常见的内存错误及检测 C程序中定义的函数、全局变量、静态变量经过编译链接后&#xff0c;分别以section的形式存储在可执行文件的代码段、数据段和BSS段中。当程序运…
阅读更多...
【Zabbix】Zabbix学习笔记

【Zabbix】Zabbix学习笔记

现在Zabbix Server存在的问题&#xff1a; 问题1&#xff1a; Zabbix server: Utilization of discoverer processes over 75% 问题2&#xff1a; Zabbix server: Utilization of icmp pinger processes over 75% 优化的解决办法是修改配置文件把Discovery和Pinger进程数量调大…
阅读更多...
04-RocketMQ源码解读

04-RocketMQ源码解读

目录汇总&#xff1a;RocketMQ从入门到精通汇总 上一篇&#xff1a;03-RocketMQ高级原理 这一部分&#xff0c;我们开始深入RocketMQ的源码。源码的解读是个非常困难的过程&#xff0c;每个人的理解程度都会不一样&#xff0c;也不太可能通过讲解把其中的细节全部讲明白。我们今…
阅读更多...
panads操作excel

panads操作excel

panads简介 pandas是基于Numpy创建的Python包&#xff0c;内置了大量标准函数&#xff0c;能够高效地解决数据分析数据处理和分析任务&#xff0c;pandas支持多种文件的操作&#xff0c;比如Excel&#xff0c;csv&#xff0c;json&#xff0c;txt 文件等&#xff0c;读取文件之…
阅读更多...
unity发布微信小游戏，未找到 game.json报错原因

unity发布微信小游戏，未找到 game.json报错原因

unity发布微信小游戏&#xff0c;未找到 game.json报错原因 同一个问题相隔一年遇到两次&#xff0c;两次原因都不一样&#xff0c;记录一下&#xff0c;以后不要再掉坑里 原因一&#xff1a;申请的appID是小程序不是小游戏 解决方法&#xff1a;需要在程序平台修改服务类目 如…
阅读更多...
哈希应用之布隆过滤器

哈希应用之布隆过滤器

文章目录 1.介绍1.1百度搜索1.2知乎好文1.3自身理解 2.模拟实现2.1文档阅读2.2代码剖析 3.误判率的研究4.布隆过滤器的应用4.1如何找到两个分别有100亿个字符串的文件的交集[只有1G内存].分别给出精确算法和近似算法4.2如何扩展BloomFilter使得它支持删除元素的操作 5.整体代码…
阅读更多...
pytorch中nn.DataParallel多次使用

pytorch中nn.DataParallel多次使用

pytorch中nn.DataParallel多次使用 import torch import torch.nn as nn import torch.optim as optim from torch.utils.data import DataLoader# 定义模型 class MyModel(nn.Module):def __init__(self):super(MyModel, self).__init__()self.fc nn.Linear(10, 1)def forwa…
阅读更多...
ROS为机器人装配激光雷达

ROS为机器人装配激光雷达

移动机器人在环境中获取障碍物的具体位置、房间的内部轮廓等信息都是非常必要的&#xff0c;这些信息是机器人创建地图、进行导航的基础数据&#xff0c;除上面所讲的Kinect&#xff0c;还可以使用激光雷达作为这种场景应用下的传感器。 激光雷达可用于测量机器人和其他物体之间…
阅读更多...
3.简单场景构建

3.简单场景构建

在新建的项目中&#xff0c;默认存在 Main Camera 和 Directional Light两个对象。若是缺失&#xff0c;可通过选择菜单中的 Game Object->Camera 和 Geme Object->Light->Directional Light进行创建。 1.添加地形及底图 通过在Cesium面板中选择 Cesium World Terrai…
阅读更多...
批量文件重命名软件 A Better Finder Rename 11汉化for mac

批量文件重命名软件 A Better Finder Rename 11汉化for mac

A Better Finder Rename 11是一款功能强大的文件重命名工具&#xff0c;可在Mac操作系统上使用。它提供了简单而直观的界面&#xff0c;帮助用户快速批量重命名文件和文件夹&#xff0c;提高文件管理和组织效率。 以下是A Better Finder Rename 11可能提供的一些主要功能和特点…
阅读更多...
设计模式 - 结构型模式考点篇：适配器模式（类适配器、对象适配器、接口适配器）

设计模式 - 结构型模式考点篇：适配器模式（类适配器、对象适配器、接口适配器）

目录 一、适配器模式 一句话概括结构式模式 1.1、适配器模式概述 1.2、案例 1.2.1、类适配器模式实现案例 1.2.2、对象适配器 1.2.3、接口适配器 1.3、优缺点&#xff08;对象适配器模式&#xff09; 1.4、应用场景 一、适配器模式 一句话概括结构式模式 教你将类和对…
阅读更多...
多线程入门

多线程入门

1 创建线程 下面的程序&#xff0c;我们可以用它来创建一个 POSIX 线程&#xff1a; #include <pthread.h> pthread_create (myThread, attr, start_routine, arg) 在这里&#xff0c;pthread_create 创建一个新的线程&#xff0c;并让它可执行。下面是关于参数的说明…
阅读更多...
QT自制软键盘 最完美、最简单、跟自带虚拟键盘一样

QT自制软键盘 最完美、最简单、跟自带虚拟键盘一样

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 QT自制软键盘 最完美、最简单、跟自带虚拟键盘一样 Chapter1 QT自制软键盘 最完美、最简单、跟自带虚拟键盘一样一、本自制虚拟键盘特点二、windows打开系统自带软键盘三、让…
阅读更多...
3、在docker 容器中安装tomcat

3、在docker 容器中安装tomcat

&#xff11;、在服务器上查找tomcat镜像,查看前5条 docker search tomcat --limit 5​​​​​​​ 2、拉取镜像到本地 拉取官方的tomcat到本地 docker pull tomcat:9.0.34-jdk8 3、查看本地镜像 docker images |grep tomcat 4、启动tomcat 服务 使用默认配置 docker ru…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023