前言
骨架屏的使用文档你可以在使用文档中找到，
考虑到文章篇幅问题，所以另写一篇文章。
前几天有一位群友加入到TABAnimated骨架屏交流群，
提到了豆瓣客户端的动画，当然还提出了其他的想法，
作者去调研了一下，发现确实值得尝试。
此次动画的实现，群友做出了突出贡献，
TABAnimated期待更多开发者合作维护这个项目。
基于群友的动画思路，我在其动画逻辑上进行了修改。
虽然说不敢保证100%相似，但是能达到96.28%的相似度。
另外，豆瓣客户端的所有骨架效果，用本框架都可以轻松实现。
因为工作量的原因，demo中就随便拿了原来的cell改了改，以做演示。
效果图
豆瓣.gif
因为gif展示能力有限，想要体验更好的效果可以下载demo
尝试。
这个效果基于2.0.3改版过的框架，也比较容易实现，
可以说只是添加了几个参数，几个函数。
增加内容
一. 新增全局初始化方法
使用该初始化方法，工程中所有动画都会默认设置为豆瓣动画。
本文再次强调优先级：
tabAnimated的superAnimationType > 全局的animatedType
[[TABAnimated sharedAnimated] initWithDropAnimated];
二. 新增属性
dropAnimationDuration：坠落帧时长，你可以理解为坠落速度
dropAnimationDeepColor：变色的颜色值
与此同时：
tabAnimated中也新增了上面两个属性
再次强调优先级： tabAnimated > 全局
因为动画元素个数的原因，dropAnimationDuration对于不同的视图，需要用的频率要高
三. 新增链式语法，重点
-
dropIndex(xxx)：意思是变色的下标设置，
一般地，如果你不进行设置，那么框架会以视图加入到view的顺序进行设置，当然这样远远不能满足需求。
比如：
F597A0A5-1E8A-482F-9030-9885539352CE.png
这个效果中前3个动画元素是一起变色的，且都是第一个变色，即变色下标是0，
如果按照框架默认设置，那么他们的变色下标分别是0，1，2，
很明显不满足需求。
这个时候，你就要通过dropIndex(xxx)设置了，
框架提供有2种方式：
view.animations(0,3).dropIndex(0);
view.animation(0).dropIndex(0);
view.animation(1).dropIndex(0);
view.animation(2).dropIndex(0);
- 多行文本元素再次说明
image.png
本文再次强调:
框架的所有骨架都是基于你原视图进行映射的，
如果你的view是UILabel,同时numberOfLines不是1，那么会被框架认为是多行文本，
此时，涉及到2个链式语法
lines(xxx), 意思是修改红框内的行数
space(xxx), 意思是修改红框内的间距
当然，如果一个普通的元素也可以通过设置，达到同样的效果，听明白了没有？？？
到此为止，还仅仅是老的内容，以防有些小朋友没用过，不理解。
基于这样的特殊性，
dropFromIndex(xxx)应运而生，意思是指，红框内的三行元素，从下标xxx开始变色
具体点：view.animation(xxx).lines(3).dropFromIndex(3);
意思是：红框内的三行元素，第一个的变色下标为3，第二个的变色下标为4，第三个变色下标为5。
- removeOnDrop(): 是指该动画元素不希望参与变色
- dropStayTime(xxx): 变色停留时间比，默认0.2
- lastScale(xxx)：最后一行的宽度比例，默认0.5
注：
- 以上属性均有2种方式，数组和单个元素
- 如果你修改了一个元素的变色下标，大概率所有元素的下标都要重新设置，框架在该版本没有加入自动调整下标的逻辑
其他
经过本人和其他用户在工程中的应用，此次更新也修复了一些小bug。
最后：
- 感谢相遇，感谢使用，如果您觉得不错可以在github上点个star
- 如有使用问题，优化建议等，加入交流群：304543771
- github地址：https://github.com/tigerAndBull/TABAnimated
网友评论