ios - 原生骨架库,网络过渡动画封装

栏目: IOS · 发布时间: 5年前

内容简介:在v1.9探索过模版模式,但是重复的工作量并不利于快速构建,

ios - 原生骨架库,网络过渡动画封装

最新版 2.0.5,release版本

目录

关于 TABAnimated

TABAnimated 的起源版本是模仿 简书 网页的骨架屏动态效果。

在v1.9探索过模版模式,但是重复的工作量并不利于快速构建,

而且两种模式的存在不合理,所以在v2.1删除了这种设定,但是模版模式的出现到删除,并不是没有收获,相反带来了更合理的实现方案,更便捷的构建方式。

实现原理

TABAnimated 需要一个控制视图,进行开关动画。该控制视图下的所有subViews都将加入动画队列。

TABAnimated 通过控制视图的subViews的位置及相关信息创建 TABCompentLayer

普通控制视图,有一个 TABLayer
表格视图,每一个cell都有一个 TABLayer

TABLayer 负责管理并显示所有的 TABCompentLayer

当使用约束进行布局时,约束不足且没有数据时,致使subViews的位置信息不能体现出来,TABAnimated会进行数据预填充。

优点

  • 集成迅速
  • 零耦合,易于将其动画逻辑封装到基础库
  • 高性能,极少的内存损耗
  • 链式语法,方便快捷,可读性高
  • 完全自定制,适应99.99%的视图

演变过程

看不清楚可以放大一下

ios - 原生骨架库,网络过渡动画封装

简单说明一下:

第一张图:原有表格组件, 有数据时的展示情况

第二张图:是在该表格组件开启动画后,映射出的动画组,相信你可以看出来,效果并不是很美观。

第三张图:针对这个不美观的动画组,通过回调,进行预处理,下文进行说明

效果图

| 动态效果 | 卡片投影 | 呼吸灯 |

| ------ | ------ | ------ |

| ios - 原生骨架库,网络过渡动画封装 | ios - 原生骨架库,网络过渡动画封装

|

ios - 原生骨架库,网络过渡动画封装

|

| 闪光灯 | 分段视图 | 嵌套表格 |

| ------ | ------ | ------ |

| ios - 原生骨架库,网络过渡动画封装 | ios - 原生骨架库,网络过渡动画封装

|

ios - 原生骨架库,网络过渡动画封装

|

安装

使用 CocoaPods

pod 'TABAnimated'

手动导入

将TABAnimated文件夹拖入工程

使用步骤

您只需要四步

  1. didFinishLaunchingWithOptions 中初始化 TABAimated

还有其他的全局属性,下文用表格呈现。

**老用户注意:

原TABViewAnimated已经改名为TABAnimated**

如今的TABViewAnimated已经成为UIView的骨架对象

// init `TABAnimated`, and set the properties you need.
[[TABAnimated sharedAnimated] initWithOnlySkeleton];
// open log
[TABAnimated sharedAnimated].openLog = YES;
  1. 控制视图初始化tabAnimated

普通view:

self.mainView.tabAnimated = TABViewAnimated.new;
self.mainView.tabAnimated.categoryBlock = ^(UIView * _Nonnull view) {
        view.animation(1).width(200);
        view.animation(2).width(220);
        view.animation(3).width(180);
 };

表格组件:

_collectionView.tabAnimated = 
[TABCollectionAnimated animatedWithCellClass:[NewsCollectionViewCell class] 
                                    cellSize:[NewsCollectionViewCell cellSize]];
_collectionView.tabAnimated.categoryBlock = ^(UIView * _Nonnull view) {
        view.animation(1).reducedWidth(20).down(2);
        view.animation(2).reducedWidth(-10).up(1);
        view.animation(3).down(5).line(4);
        view.animations(4,3).radius(3).down(5);
};
  1. 开启动画
[self.collectionView tab_startAnimation];
  1. 关闭动画
[self.collectionView tab_endAnimation];

