博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
ios - 原生骨架屏之加入豆瓣动画
阅读量:6232 次
发布时间:2019-06-22

本文共 1774 字,大约阅读时间需要 5 分钟。

前言

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

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

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

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

效果图

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

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

本文再次强调: 框架的所有骨架都是基于你原视图进行映射的, 如果你的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地址:

转载于:https://juejin.im/post/5cdbeb6c5188253cd553445b

你可能感兴趣的文章
array_merge和+号合并数组的区别
查看>>
TP5整合 WorkerMan 以及 GatewayWorker
查看>>
Facebook Docusaurus 中文文档 准备网站
查看>>
如何绘制一个圆圆的loading圈
查看>>
Nodejs学习记录:用koa.js开发微信公众号
查看>>
Android源码集锦,悬浮窗综合资讯类APP动画效果左右切换效果美妆领域
查看>>
Spring Cloud(六)服务网关 zuul 快速入门
查看>>
d3.js中动态数据的请求、处理及使用
查看>>
Vue源码解析(六)-vue-router
查看>>
[轮子系列]Google Guava之BloomFilter源码分析及基于Redis的重构
查看>>
android弹力效果菜单、组件化项目、电影票选座控件的源码
查看>>
three.js 中文文档 9.问答
查看>>
单元测试
查看>>
重温JS基础--JS中的对象属性
查看>>
慕课网_《RxJava与RxAndroid基础入门》学习总结
查看>>
CDH的hadoop与Spark套件组安装
查看>>
构建多层感知器神经网络对数字图片进行文本识别
查看>>
Git常规配置与基本用法
查看>>
写Laravel测试代码(三)
查看>>
JS判断数组重复
查看>>