8种BOOM轨迹任你选：VHBoomMenuButton直线、抛物线、平抛与随机动画实战

8种BOOM轨迹任你选VHBoomMenuButton直线、抛物线、平抛与随机动画实战【免费下载链接】VHBoomMenuButtonA menu which can ... BOOM! - iOS项目地址: https://gitcode.com/gh_mirrors/vh/VHBoomMenuButtonVHBoomMenuButton 是一款专为 iOS 打造的爆炸式菜单按钮组件点击后子按钮会从中心向四周炸开。而它最让人上头的特性之一就是内置了8 种 BOOM 轨迹动画——直线、4 种开口方向的抛物线、2 种平抛以及完全随机的轨迹一行代码即可切换让你的 App 菜单拥有电影级的弹跳效果。一、什么是 BOOM 轨迹BOOM 轨迹boom trace描述的是子按钮从收起状态爆炸展开、以及再次点击时收回reboom时所走过的运动路径。轨迹类型由一个属性统一控制property (nonatomic, assign) VHBoomEnum boomEnum; // 默认值VHBoomHorizontalThrow2属性定义位于VHBoomMenuButton/BoomMenuButton/VHBoomMenuButton.h其枚举声明在VHBoomMenuButton/BoomMenuButton/Animation/VHBoomEnum.h中Swift 版本则对应VHBoomMenuButtonSwift/BoomMenuButton/Animation/BoomEnum.swift。二、8种轨迹动画一览轨迹枚举值ObjC / Swift视觉效果直线VHBoomStraightLine/.straightLine按钮沿直线匀速滑出干净利落抛物线1VHBoomParabola1/.parabola1开口向下的抛物线按钮砸出抛物线2VHBoomParabola2/.parabola2开口向上的抛物线按钮托出抛物线3VHBoomParabola3/.parabola3开口向右的横向抛物线抛物线4VHBoomParabola4/.parabola4开口向左的横向抛物线平抛1VHBoomHorizontalThrow1/.horizontalThrow1开口向下的平抛模拟重力下坠平抛2VHBoomHorizontalThrow2/.horizontalThrow2开口向上的平抛模拟向上抛起随机VHBoomRandom/.random每次炸开随机选取 7 种轨迹之一永看不腻一个隐藏细节当按钮的起点和终点 X 坐标相同纯垂直展开时引擎会自动强制使用直线轨迹避免数值异常。这个保护逻辑写在VHBoomMenuButton/BoomMenuButton/Animation/VHAnimationManager.m的calculateBoomXY方法中。三、一行代码切换轨迹切换轨迹只需要给boomEnum赋值。Objective-C 写法bmb.boomEnum VHBoomParabola2; // 开口向上的抛物线Swift 写法bmb.boomEnum .horizontalThrow2 // 开口向上的平抛官方 Demo 中就有一个专门体验 8 种轨迹的页面——VHBoomMenuButtonDemo/BoomVC.mSwift 版为VHBoomMenuButtonSwiftDemo/BoomVC.swift。页面左侧是 8 种轨迹的列表右侧按钮把duration拉长到 2 秒点哪一行就能以慢动作欣赏对应轨迹是学习 BOOM 动画的最佳观察室。四、轨迹原理关键帧插值8 种轨迹并非预制的视频动画而是由 VHAnimationManager 在运行时逐帧计算坐标直线对 X、Y 按缓动系数做线性插值抛物线 / 平抛先用三点定出一条二次函数曲线y ax² bx c再沿曲线逐帧取点随机内部用arc4random()随机命中前 7 种之一再递归调用同一套计算逻辑。计算出的坐标数组最终会交给CAKeyframeAnimation播放因此轨迹动画是纯 Core Animation 实现流畅且可叠加其他属性动画。五、收回Reboom时轨迹会镜像吗会。收回动画由同文件中的calculateReboomXY方法单独处理直线、抛物线、随机轨迹直接复用展开时的轨迹而两种平抛轨迹在收回时会交换起终点形成倒放的物理感按钮像被抛回中心一样落回原点。所以平抛轨迹在炸开—收回的完整生命周期里观感最为自然这也是它成为默认值VHBoomHorizontalThrow2的原因。六、进阶轨迹 × 缓动的自由组合轨迹只决定走哪条路走路的节奏由缓动函数Ease决定两者正交、可任意组合bmb.boomEnum VHBoomParabola3; bmb.easeWithName VHEaseOutBounce; // 抛物线 回弹缓动缓动常量清单在VHBoomMenuButton/BoomMenuButton/Animation/VHEase.h中共 40 种Linear、Sine、Quad、Cubic、Quart、Quint、Circ、Expo、Back、Elastic、Bounce 各自都有 In / Out / InOut 三个方向。试试这几个名场面组合.straightLineVHEaseOutBounce按钮落地回弹俏皮感拉满.horizontalThrow1VHEaseInCubic加速下坠重物砸落.parabola2VHEaseInOutElastic橡皮筋式荡出弹性十足.randomVHEaseOutBack每次炸开都带一点过冲惊喜。另外按钮炸开的先后顺序VHOrderEnum也位于VHBoomMenuButton/BoomMenuButton/Animation/VHOrderEnum.h与轨迹、缓动一起构成了 BMB 动画的三件套。七、动手验证的最佳方式打开工程里的两个 Demo 即可上手体验Objective-C DemoVHBoomMenuButtonDemo/BoomVC.mSwift DemoVHBoomMenuButtonSwiftDemo/BoomVC.swift建议的把玩步骤把duration调大到 2 秒慢放观察每种轨迹的曲线形状逐个点击 8 行列表对比抛物线与平抛在垂直/水平展开时的差异切到.random连续点击主按钮感受每次随机轨迹带来的新鲜感随手更换easeWithName体会同一轨迹下不同缓动的性格变化。八、小结VHBoomMenuButton 的 8 种 BOOM 轨迹用极低的成本换来了极强的视觉表现力一个boomEnum属性统一入口切换动画只需一行代码抛物线和平抛基于二次函数实时插值任意按钮布局都能平滑贴合收回轨迹针对平抛做了倒放优化生命周期观感自然轨迹与 40 种 Ease 缓动自由组合玩法远不止 8 种。无论是做分享菜单、快捷面板还是创意交互这套动画体系都能让你用最短的代码路径获得最抓眼的BOOM效果。【免费下载链接】VHBoomMenuButtonA menu which can ... BOOM! - iOS项目地址: https://gitcode.com/gh_mirrors/vh/VHBoomMenuButton创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考