UIView 对应 TABViewAnimated
UITableView 对应 TABTableAnimated
UICollectionView 对应 TABCollectionAnimated

还配有其他的初始化方式,支持多section,指定section。

一般情况下,注册的cell用原来的cell进行映射就可以了。

特殊应用场景:

举个例子,新浪微博帖子页面,有很多很多种类型,

这样复杂的页面,上升到动画层面肯定是设计一个统一的动画,

这个时候,你可以重新写一个cell,然后注册到这个表格上,通过本框架映射出你想要的视觉效果,这个也是模版功能演变过来的。

具体其他的详细信息,会继续添加其他文档,或者在github上demo中查看。

扩展回调

扩展回调将动画组给予开发者,开发者可以对其进行调整。

因为是调整,所以加入了链式语法,让开发者快速且方便地调整。

_collectionView.tabAnimated.categoryBlock = ^(UIView * _Nonnull view) {
        view.animation(1).reducedWidth(20).down(2);
        view.animation(2).reducedWidth(-10).up(1);
        view.animation(3).down(5).line(4);
        view.animations(4,3).radius(3).down(5);
};

参数说明(框架中也有详细注释)

view.animation(x): 该view的指定下标的动画个体 TABCompentLayer

view.animations(x,x): 该view指定范围的动画个体数组, 用于统一调整

up(x):向上移动多少

down(x):向下移动多少

left(x):向左移动多少

right(x):向右移动多少

height(x): 修改高度

width(x): 修改宽度

reducedWidth(x): 宽度相比之前,减少多少

reducedHeight(x): 高度相比之前,减少多少

radius(x): 圆角

line(x): 行数

space(x): 间距

这两个参数,如果是多行文本,根据 numberOfLines 数量默认生效

普通的动画个体也可以设置这个两个属性,达到同样的效果

remove(): 移出动画组

toLongAnimation(): 赋予动态变长动画

toShortAnimation(): 赋予动态变短动画

特别提醒:

TABAnimated.h
TABViewAnimated.h

优先级:

动画个体参数配置 > 控制视图动画参数配置 > 全局动画参数配置

Tips

  1. 问:哪个动画个体对应的是哪个组件?

答:

如果你使用纯代码构建,那么你添加的组件顺序对应的动画数组的下标,

比如第一个添加到cell上的,那么它对应的动画组件就是:view.animation(0)

依次类推,只要打开你的cell文件,看一下层级进行调整就好了。

但是,如果你用xib创建,很遗憾地告诉你,顺序是关联xib文件的顺序。

demo中的xib做了一个错误示范,有坑慎入。

目前没有找到其他很好的方式,也希望收集大家的建议。

  1. 多行文本

ios - 原生骨架库,网络过渡动画封装

上文有提到,这里再强调一下,

可以使用.line(x)设置行数 .space(x)设置间距

每一个动画组件都可以设置这两个属性,达到同一个效果。

  1. 指定section加载动画的初始化方法

举个例子:

比如 animatedSectionArray = @[@(3),@(4)];

意思是 cellHeightArray,animatedCountArray,cellClassArray数组中的第一个元素,是分区为3时的动画数据。

// 部分section有动画
_tableView.tabAnimated =
[TABTableAnimated animatedWithCellClassArray:@[[TestTableViewCell class]]
                             cellHeightArray:@[@(100)]
                          animatedCountArray:@[@(1)]
                        animatedSectionArray:@[@(1)]];
        
_tableView.tabAnimated.categoryBlock = ^(UIView * _Nonnull view) {
    view.animation(1).down(3).height(12).toShortAnimation();
    view.animation(2).height(12).width(110).toLongAnimation();
    view.animation(3).down(-5).height(12);
};
  1. 多section时扩展回调使用
