SwiftUI 中的事件触发的动画

2024-03-16

SwiftUI 动画通常由状态驱动,这很好,但有时您确实想触发临时(通常是可逆的)动画来响应某些事件。例如,我想在点击按钮时暂时增加按钮的大小(释放按钮时大小的增加和减小都应作为单个动画发生),但我无法弄清楚这一点。

我认为它可以与转换结合在一起,但不是很好。另外,如果我制作一个使用自动反转的动画,它会增加大小,减小大小,然后跳回到增加的状态。


这也是我所热衷的事情。

到目前为止,我的解决方案取决于应用几何效果修饰符并滥用其方法这一事实效果值在某些动画期间连续调用。因此,期望的效果实际上是从 0..1 开始的插值的变换,在 0.5 中具有主要效果,在 0 或 1 中没有效果

它工作得很好,它适用于所有视图而不仅仅是按钮,不需要依赖触摸事件或按钮样式,但在我看来仍然有点像黑客。

随机旋转和缩放效果的示例:

代码示例:

struct ButtonEffect: GeometryEffect {

    var offset: Double // 0...1

    var animatableData: Double {
        get { offset }
        set { offset = newValue }
    }

    func effectValue(size: CGSize) -> ProjectionTransform {

        let effectValue = abs(sin(offset*Double.pi))
        let scaleFactor = 1+0.2*effectValue

        let affineTransform = CGAffineTransform(rotationAngle: CGFloat(effectValue)).translatedBy(x: -size.width/2, y: -size.height/2).scaledBy(x: CGFloat(scaleFactor), y: CGFloat(scaleFactor))

        return ProjectionTransform(affineTransform)
    }
}

struct ButtonActionView: View {
    @State var animOffset: Double = 0
    var body: some View {
        Button(action:{
            withAnimation(.spring()) {
                self.animOffset += 1
            }
        })
        {
            Text("Press ME")
                .padding()
        }
        .background(Color.yellow)
        .modifier(ButtonEffect(offset: animOffset))
    }
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

SwiftUI 中的事件触发的动画 的相关文章

  • 针对 iOS 10.3 进行编译,但模块“SwiftUICharts”的最低部署目标为 iOS 13.0

    知道如何仅在 iOS 版本超过 iOS 13 时导入 SwiftUICharts 框架吗 我通过 文件 gt Swift 包 gt 添加包依赖项 添加了此框架 我的应用程序目标必须是 iOS 10 我将此框架导入到 swiftui 控制器中
  • Air for Android:动画导致我的游戏出现滞后

    我正在为 android 平台制作一款 cs6 air 游戏 当我为游戏制作动画时 我使用 3D 软件搅拌器 在 Blender 中 我制作了一个动画 然后将其渲染为一系列 PNG 图像 并将其导入到 Flash CS6 中 因此 如果我要
  • 具有多个 ViewBuilder 的 SwiftUI 视图

    我有一个视图 表示单元格中的一行 如下所示 这很有效 但三个水平元素 图像 标题 副标题 图像 被硬编码为其各自的类型 我想要一个通用的ThreeItemView这可能需要 3Views任何类型并如图所示排列它们 这将允许我将相同的容器布局
  • 由枚举驱动的 SwiftUI 选择器:值未更新

    根据苹果公司的相关文档SwiftUI 中使用 Enum 的选取器 https developer apple com documentation swiftui picker 如果枚举符合Identifiable协议除了CaseIterab
  • 奇怪的 UITableView 插入/删除行动画

    在带有动画 UITableView RowAnimationTop 的 UITableView 中插入 删除 UITableViewCell 时 我看到了奇怪的效果 当要插入的单元格比上面的单元格大得多时 就会发生动画故障 显示模拟器中的故
  • 雷达扫描仪旋转效果

    我正在尝试找出一个可能的解决方案 如何使用 jQuery 和 CSS 创建雷达扫描仪效果 本质上 半透明三角形光束将围绕 div 的中点旋转 这可以用 jQuery 实现吗 还是我应该采取其他方法 我不喜欢使用 gif 动画 你不需要 jQ
  • matlab 中的动画绘图

    我正在尝试创建一个三角形的动画图 最终结果应该是十个三角形 后面跟着两个更大的三角形 后面跟着一条直线 使用matlab文档 https de mathworks com help matlab ref drawnow html 我最终得到
  • NSTextField 弹跳截断的文本而不是换行

    我想知道是否有一种简单的方法来 弹跳 或滚动NSTextField文本太长而无法显示 例如 lt scroll This is a rather large pi ece of text 因此 在此示例中 文本将滚动到末尾 显示消息的其余部
  • SwiftUI:为表单中的单元格添加动画

