ios - 原生骨架屏之仿豆瓣动画

骨架屏的使用文档你可以在使用文档中找到， 考虑到文章篇幅问题，所以另写一篇文章。

前几天有一位群友加入到TABAnimated骨架屏交流群， 提到了豆瓣客户端的动画，当然还提出了其他的想法， 作者去调研了一下，发现确实值得尝试。

此次动画的实现，群友做出了突出贡献， TABAnimated期待更多开发者合作维护这个项目。

基于群友的动画思路，我在其动画逻辑上进行了修改。 虽然说不敢保证100%相似，但是能达到96.28%的相似度。 另外，豆瓣客户端的所有骨架效果，用本框架都可以轻松实现。 因为工作量的原因，demo中就随便拿了原来的cell改了改，以做演示。

效果图

因为gif展示能力有限，想要体验更好的效果可以下载 demo 尝试。

这个效果基于2.0.3改版过的框架，也比较容易实现， 可以说只是添加了几个参数，几个函数。

增加内容

一. 新增全局初始化方法

使用该初始化方法，工程中所有动画都会默认设置为豆瓣动画。

本文再次强调优先级： tabAnimated的superAnimationType > 全局的animatedType

[[TABAnimated sharedAnimated] initWithDropAnimated];
复制代码

二. 新增属性

dropAnimationDuration ：坠落帧时长，你可以理解为坠落速度 dropAnimationDeepColor ：变色的颜色值

与此同时： tabAnimated中也新增了上面两个属性

再次强调优先级： tabAnimated > 全局

因为动画元素个数的原因， dropAnimationDuration 对于不同的视图，需要用的频率要高

三. 新增链式语法，重点

1. dropIndex(xxx) ：意思是变色的下标设置， 一般地，如果你不进行设置，那么框架会以视图加入到view的顺序进行设置，当然这样远远不能满足需求。

比如：

这个效果中前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);
复制代码

2. 多行文本元素再次说明

本文再次强调: 框架的所有骨架都是基于你原视图进行映射的， 如果你的view是 UILabel ,同时 numberOfLines 不是1，那么会被框架认为是多行文本， 此时，涉及到2个链式语法 lines(xxx) , 意思是修改红框内的行数 space(xxx) , 意思是修改红框内的间距

当然，如果一个普通的元素也可以通过设置，达到同样的效果，听明白了没有？？？

到此为止，还仅仅是老的内容，以防有些小朋友没用过，不理解。

基于这样的特殊性， **dropFromIndex(xxx)**应运而生，意思是指，红框内的三行元素，从下标xxx开始变色

具体点：view.animation(xxx).lines(3).dropFromIndex(3); 意思是：红框内的三行元素，第一个的变色下标为3，第二个的变色下标为4，第三个变色下标为5。

3. removeOnDrop() : 是指该动画元素不希望参与变色
4. dropStayTime(xxx) : 变色停留时间比，默认0.2
5. lastScale(xxx) ：最后一行的宽度比例，默认0.5

注：

• 以上属性均有2种方式，数组和单个元素
• 如果你修改了一个元素的变色下标，大概率所有元素的下标都要重新设置，框架在该版本没有加入自动调整下标的逻辑