_collectionView.tabAnimated.categoryBlock = ^(UIView * _Nonnull view) {
            
      if ([view isKindOfClass:[CourseCollectionViewCell class]]) {

      }
            
      if ([view isKindOfClass:[DailyCollectionViewCell class]]) {
            view.animations(1,3).height(14);
            view.animation(2).down(6);
            view.animation(1).up(1);
            view.animation(3).up(6);
      }
  };
  1. 对于嵌套表格组件,需要在被嵌套在内的表格组件的 isNest 属性设为 YES ,详情请看demo。
_collectionView.tabAnimated = [[TABAnimatedObject alloc] init];
_collectionView.tabAnimated.isNest = YES;
_collectionView.tabAnimated.animatedCount = 3;

属性相关

| 初始化方法| 名称 |

| ------ | ------ |

| initWithOnlySkeleton | 骨架屏 |

| initWithBinAnimation | 呼吸灯动画 |

| initWithShimmerAnimated | 闪光灯动画 |

如果控制视图的 superAnimationType 做了设置,那么将以 superAnimationType 声明的动画类型加载

全局动画属性:

使用方法

[TABAnimated shareAnimated].xxx = xxx;
属性名称 适用动画 含义 默认值
animatedColor 通用 动画颜色 0xEEEEEE
animatedBackgroundColor 通用 动画背景颜色 UIColor.white
animatedDuration 动态动画 来回移动时长 1.0
longToValue 动态动画 伸缩比例 1.9
shortToValue 动态动画 伸缩比例 0.6
animatedDurationShimmer 闪光灯 移动时长 1.5
animatedHeightCoefficient 通用 高度系数 0.75
useGlobalCornerRadius 通用 开启全局圆角 NO
animatedCornerRadius 通用 全局圆角 0.
useGlobalAnimatedHeight 不适用UIImageView 使用全局动画高度 NO
animatedHeight 不适用UIImageView 全局动画高度 12.
openLog 通用 开启日志 NO

控制视图下所有动画属性配置:

使用方法

_tableView.tabAnimated.xxx = xxx;
属性名称 适用范围 含义 默认值
superAnimationType 通用 该控制视图动画类型 默认使用全局属性
animatedCount 表格组件 动画数量 填满表格可视区域
animatedColor 通用 动画内容颜色 UIColor.white
animatedBackgroundColor 通用 动画背景颜色 0xEEEEEE
cancelGlobalCornerRadius 通用 取消使用全局圆角 NO
animatedCornerRadius 通用 该控制视图下动画圆角 0.
animatedHeight 通用 该控制视图下动画高度 0.
isAnimating 通用 是否在动画中 \
isNest 通用 是否是被嵌套的表格 NO
canLoadAgain 通用 是否可以重复启动动画 NO

强调:

  1. demo也只是简单的引导作用,

你可以订制更精美的效果,高效解决99.99%视图骨架

  1. 以上的说明,demo上都有详细介绍和案例,

遇到问题先去 demo 上看看有没有使用示例

最后:

  • 感谢相遇,感谢使用,如果您觉得不错可以在github上点个star
  • 如有使用问题,优化建议等,加入交流群更快解决:304543771
  • github地址: https://github.com/tigerAndBu...

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

Java Web开发从初学到精通

Java Web开发从初学到精通

方振宇 / 电子工业 / 2010-6 / 69.00元

《Java Web开发从初学到精通》介绍如何整合Web框架进行J2EE开发,所有实例都基于MyEclipse IDE开发,引领读者快速进入基于JaVa web的J2EE应用领域。《Java Web开发从初学到精通》开始主要介绍Servlet、JSP、JavaBean、EL、JSTL、JDBC等Web开发基础知识,然后学习Struts、Hibernate、Spring、Ajax、JSF等开源框架,并......一起来看看 《Java Web开发从初学到精通》 这本书的介绍吧!

RGB转16进制工具
RGB转16进制工具

RGB HEX 互转工具

RGB HSV 转换
RGB HSV 转换

RGB HSV 互转工具

HEX CMYK 转换工具
HEX CMYK 转换工具

HEX CMYK 互转工具