    我正在尝试动画化我的Form或者更确切地说是其中的细胞 我的问题是 下面的代码给了我一个很好的插入动画 但是对于删除 单元格在看起来很丑陋的延迟后突然被删除 import SwiftUI struct ContentView View St
  • 使用动画过滤 UITableViewCells - iPhone 开发

    这看起来很简单 但到目前为止我还无法找到解决方案 基本上我有一个带有两个选项的分段控件 第一个是默认值 加载时自动显示 选择后会在表视图中显示所有行 第二个是限制显示行的过滤器 这与 iPhone 电话应用程序的 最近 选项卡上使用的设置完
  • 如何在一个元素上实现多个 CSS 过渡?

    这是一个非常简单的问题 但我找不到关于 CSS 转换属性的很好的文档 这是 CSS 片段 nav a text transform uppercase text decoration none color d3d3d3 line heigh
  • SwiftUI ScrollView 无法禁用垂直弹跳?

    初始化程序中有一个带有 ScrollView alwaysBounceVertical false 的属性 但我似乎找不到它了 有谁知道如何禁用 SwiftUI ScrollView 上的垂直弹跳 过度滚动 是的 它已从 ScrollVie
  • 如何将一个 SwiftUI View 作为变量传递给另一个 View 结构

    我正在实施一个very自定义 NavigationLink 称为MenuItem并希望在整个项目中重用它 它是一个符合以下条件的结构体View并实施var body some View其中包含一个NavigationLink 我需要以某种方
  • 垂直 ViewPager 中的动画

    我需要垂直制作这个动画ViewPager https www youtube com watch v wuE 4jjnp3g https www youtube com watch v wuE 4jjnp3g 这是我到目前为止所尝试的 vi
  • 在 UIViewRepresentable CollectionView(包装的 UICollectionView)中使用 UICollectionViewCell 的 SwiftUI 视图

    我必须更换现有的SwiftUI List的视图UICollectionView 因为应用程序设计已更新 并且新设计对于 SwiftUI 来说非常复杂 因此必须作为自定义实现UICollectionViewFlowLayout 所以视图 现在
  • 使用 matplotlib.animation 从 CSV 文件实时绘图 - 数据绘制到第一个输入错误

    我正在尝试绘制来自不断写入 CSV 文件的传感器的数据 虽然成功创建实时绘图 但每个新数据条目都会创建一条延伸到第一个数据条目的附加线 见下文 Python 3 4 脚本 import matplotlib pyplot as plt im
  • 如何在 SwiftUI 中延迟动画?

    我想为两个文本字段设置动画 第二个字段有延迟 但它不起作用 没有延迟 它们同时从位置 100 动画到 0 这是代码 State private var offset CGFloat 100 State private var offset2
  • 通过 Javascript 更改 Webkit 属性?

    请帮助我 可能是因为我对 CSS 动画和 Javascript 相当陌生 但我使用的代码应该更改它的属性 当我运行代码时 它会执行代码中的所有其他操作 除了更改所需 div 的 CSS 属性 我已经尝试了所有这四种方法 但似乎都不起作用 它
  • Android:禁用 1.5 纸杯蛋糕动画过渡

    长话短说 如何禁用活动之间的屏幕转换 如果您愿意的话 我们实现了自己的选项卡处理程序 现在它正在选项卡之间进行转换 这看起来很俗气 谢谢 Chris See android content Intent FLAG ACTIVITY NO A
  • overridePendingTransition() 的替代方法 - Android

    我刚刚发现了 android overrivePendingTransition 方法 它工作正常 但我有以下问题 在设置 显示菜单中 可以选择不显示动画 部分动画或全部动画 该方法仅在设置为全部动画时才有效 我可以绕过它吗 您所说的设置是

随机推荐

  • Django自定义装饰器重定向问题

    我尝试在 Django 中编写一个自定义装饰器 如果用户未通过该页面登录 我想将用户重定向到自定义登录页面 我已经编写了装饰器并调试了它 虽然如果用户未登录 它可以正常工作 但在用户登录后 它会给出错误 The view APPNAME v
  • Playwright locator.evaluateAll 如何返回使用节点 forEach 填充的地图

    我想抢夺所有人的财产
  • 如何从文本文件中读取信息?

    我有数百个文本文件 每个文件中包含以下信息 Auto Corelation Results 1 09 19 18 non Significant STATISTICS FOR MANN KENDELL TEST S 609 VAR S 16
  • 您将如何做到这一点:表格还是 CSS? [关闭]

    就目前情况而言 这个问题不太适合我们的问答形式 我们希望答案得到事实 参考资料或专业知识的支持 但这个问题可能会引发辩论 争论 民意调查或扩展讨论 如果您觉得这个问题可以改进并可能重新开放 访问帮助中心 help reopen questi
  • 如何使用 Jersey(测试框架)将数据源依赖项注入到 RESTful Web 服务中?

