阅读 810

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

前言

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

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

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

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

效果图

豆瓣.gif

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

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

增加内容

一. 新增全局初始化方法

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

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

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

二. 新增属性

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

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

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

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

三. 新增链式语法,重点

  1. 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);
复制代码
  1. 多行文本元素再次说明

929722EC-1C28-4EE1-A711-802B0AD64CAD.png

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

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

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

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

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

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

注:

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

其他

经过本人和其他用户在工程中的应用,此次更新也修复了一些小bug。

最后:

  • 感谢相遇,感谢使用,如果您觉得不错可以在github上点个star
  • 如有使用问题,优化建议等,加入交流群:304543771
  • github地址:github.com/tigerAndBul…
关注下面的标签,发现更多相似文章
评论