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. 多行文本元素再次说明
image.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。

最后:

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 218,607评论 6 507
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 93,239评论 3 395
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 164,960评论 0 355
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,750评论 1 294
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,764评论 6 392
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,604评论 1 305
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,347评论 3 418
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 39,253评论 0 276
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,702评论 1 315
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,893评论 3 336
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 40,015评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,734评论 5 346
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,352评论 3 330
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,934评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 33,052评论 1 270
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 48,216评论 3 371
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,969评论 2 355