    我正在使用 Jersey 构建一个 RESTful Web 服务 该服务依赖 MongoDB 来实现持久性 Web 服务本身连接到默认数据库 但对于单元测试 我想使用单独的测试数据库 我将在 setUp 中填充此测试数据库 运行测试 然后在
  • 每张信用卡的 paypal payer_id 是唯一的吗? [关闭]

    Closed 这个问题是无关 help closed questions 目前不接受答案 我想知道使用同一张信用卡的两次单独付款的 paypal payer id 是否相同 这显然对于检测可能的欺诈交易很有用 请注意 对于 paypal 帐
  • Vim 脚本突出显示大括号等标签的末尾

    我需要一个 Vim 脚本来在光标位于标签开头时突出显示标签的结尾 例如 在 html 标签中 当光标位于标签开头时 它应该突出显示标签结尾 接口应该是通用的 以便可以添加更多标签 如果您将 html vim 文件替换为this http w
  • 空值可以传递给包裹吗?

    是否可以写null to Parcel当分割一个对象时 得到null再次解压时又回来了 假设我们有以下代码 public class Test implements Parcelable private String string null
  • 在调用 Main() 之前 Windows 会做什么?

    Windows 必须做一些事情来解析 PE 标头 将可执行文件加载到内存中 并将命令行参数传递给main Using OllyDbg I have set the debugger to break on main so I could v
  • Twitter API请求限制问题

    我编写了一个小型 java 程序来从 Twitter 下载所有朋友和关注者的个人资料图片 但我收到错误 因为每个 IP 地址每小时只允许 150 个请求 确切的错误是 twitter4j TwitterException 400 The r
  • SELECT 语句中的子查询 (MySQL)

    我正在创建一个 SQL 语句 它将返回一个产品列表以及我在每个商店中可以找到的每种产品的数量 我的表的结构 带有一些示例数据 如下 productID size color stock storeID 1 S RED01 1 BCN 1 S
  • 如何根据单元格值有条件地设置 ReactJs 材料表单元格的样式?

    我在材料表中有一个列 其中包含成功 失败等值 根据这些值 我需要在单元格上应用颜色 如何使用材质表来实现 这个答案是专门针对反应材料表 https material table com 在列部分中 我们需要具有如下所述的内容 因此当在表中呈
  • 调用中参数“coder”缺少参数

    我将自定义 UIButton 编码为 class AccountOpeningButton UIButton required init coder aDecoder NSCoder super init coder aDecoder 我能
  • 无法在当前范围或上下文中解决。确保所有引用的变量都在范围内

    我收到此错误 无法在当前范围或上下文中解析 TblProduct 请确保所有引用的变量都在范围内 加载所需的架构 并且正确引用命名空间 在下面的代码中 我不确定为什么它不能正常工作 我希望有人能够提供帮助 谢谢 private void A
  • 短数组的最佳排序函数

    我正在研究一种处理图片的算法 基本上我将实现一个扩散 每个像素将获得周围 8 个像素的中值 它自己的值 我要做的就是使用该值创建一个包含 9 个整数的数组 对数组进行排序并获取 array 4 处的中值 我仍然不知道该使用什么来解决这个问题
  • 根据需要验证正文中的不可空属性 - AspNetCore 3.1

    我正在尝试验证是否在请求中完全忽略了属性 字段 即 ModelState 无效并且 BadRequest 被发送回客户端 但是我正在努力处理请求主体中的不可空类型 适用于可空类型 Required public string Nullabl
  • 使用 SPARK 证明选择排序算法

    我试图证明我在 Ada 中的选择排序实现是正确的 我尝试了一些循环不变量 但使用 gnatprove 只能证明内部循环的不变量 package body Selection with SPARK Mode is procedure Sort
  • 在 Swift 中设置活动标签栏项目的背景颜色

    如果可能的话 我希望在不使用图像的情况下完成此任务 有没有一种方法可以以编程方式创建图像中显示的效果 而不必将每个选项卡渲染为图像 我在 SO 上审阅的每个问题都将选项卡保存为 JPG 这比我认为应该做的工作要多 Any ideas 我采用
  • 使用gdb将地址转换为行

    我有一个由剥离的应用程序生成的堆栈跟踪 如下所示 Check failure stack trace 0x7f0e442d392d unknown 0x7f0e442d7b1f unknown 0x7f0e442d7067 unknown
  • SwiftUI 中的事件触发的动画

    SwiftUI 动画通常由状态驱动 这很好 但有时您确实想触发临时 通常是可逆的 动画来响应某些事件 例如 我想在点击按钮时暂时增加按钮的大小 释放按钮时大小的增加和减小都应作为单个动画发生 但我无法弄清楚这一点 我认为它可以与转换结合在一