如何为DGActivityIndicatorView新增第33种动画：手把手自定义加载效果

DGActivityIndicatorView 是一款流行的 iOS 加载动画（Loading Spinner）组件库，内置 32 种精美的加载指示器样式。当你发现现有样式不够用时，不必重写整个组件——它的架构非常友好，按照本文 5 个步骤，你就能轻松新增第 33 种自定义加载动画效果。

一、先看懂架构：3 层结构让扩展变得简单 🏗️

在动手之前，花 2 分钟理解 DGActivityIndicatorView 的三层设计，是写好新动画的前提：

核心逻辑就一条链路：你通过枚举指定一种类型 → 工厂方法activityIndicatorAnimationForAnimationType:用switch语句返回对应动画实例 → 动画类在CALayer上执行 Core Animation 动画。

所以，新增动画本质上就是三件事：写一个动画类、注册一个枚举、补一个工厂分支。

二、准备工作：跑通示例项目

先确保示例能正常编译运行，这是最好的验证环境：

git clone https://gitcode.com/gh_mirrors/dg/DGActivityIndicatorView

用 Xcode 打开 DGActivityIndicatorExample.xcodeproj，直接 Run 即可。示例工程的 ViewController.m 用一个数组列出了全部 32 种动画类型，并在屏幕上平铺展示——之后你的新动画也会出现在这里。

💡 环境要求：Xcode 6+、iOS 8.0+，详见 README.md。

三、新增第 33 种动画：完整 5 步教程

假设我们要新增一种名为MyBounce的弹跳动画。

第 1 步：创建动画类

在 DGActivityIndicatorView/Animations/ 目录下新建DGActivityIndicatorMyBounceAnimation.h与.m两个文件，继承基类DGActivityIndicatorAnimation：

// DGActivityIndicatorMyBounceAnimation.h #import "DGActivityIndicatorAnimation.h" @interface DGActivityIndicatorMyBounceAnimation : DGActivityIndicatorAnimation @end

然后在.m中实现协议 DGActivityIndicatorAnimationProtocol 要求的唯一方法，这是整个动画的心脏：

- (void)setupAnimationInLayer:(CALayer *)layer withSize:(CGSize)size tintColor:(UIColor *)tintColor { // 在这里创建 CALayer，配置颜色、圆角， // 并添加 CABasicAnimation / CAKeyframeAnimation 实现动效 }

基类 DGActivityIndicatorAnimation 已提供三个工厂方法（创建基础动画、关键帧动画、动画组），直接调用即可省去样板代码。

不知道怎么写？项目里 32 个现成模板照着抄就行：

• 想看简洁的缩放效果，参考 DGActivityIndicatorDoubleBounceAnimation.m——两个圆点交替缩放，不到 40 行；
• 想看多图层组合效果，参考 DGActivityIndicatorThreeDotsAnimation.m——用动画组同时控制缩放和透明度；
• 想看形状绘制，参考 DGActivityIndicatorBallBeatAnimation.m——用CAShapeLayer+UIBezierPath画圆。

第 2 步：注册枚举类型

打开 DGActivityIndicatorView.h，在DGActivityIndicatorAnimationType枚举末尾新增一行：

DGActivityIndicatorAnimationTypeBallSpinFadeLoader, DGActivityIndicatorAnimationTypeMyBounce // 👈 新增第 33 种

第 3 步：补充工厂映射

打开 DGActivityIndicatorView.m，做两处修改：

1. 在文件头部的 import 区（L11-L43）加入#import "DGActivityIndicatorMyBounceAnimation.h"；
2. 在 switch 分支 中新增：

case DGActivityIndicatorAnimationTypeMyBounce: return [[DGActivityIndicatorMyBounceAnimation alloc] init];

别忘了把新建的两个文件拖进 Xcode 工程并勾选 Target，否则无法参与编译。

第 4 步：在示例工程中验证

打开 ViewController.m，在activityTypes数组末尾追加@(DGActivityIndicatorAnimationTypeMyBounce)，Run 之后就能看到你的第 33 种动画出现在演示网格中。

第 5 步：调用方式（一行代码）

动画写好后，业务代码里的使用方式与其他 32 种完全一致，无需任何额外配置：

DGActivityIndicatorView *view = [[DGActivityIndicatorView alloc] initWithType:DGActivityIndicatorAnimationTypeMyBounce tintColor:[UIColor whiteColor] size:40.0f]; [self.view addSubview:view]; [view startAnimating];

四、写好加载动效的 4 个实用技巧 ✨

通读 32 个内置实现后可以总结出以下规律，帮你更快写出流畅的加载动画：

1. 用beginTime错开节奏：多元素动画中，给每个元素设置不同的beginTime（或duration * i的偏移），就能产生"依次跳动"的韵律感，参考 DoubleBounce 的实现。
2. repeatCount = HUGE_VALF：这是所有内置动画实现无限循环的统一写法。
3. 动画组叠加属性：想同时动缩放和透明度，用CAAnimationGroup把两个关键帧动画打包，参考 ThreeDots 的写法。
4. 尺寸自适应：始终基于传入的size参数计算布局，用户设置不同size时动画会自动重排（见 layoutSubviews）。

五、分发与提交前的检查清单 ✅

• 两个新文件已加入 Xcode Target 的 Compile Sources；
• 枚举、工厂分支、示例数组三处同步修改；
• 不同tintColor、不同size下动画显示正常；
• 若通过 CocoaPods 分发，注意 podspec 的source_files采用DGActivityIndicatorView/**/*.{h,m}通配，新文件放进目录即可被自动收录，发布时记得递增版本号。

其实官方 README 的 TODO 里就写着"Add more different animations"——为这个加载动画库贡献第 33 种样式，正是原作者期待的事情。

写在最后

回顾一下本次扩展的核心路径：

DGActivityIndicatorView 这种"枚举 + 工厂 + 协议"的扩展式设计，是学习 iOS 组件化架构的绝佳范本。动手加上属于你的第 33 种加载动画吧！🚀