SwiftUI 中创建反弹动画的实现
SwiftUI 中的动画
在写动画之前呢先简单回顾一下 SwiftUI 中动画的几个要点:
- 动画是 view 发生变化时的渐变效果
- SwiftUI 动画分为隐式动画( .animation() )与显式动画( withAnimation() )两种
- 隐式动画是给 view 加动画,view 所有的能动画的变化都能被隐式动画影响
- 显式动画是针对某个变化进行动画,能精准控制。
- view 的插入和移除通过过渡( transition )来做效果,可以组合多个过渡或自定义过渡
- 要构建自定义动画,我们需要实现一个可动画的 view 修饰器(遵守 AnimatableModier 协议)或者实现一个 GeometryEffect ,并将可动画的属性通过 animatableData 暴露出来
反弹动画
反弹动画属于“起始点和终止点相等”的动画,所以不能够通过 SwiftUI 中内建的动画来实现(因为这个 view 从结果来看没有发生变化)
我们先来构建反弹动画修饰器的框架如下:
struct Bounce: AnimatableModifier { var animCount: CGFloat = 0 var amplitude: CGFloat = 10 // 振幅 var animatableData: CGFloat { get { animCount } set { animCount = newValue } } func body(content: Content) -> some View { // change view to animate } }
下面一步一步来
实现动画曲线
实现 body 方法,好让 times 每次增加时 view 能以反弹的方式进行动画。一次反弹就是 view 向上弹起又落下,下面是动画曲线大致的样子:
三角函数是 y = -abs(sin x)
,所以 body 方法这样实现:
struct Bounce: AnimatableModifier { ... func body(content: Content) -> some View { let offset: CGFloat = -abs(sin(animCount * .pi * 2) * amplitude) return content.offset(y: offset) } }
测试代码:
struct BouncingView: View { @State var taps = 0 var body: some View { Button(action: { withAnimation(Animation.easeInOut(duration: 1)) { taps += 1 } }, label: { RoundedRectangle(cornerRadius: 15) .modifier(Bounce(animCount: CGFloat(taps))) }) .frame(width: 100, height: 100) } }
点击按钮,就能弹两次了~~
这个 @State var taps
其实并没有什么实际的意义,只是为了触发动画。
因为 SwiftUI 里只有 View 的状态发生变化才会触发动画,而无法通过某个事件来触发;而我们的动画是一个初始状态和结束状态相等的情况,并没有状态的变化,所以这里强行把点击的次数作为 View 状态的变化来触发动画。
我找了好久有没有更优雅的方式来解决这个问题,然而并没有找到 = =b
View 扩展
暴露给外面的 animCount
应该是一个 Int 才对,那么就增加一个 animValue
来代替它
struct Bounce: AnimatableModifier { let animCount: Int var animValue: CGFloat var amplitude: CGFloat = 10 // 振幅 init(animCount: Int) { self.animCount = animCount self.animValue = CGFloat(animCount) } var animatableData: CGFloat { get { animValue } set { animValue = newValue } } func body(content: Content) -> some View { let offset: CGFloat = -abs(sin(animValue * .pi * 2) * amplitude) return content.offset(y: offset) } }
因为 animValue
被隐藏起来了,所以需要初始化方法
为了方便使用,再添加一个 View 的扩展方法:
extension View { func bounce(animCount: Int) -> some View { self.modifier(Bounce(animCount: animCount)) } }
增加弹性
现在虽然能弹了,但是相对还比较生硬,就想在 View “落地“后再给它增加振幅逐步衰减的几次反弹;一开始尝试了简单的减半反弹,实验证明观感更差,看起来有点难受。
我们实际生活中的反弹的振幅变化应该是符合 阻尼正弦波 的,参考链接里的公式,修改如下:
struct Bounce: AnimatableModifier { let animCount: Int var animValue: CGFloat var amplitude: CGFloat // 振幅 var bouncingTimes: Int init(animCount: Int, amplitude: CGFloat = 10, bouncingTimes: Int = 3) { self.animCount = animCount self.animValue = CGFloat(animCount) self.amplitude = amplitude self.bouncingTimes = bouncingTimes } var animatableData: CGFloat { get { animValue } set { animValue = newValue } } func body(content: Content) -> some View { let t = animValue - CGFloat(animCount) let offset: CGFloat = -abs(pow(CGFloat(M_E), -t) * sin(t * .pi * CGFloat(bouncingTimes)) * amplitude) return content.offset(y: offset) } } extension View { func bounce(animCount: Int, amplitude: CGFloat = 10, bouncingTimes: Int = 3) -> some View { self.modifier(Bounce(animCount: animCount, amplitude: amplitude, bouncingTimes: bouncingTimes)) } }
这里我们还增加了 bouncingTimes
作为弹跳次数的参数,振幅也作为参数开放给用户;
由于阻尼正弦波是逐步衰减的,为了每次点击的弹跳都一样,所以得用 animValue - CGFloat(animCount)
作为阻尼正弦波函数的参数。
测试代码修改如下:
struct BouncingView: View { @State var taps = 0 var body: some View { Button(action: { withAnimation(Animation.linear(duration: 1)) { taps += 1 } }, label: { RoundedRectangle(cornerRadius: 15) .bounce(animCount: taps) }) .frame(width: 100, height: 100) } }
实际效果如下:
到此这篇关于SwiftUI 中创建反弹动画的实现的文章就介绍到这了,更多相关SwiftUI 反弹动画内容请搜索猪先飞以前的文章或继续浏览下面的相关文章希望大家以后多多支持猪先飞!
相关文章
- 这篇文章主要给大家介绍了关于swift中利用runtime交换方法的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧。...2020-06-30
- 有时候,我们需要一个显示文字,又想这些文字与边界之间有自定义的边距,所以下面这篇文章主要给大家介绍了关于Swift设置UILabel内边距的相关资料,需要的朋友可以参考下...2021-10-14
- 这篇文章主要给大家介绍了关于swift中@UIApplicationMain的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧。...2020-06-30
- 给大家详细讲解了IOS开发中swift语言xcworkspace多项目管理的方法和介绍,一起参考一下。...2020-06-30
Swift 中如何使用 Option Pattern 改善可选项的 API 设计
这篇文章主要介绍了Swift 中如何使用 Option Pattern 改善可选项的 API 设计,帮助大家更好的进行ios开发,感兴趣的朋友可以了解下...2020-10-23- 这篇文章主要为大家详细介绍了Swift实现多个TableView侧滑与切换效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2020-06-30
- 这篇文章主要介绍了如何使用Swift来实现一个命令行工具,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2020-06-30
- 这篇文章主要给大家介绍了关于Swift中命名空间的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2020-06-30
浅析Swift中struct与class的区别(汇编角度底层分析)
这篇文章主要介绍了Swift中struct与class的区别 ,本文从汇编角度分析struct与class的区别,通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2020-06-30- 最近有一个需求,就是将图片先等比例缩放到指定大小,然后将空余出来空间填充为黑色,返回指定大小的图片。本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧...2021-11-02
- 这篇文章主要给大家介绍了关于Swift中优雅的处理闭包导致的循环引用的相关资料,文中通过示例代码介绍的非常详细,对大家学习或者使用Swift具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧...2020-06-30
- 这篇文章主要为大家详细介绍了Swift实现倒计时5秒功能,在“登录”和“注册”页面也有相似功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2020-06-30
- 这篇文章主要介绍了Swift 使用 Observe 监测页面滚动的实现方法,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2020-06-30
- 这篇文章主要介绍了Swift在控件中添加点击手势的方法,本文讲解如何在tableview的headerview中添加点击手势的方法,需要的朋友可以参考下...2020-06-30
- 有很多地方会用到类型擦除,并且它们的作用的各不相同。下面这篇文章主要给大家介绍了关于Swift如何使用类型擦除及自定义的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考下...2020-06-30
- 这篇文章主要给大家介绍了关于Swift利用CoreData如何存储多种数据类的通讯录的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧。...2020-06-30
- 这篇文章主要介绍了SwiftUI 中创建反弹动画的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2020-10-30
- 这篇文章主要介绍了Swift中动态调用实例方法介绍,在Swift中有一类很有意思的写法,可以让我们不直接使用实例来调用这个实例上的方法,而是通过类型取出这个类型的某个实例方法的签名,然后再通过传递实例来拿到实际需要调用的方法,需要的朋友可以参考下...2020-06-30
iOS Swift UICollectionView横向分页滚动,cell左右排版问题详解
UICollectionView是iOS中比较常见的一个控件,这篇文章主要给大家介绍了关于iOS Swift UICollectionView横向分页滚动,cell左右排版问题的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考借鉴,下面随小编来一起学习学习吧。...2020-06-30- 本篇文章主要介绍了Swift中如何避免循环引用的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧...2020-06-30