SwiftUI中自定义Shape与AnimateableData的使用

2024-06-13 09:04

本文主要是介绍SwiftUI中自定义Shape与AnimateableData的使用,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

上一篇文章主要介绍了一下在SwiftUI中如何自定义Shape,本篇文章主要介绍Shape中的
一个关键的属性AnimatableData,它用于定义可以被动画化的数据。通过实现 Animatable 协议,可以让自定义视图或图形响应动画变化。
AnimatableDataAnimatable 协议的一部分,它指定了哪些数据是可以进行动画处理的,而Shape协议继承了Animatable协议。

AnimatableData 是一个属性,通常是一个简单的数据类型(如 CGFloatDouble),或者是一个符合 VectorArithmetic 协议的类型。这个属性表示了视图或图形中那些需要被动画化的部分。当这些数据发生变化时,SwiftUI 会自动计算中间帧,从而创建平滑的动画效果。

要使用 AnimatableData,需要:

  1. 定义一个遵循 Shape 的结构体,即自定义一个Shape。
  2. 实现 Animatable 协议(默认已经实现),只需指定animatableData属性。

下面是一个示例,展示如何创建一个圆角矩形,其圆角大小可以通过动画改变:

struct AnimatableDataDemo: View {@State private var cornerRadius: CGFloat = 0var body: some View {AnimatableRoundedRectangle(cornerRadius: cornerRadius).frame(width: 200, height: 200).onTapGesture {withAnimation(.easeInOut(duration: 1.0).repeatForever()) {cornerRadius = cornerRadius == 0 ? 50 : 0}}}
}struct AnimatableRoundedRectangle: Shape {var cornerRadius: CGFloatvar animatableData: CGFloat {get { cornerRadius }set { cornerRadius = newValue }}func path(in rect: CGRect) -> Path {let path = Path(roundedRect: rect, cornerRadius: cornerRadius)return path}
}

在自定义动画AnimatableRoundedRectangle中,定义了cornerRadius属性,用于改变圆角大小,animatableData通过getset方法对cornerRadius属性读取和赋值,这样就将这个cornerRadius属性标记为animatableData,当cornerRadius变化时,就会有动画了。

上面代码中对cornerRadius添加了动画,并且动画反复执行。
在这里插入图片描述
如果我们舍弃animatableData这块,不将cornerRadius进行标记为animatableData,如下:

struct AnimatableRoundedRectangle: Shape {var cornerRadius: CGFloatfunc path(in rect: CGRect) -> Path {let path = Path(roundedRect: rect, cornerRadius: cornerRadius)return path}
}

运行效果如下。
在这里插入图片描述
当点击后,图形的圆角立即变化了,但是没有执行动画。

通过使用 AnimatableData,可以指定哪些属性的变化应该被动画化。这使得创建复杂的自定义动画变得简单而直接,极大地增强了 UI 的交互性和视觉吸引力。

最后,希望能够帮助到有需要的朋友,如果觉得有帮助,还望点个赞,添加个关注,笔者也会不断地努力,写出更多更好用的文章。

这篇关于SwiftUI中自定义Shape与AnimateableData的使用的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1056855

相关文章

Java使用Mail构建邮件功能的完整指南

《Java使用Mail构建邮件功能的完整指南》JavaMailAPI是一个功能强大的工具,它可以帮助开发者轻松实现邮件的发送与接收功能,本文将介绍如何使用JavaMail发送和接收邮件,希望对大家有所... 目录1、简述2、主要特点3、发送样例3.1 发送纯文本邮件3.2 发送 html 邮件3.3 发送带

使用DeepSeek搭建个人知识库(在笔记本电脑上)

《使用DeepSeek搭建个人知识库(在笔记本电脑上)》本文介绍了如何在笔记本电脑上使用DeepSeek和开源工具搭建个人知识库,通过安装DeepSeek和RAGFlow,并使用CherryStudi... 目录部署环境软件清单安装DeepSeek安装Cherry Studio安装RAGFlow设置知识库总

Python FastAPI入门安装使用

《PythonFastAPI入门安装使用》FastAPI是一个现代、快速的PythonWeb框架,用于构建API,它基于Python3.6+的类型提示特性,使得代码更加简洁且易于绶护,这篇文章主要介... 目录第一节:FastAPI入门一、FastAPI框架介绍什么是ASGI服务(WSGI)二、FastAP

Spring-AOP-ProceedingJoinPoint的使用详解

《Spring-AOP-ProceedingJoinPoint的使用详解》:本文主要介绍Spring-AOP-ProceedingJoinPoint的使用方式,具有很好的参考价值,希望对大家有所帮... 目录ProceedingJoinPoijsnt简介获取环绕通知方法的相关信息1.proceed()2.g

Maven pom.xml文件中build,plugin标签的使用小结

《Mavenpom.xml文件中build,plugin标签的使用小结》本文主要介绍了Mavenpom.xml文件中build,plugin标签的使用小结,文中通过示例代码介绍的非常详细,对大家的学... 目录<build> 标签Plugins插件<build> 标签<build> 标签是 pom.XML

JAVA虚拟机中 -D, -X, -XX ,-server参数使用

《JAVA虚拟机中-D,-X,-XX,-server参数使用》本文主要介绍了JAVA虚拟机中-D,-X,-XX,-server参数使用,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有... 目录一、-D参数二、-X参数三、-XX参数总结:在Java开发过程中,对Java虚拟机(JVM)的启动参数进

Java中使用注解校验手机号格式的详细指南

《Java中使用注解校验手机号格式的详细指南》在现代的Web应用开发中,数据校验是一个非常重要的环节,本文将详细介绍如何在Java中使用注解对手机号格式进行校验,感兴趣的小伙伴可以了解下... 目录1. 引言2. 数据校验的重要性3. Java中的数据校验框架4. 使用注解校验手机号格式4.1 @NotBl

Python使用DeepSeek进行联网搜索功能详解

《Python使用DeepSeek进行联网搜索功能详解》Python作为一种非常流行的编程语言,结合DeepSeek这一高性能的深度学习工具包,可以方便地处理各种深度学习任务,本文将介绍一下如何使用P... 目录一、环境准备与依赖安装二、DeepSeek简介三、联网搜索与数据集准备四、实践示例:图像分类1.

Linux系统之authconfig命令的使用解读

《Linux系统之authconfig命令的使用解读》authconfig是一个用于配置Linux系统身份验证和账户管理设置的命令行工具,主要用于RedHat系列的Linux发行版,它提供了一系列选项... 目录linux authconfig命令的使用基本语法常用选项示例总结Linux authconfi

SpringBoot自定义注解如何解决公共字段填充问题

《SpringBoot自定义注解如何解决公共字段填充问题》本文介绍了在系统开发中,如何使用AOP切面编程实现公共字段自动填充的功能,从而简化代码,通过自定义注解和切面类,可以统一处理创建时间和修改时间... 目录1.1 问题分析1.2 实现思路1.3 代码开发1.3.1 步骤一1.3.2 步骤二1.3.3