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种方式，数组和单个元素
• 若是你修改了一个元素的变色下标，大几率全部元素的下标都要从新设置，框架在该版本没有加入自动调整下标的逻辑

其余

通过本人和其余用户在工程中的应用，这次更新也修复了一些小bug。

最后：

• 感谢相遇，感谢使用，若是您以为不错能够在github上点个star
• 若有使用问题，优化建议等，加入交流群：304543771
• github地址：github.com/tigerAndBul…