TABAnimated: iOS骨架屏动画加载框架详解

钱勃骅

于 2024-08-10 07:48:49 发布

阅读量334

点赞数 3

本文链接：https://blog.csdn.net/gitblog_00918/article/details/141079827

版权

TABAnimated: iOS骨架屏动画加载框架详解

TABAnimatedA skeleton screen loading framework based on native for iOS. (一个由iOS原生组件映射出骨架屏的框架，包含快速植入，低耦合，兼容复杂视图等特点，提供国内主流骨架屏动画的加载方案，同时支持上拉加载更多、自定制动画。)项目地址:https://gitcode.com/gh_mirrors/ta/TABAnimated

项目介绍

TABAnimated 是一款专为 iOS 设计的骨架屏动画加载框架.它基于原生组件，实现自动化和低耦合的骨架屏渲染，极大地提高了用户的加载体验和开发者的效率。TABAnimated 支持各种类型的列表视图、嵌套视图以及复杂的界面结构。此外，该框架还兼容暗黑模式并提供实时预览功能。

核心特性

自动化与低耦合: 自动识别视图结构，减少手动调整。
广泛适用性: 支持列表视图、嵌套视图及复杂场景。
上拉加载：无缝集成上拉加载功能。
暗黑模式兼容：自动适应不同主题。
自定义动画：允许开发者自定义动画样式和序列。
实时预览：便于调整动画效果。

项目快速启动

为了在你的 iOS 项目中快速启用 TABAnimated，你可以选择以下几种方式之一：

CocoaPods

将以下依赖添加至你的 Podfile 并执行 pod install:
```
pod 'TABAnimated', '~> 2.6.3'
```
Carthage

在你的 Cartfile 文件中添加:
```
github "tigerAndBull/TABAnimated"
```
接着运行 carthage update.
手动集成

直接将 TABAnimated 的源码目录拖入到你的 Xcode 工程里.

初始化与基础设置

一旦集成完成，在你的 App Delegate 的 application:didFinishLaunchingWithOptions: 方法内进行基础配置：

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
    // 开启日志记录
    [TABAnimated sharedAnimated].openLog = YES;
    // 开启动画标签（辅助调试）
    [TABAnimated sharedAnimated].openAnimationTag = YES;

    return YES;
}

接下来，针对具体控件或单元格实例化 TABAnimated 功能：

UICollectionView* _collectionView = /* Your CollectionView */;
_tabAnimated = [TABCollectionAnimated animatedWithCellClass:[YourCustomCellClass class]
                                            cellSize:^CGSize(CGSizeZero){
                                                // 返回自定义单元格尺寸
                                                return CGSizeMake(yourWidth, yourHeight);
                                            }];

最后，确保在适当的时候触发骨架屏动画：

[self.collectionView.tabAnimated startAnimation];

以及停止动画以展示真实数据：

[self.collectionView.tabAnimated endAnimation];

应用案例和最佳实践

调整骨架元素

在实际应用中，你可能需要微调各个动画元素的具体表现，例如改变位置、大小或形状。这可以通过回调函数与链式语法实现：

_yourTableView.tabAnimated.adjustBlock = ^(
    TABComponentManager * _Nonnull manager
) {
    // 使用名称或索引定位特定元素
    [manager animationN(@"yourElementIdentifier")
             up(5)
             width(150)];
};