开源整理:酷酷的Android Loading动画,让你的用户不再无聊等待

一个出色的应用常常会用心打磨各种交互细节,例如为了能够让用户在某些耗时操作的等待过程中不要感到那么无聊,加上一个有趣的Loading动画效果将会是一个不错的选择。今天就为大家推荐Github上几个效果比较酷的优质开源项目,让你的用户可以打发无聊的等待时间,体验更上一层楼。

AVLoadingIndicatorView

https://github.com/81813780/AVLoadingIndicatorView

它的作者是一名在阿里巴巴就职的开发者(Jack Wang),如下面的效果图所示,这个库是很多简洁的等待动画效果合辑。

上面这些效果不仅是Android有开源的效果实现,在它出现之前,已有iOS开发者先行一步,需要iOS版的同学可以访问

https://github.com/ninjaprox/NVActivityIndicatorView

Android-SpinKit

https://github.com/ybq/Android-SpinKit

这个库也同样整合了多种很酷炫简洁的Loading动效,作者是国内的一名开发者。

RotatingPlane DoubleBounce Wave
WanderingCubes Pulse ChasingDots
ThreeBounce Circle CubeGrid
FadingCircle FoldingCube RotatingCircle

和AVLoadingIndicatorView一样,最开始这些效果并没有Android版本的实现,它是参照了SpinKit这个用CSS编写的开源项目效果进行实现的,想了解SpinKit的同学可以通过以下两个链接。

LoadingDrawable

https://github.com/dinuscxj/LoadingDrawable

这个库的作者依旧还是来自国内,里面包含了很多酷炫的加载动画,源码上采用了继承Drawable+策略者模式实现,可以与任何View配合使用作为加载动画。

AnimalDrawable CircleJumpDrawable CircleRotateDrawable
GoodsDrawable SceneryDrawable ShapeChangeDrawable

当然作者实现这些效果的创意并非自己独创,而是来自UI设计师们的创作,不过有件事我很好奇,什么类型的应用需要上面第一个效果图中的加载动效呢?有司机可以告诉我么?

好了,以上就是今天给大家推荐的酷炫Loading开源动画,又是愉快的一天,祝大家今天代码无Bug。

喜欢本文,可以用点赞、转发、赞赏等方式支持本公众号。长按文末二维码关注本号,可以获得更多优质资源推荐以及每月不定期的赠书福利。

往期精彩

开源整理:有趣的Android动画交互设计

各位同学,早上好,今天给大家推荐几个口碑不错且在Github上开源的代码库,如果想让自己的App在交互动画方面变得更有趣,学习一下这些开源项目的代码将会对你有所裨益。

Topeka

https://github.com/googlesamples/android-topeka

Topeka是一个趣味答题应用,由Google开源,应用内部展现了各种选题、答题的转场交互动画效果。

效果1 效果2

Material-Animations

https://github.com/lgvalle/Material-Animations

Material-Animations也是一个老牌且全面的动画库,你可以从中看到各式各样的动画交互效果,包括Activity/Fragment转场动画、共享元素、以及Circular Reveal(揭露动画)等。

效果1 效果2
效果3 效果4

animate

https://github.com/hitherejoe/animate

作者同样秀了各种有意思的Android交互效果。

效果1 效果2
效果3 效果4

以上就是几个优质开源库的推荐,对动画交互以及Material Design设计有兴趣的朋友,还可以阅读下面这篇Android官方出品的文章:

https://android-developers.googleblog.com/2014/10/implementing-material-design-in-your.html

里面会为你介绍了更多关于动画和交互的小知识。

转载请注明出处,喜欢我的文章可以搜索并关注我的微信公众号:技术视界(ID:clock_life)

直播App中Android酷炫礼物动画实现方案(下篇):SVGA由来与Lottie的对比

在一个月黑风高的夜里,一位开发Da Lao在朋友圈吐槽『你们UED设计的动画,太炫了!我们实现不了……!』,接着小B(UED掌门人)与这位Da Lao谈了一整晚的人生。

第二天,小B把Pony捉到了会议室,说道:『给你个死任务,把UED设计出来的动画,实现到《ME直播》中,不然就拿你去祭天』。Pony差点当场就尿了……先给你看看,UED的动画是酱紫的。

这个动画,如果输出成GIF的话,要3MB,尺寸是750*750。在上一篇文章中已经介绍过几种被否掉的方法,这里再稍作补充说明,如果使用GIF实现,有以下问题。

  • 动画文件太大(3MB的大小)
  • 播放资源占用高(当时测试的机子,内存占用约30MB/CPU占用约50%)
  • 效果差(GIF只支持8位颜色)

那么,使用WebP呢?嗯,使用WebP可以把动画文件大小压缩到一半,但是,播放资源占用问题没有解决,这依然是头疼的问题,想想,一个视频直播流已经占用了系统给进程分配的大量内存,然后直播间里面可能成千上万甚至更大体量的人同时在线,观众们一个个赠送礼物的动画出来,应用直接给搞挂掉了……

如果使用A-PNG呢?使用A-PNG可以完美地解决效果差的问题,因为PNG支持32位颜色啊,但是,同样的天使动画,大小可以达到9M,播放资源占用更更更高!

探索

那么,有没有更好的方法去解决以上的问题?其实是有的,早在2015年,Adobe就已经把CreateJS收归旗下,并且可以完美地将Flash动画导出至Web中。也正是同一个时期,BodyMovin出现了,BodyMovin可以将另一个Adobe的软件After Effects所设计的动画完美地导出至Web中。这两者的出现,是我们开发SVGA灵感的源泉。

具体的思路是,将动画脚本导出,再将动画元素(位图)导出,然后在对应的客户端,重新拼合这些位图。这样做的好处很明显,元素是有限的,动画脚本也非常轻量,我们只需要一次性地把元素还原出来就可以了。

相比序列帧,这种方案得到的动画文件非常小,播放资源占用也非常小,效果却相当好(因为使用PNG支持32位颜色)。

实现

在2016年的时候,Lottie还没开源,并且BodyMovin的文档也相当欠缺,我们是不可能重新实现一个BodyMovin在iOS/Android上的播放器的。

于是,干脆重写一个?然后Pony就用了两周的时间,把SVGA Flash转换器写出来了,再用两周时间,把iOS和Android的Player也写出来(当然,只是Demo阶段)。一个月后,拿出来,给Da Lao们欣赏欣赏,Da Lao们都惊呆了……

这个方案,不仅资源占用很小很小(当时测试的数据内存占用约8M左右,CPU占用约2%),文件大小也非常小(天使动画只需295K),效果还狂拽酷炫高逼格。

紧接着接着,在YY内部就开始有了SVGA这个项目(当时没有开源),经过了一整年的迭代,在YY系的产品中有超过十多个产品的使用,应用范围涵盖iOS/Android/Web/PC客户端等。

SVGA与Lottie

在上一篇文章发出后,很多同学都在关注一个问题,SVGA和Lottie有什么区别?嗯,没有对比就没有伤害,既然Lottie这么强大,我们就用SVGA来跟它做一番对比,以下列了一些特性差异:

  • 从CreateJS/Lottie实现的原理来看,都是将设计软件中的时间轴完整地导出来,包括里面的各种关键帧信息、矢量路径、样式等等。其中,最为关键的是『关键帧』!由于使用的是关键帧动画描述,那么对应的Player就难免变得复杂起来。如果只是简单的一次线性方程,比如,物体从A点匀速移动至B点,还OK。但是,当遇到二次线性方程、贝塞尔曲线方程这些高阶插值计算的时候,Player就会很吃力。(矢量动画就是通过一些公式能表达的矢量线条和色块,以此来表示每一帧动画)

  • CreateJS可以导出Flash动画,Lottie可以导出After Effects动画,但是它们都不能导出对方的动画(每种设计工具的脚本都是不一致的),这也意味着,你家的设计师只能使用其中一种设计工具。

  • Lottie在导出位图动画方面不够友好,从UI设计师和开发人员使用角度来看都比较麻烦,开发人员需要先将做好的效果打包成ZIP,再解压到本地目录,才能播放。

  • SVGA使用另外一套逻辑,它不关心关键帧,因为SVGA里面的每一帧都是关键帧!也就是说,SVGA已经在导出动画的时候,把每一帧的信息都计算好了,如此一来,Player也就不用关心插值计算的过程。正因为如此,SVGA可以同时支持Flash和After Effects的导出,只需要在各自转换器中计算差值就好了。

  • SVGA在设计之初就支持位图元素,在1.x格式时使用ZIP进行打包,在2.x格式中,直接使用ProtoBuf+Zlib方式打包,作为开发者,完全不用关心应该怎样下载、解压、获取位图文件,直接把svga文件扔进去Player就可以了。

  • 功能上,SVGA更贴合直播应用场景,SVGA所提供的动态文本、动态图像功能都是其它库所不能提供的。

Android

我们最关心的永远是性能问题,SVGA在设计之初就考虑到性能问题(这里只讨论Android端的实现)。Android端最初的SVGA Player是通过继承SurfaceView(TextureView)实现的的,但是SurfaceView在硬件加速的情况下只能独立于UI层级(在最顶或者最底),如果不开启硬件加速渲染呢?效果会变得非常感人。并且在使用SurfaceView绘制Bitmap时,还伴随着各种问题,包括内存回收、Activity生命周期以及UI层级各种牵扯不清的问题。

后期通过继承重写ImageView来实现Android端的SVGA Player,使用Canvas绘制Drawable的方式来绘制动画,这样也使得SVGA可以任意地嵌入到UI层级中,同时也解决之前诸多的存在问题。

当然,关于SVGA Player,UED还在不断的继续优化,大家可以持续关注官网和Github的更新…

生态

SVGA提供一整套的动画解决方案,从设计、产品、开发三个环节保障动画可快速落地。

为了让设计师可以快速地导出动画,我们开发了Flash/After Effects插件。

http://svga.io/designer.html

为了让开发者可以轻易地接入动画,我们开源了iOS/Android/Web三个平台的源码。

为了让所有人都可以快速获知动画是否正常,动画中的元素属性,我们开发了动画预览器。

http://svga.io/svga-preview.html

为了解决设计师、开发者的疑难问题,我们还提供 Q 群服务 576461005

所有的一切,都是为了文章最初的那句话,不要把Pony拿去祭天。

转载请注明出处,喜欢我的文章可以搜索并关注我的微信公众号:技术视界(ID:clock_life)

直播App中Android酷炫礼物动画实现方案(上篇)

在当下移动直播火爆的年代,如果你曾经使用过移动端直播应用,相信会被里面那令人惊叹的礼物动画效果迷住,比如像下面这样的效果。

从开发人员的角度来看,这样的效果虽然漂亮,实现但却是一大挑战,除了要考虑编码实现的效率、性能表现外,还要结合直播业务本身的特性等。

实现思路

首先,从实现思路面入手,有以下几个实现思路作为考虑:

  • 方案一:帧动画;
  • 方案二:属性动画;
  • 方案三:Gif或WebP;
  • 方案四:实现一套播放动画的框架,客户端只需要继承进来,UI设计师按照约定的动画语法作图给开发人员即可;(原理类似SVG)

从实现性能、效率以及复用角度上来看,我们最终采用了最后一种方案。

  • 方案一需要把图片带到安装包中,增大了安装包体积,而且直播应用中礼物种类很多,每个礼物都带一套帧动画进去,相当不科学。
  • 方案二开发代价较大,每一套礼物动画基本都不一样,开发人员需要去细细调参,花在业务上编码的时间会变得非常有限,从代码复用率极低。

方案一、二除了以上提到的缺陷外,还有一个直播业务场景问题没有解决,就是当客户端发布之后,想要上架一些新设计的礼物就必须要让用户升级客户端,否则是无法体验到新上架的礼物。

方案三没有以上提到的业务问题,但在性能方面并不是最优选择。Gif图实质上就是把一帧帧的静态图片打包到一起,打成一个压缩包,但是由于Gif的压缩算法问题,实际上这个压缩包一点都不小,随便一个炫酷点的礼物效果都能弄个几兆到十几兆不等的文件出来,对于移动端来说,不论从下载和播放的性能表现上都差强人意。Gif图片能做的动画,WebP格式的图片同样可以实现,且WebP图片要比Gif图小很多,下图是同样效果用Gif和WebP的实现对比。

复杂WebP动图在编解码时,性能上表现得差强人意,而且虽然Android在4.0时开始支持WebP,但是要支持有损且带透明像素的WebP得到Android 4.2.1之后。Gif和WebP图片还有一个场景上的缺陷是,如果我要在播放到某一帧动画时,动态插入一些帧,实现起来难度较大,就像我们最近上线的产品Orangy里面的一个配对动画的效果,在爱心桃的中间某一帧插入两个配对者的头像。

前面铺垫了这么多,最终还是为了带出我们的主角,方案四。方案四是YY UED团队所研发的一套动画实现方案,作者给它起了名字叫SVGA,目前已经在YY系的很多产品线上良好运行着,下面简单的介绍它的优点:

  • 对切图小哥和写Bug小哥友好,嗯,没错,再也不用互相伤害了。
  • 高效,终端只需要继承这套方案框架,把动画实现交给动画设计师即可。
  • 高性能,在实现酷炫动画的基础上,播放性能表现优于Gif和WebP。
  • 动画文件小,同样的动画效果,SVGA文件要比Gif和WebP的文件小得多。
  • 跨平台,支持Android、iOS、React Native、Web、还有不久前刚出来的微信小程序,不过小程序上的绘制功能很弱,效果有点感人。
  • 开源,可以直接访问YY UED的Github获取框架源码 https://github.com/yyued

具体各种使用姿势,可以参考开源库中README上的说明,或者访问SVGA的官网 http://svga.io

实现原理

如果你熟悉SVG,那么理解起SVGA的实现原理并不会很困难,今天太晚了,下篇文章会继续聊,感兴趣的同学可以阅读源码先睹为快,在没有看代码之前,你会怎么觉得内部是怎么实现的呢?。哦,对了,这套代码的作者Pony(我经常叫他崔神)是个全栈大佬,之前写Java时觉得语法太繁琐,后面干脆用Kotlin重写了整套框架,就是这么任性,我时常问崔神需不需要端茶递水的小弟,结果他总是不缺…

引用

转载请注明出处,喜欢我的文章可以搜索并关注我的微信公众号:技术视界(ID:clock_life)

IT行业学历重要吗?

本文来自我的一个知乎回答,问题如下:(原问题链接:https://www.zhihu.com/question/64344519

这类问题,其实已经是烂大街的问题,抛开前面特指的IT行业,相信在其他行业里也有人提出这类问题。

幸存者偏差

首先,我不否认有技术牛逼到可以忽略学历的人存在。但这里涉及到一个比例的问题,在整体中,牛逼到忽略学历的比例究竟有多少?这才是重点。学历和能力成正比这条规律不适用所有人,但是起码它适用于绝大部分人。我身边的一些同事和朋友,但凡能力出众的基本自于知名学府,偶尔与他们交流问题时,甚至还会对他们思维方式感到钦佩不已。

IT神话

IT领域为什么会有学历不重要的言论存在,估计跟很多人听惯IT大佬们的神话有关系,如:马云,马化腾,比尔·盖茨,马克·扎克伯格,乔布斯等人的传奇事迹至今还是不绝于耳。神话跟时代也存在关系,不少例举马云、马化腾这样的业界大佬学历普通仍然创建了阿里巴巴和腾讯,但是,在他们读书的年代,即使是专科学历和现在专科学历是不能同日而语,就像30年前的100块钱和现在的100块钱不能等价一样。如果,把马云和马化腾放到今天的大环境下重新开始,恐怕他们也很难取得像现在的成就。

拿比尔·盖茨、马克·扎克伯格、乔布斯这些大佬们在学校退学创业来鼓励自己,很抱歉,人家是从考上常青藤名校的基础退学的,水平完全不一样。其中,除了马克·扎克伯格、乔布斯的家庭背景一般外,比尔·盖茨完全可以说是个富二代,不过他却是被举例子做多的人。知乎网友:削肾客的爱疯列出国内知名互联网大佬的毕业院校:

继续阅读全文 »

Android Google ARCore尝鲜记录

昨晚体验了一把Google前几天对外发布的ARCore,它不像原先推出的Tango需要特定的硬件设备支持(关键是Tango的价格好贵),只需要一台手机即可完成所有操作,以下是一些尝鲜体验的记录。

官网资料

根据目前的Google AR( https://developers.google.com/ar/ )文档描述,当前支持的开发环境只有Android Studio、Unity、Unreal、Web四种。

每个开发环境都有一份新手入门指引,没有太多深入内容,都是手把手教你跑个Hello World那种,只要按着步骤操作即可。

环境准备

体验Android ARCore时,需要先做下面这些准备:

  • 拉取Google在Github上开源的arcore-android-sdk项目代码,地址: https://github.com/google-ar/arcore-android-sdk
  • Android Studio 2.3 + Android 7.0(或以上)的手机一台,由于目前这个Android ARCore SDK刚刚推出,Google没有做太多设备的兼容,目前仅支持这些型号:Google Pixel 、 Google Pixel XL 、 Samsung Galaxy S8 (SM-G950U, SM-G950N, SM-G950FD, SM-G950FD, SM-G950W, SM-G950U1)。

做完以上准备后只需要插上手机,编译工程到手机上,即可开始你的AR体验之旅。

对于没有上面列出的支持设备的用户,别气馁,下面还有转机。

继续阅读全文 »

Kotlin学习笔记(四):抽象类、接口、可见性修饰、重写

本文是Kotlin学习笔记系列的第四篇,还没看过前三篇文章的同学请看下方:

下面直接进入正文。

抽象类

关键字:abstract、override

abstract可以用于类的修饰、或者类成员方法的修饰,能将对应的class或fun声明成为抽象类或者抽象方法。

1
2
3
4
5
6
7
8
9
abstract class A {
abstract fun testAbsFun()
}
class B : A() {
override fun testAbsFun() {
//do sth...
}
}

继续阅读全文 »

开源整理:三个优秀的Android图表开源控件

本文是关于Android开源图表控件的整理,塞选条件基于以下三个:

  • Github上的start、watch、fork数其中有两项超过100;
  • 同时还需要作者最近半年仍在维护更新;
  • 使用文档基本齐全;

MPAndroidChart

https://github.com/PhilJay/MPAndroidChart

使用简单,但功能强大,而且支持Realm,兼容Android 2.2及以上版本,一直保持Android图表开源控件里面的一哥地位。有意思的是,MPAndroidChart还有一个iOS平台的版本( https://github.com/danielgindi/Charts )。

继续阅读全文 »

Kotlin学习笔记(三):类和对象

本文是Kotlin学习笔记第三篇,还没看过前两篇文章的朋友可以考虑看看。

在学习的过程中,我会不断的比对Kotlin和Java间的差异点,相信你可以从中看到Kotlin相比Java的一些亮点,看完本篇文章,你可以知晓以下这些问题。

类声明

和Java一样,Kotlin中使用关键字class来声明一个类。如下即是声明一个最简单的没有任何属性和方法的类

1
2
// 没有任何属性、方法的Coder类
class Coder {}

一个完整的类声明包含类名类头(指定构造参数、构造方法等),类体(用大括号包裹的部分)。类头和类体这两个部分并非必要的,像上面没有任何属性、方法的Coder类,我们可以省略掉类头和类体写成下面这样。

1
2
// 没有类头、类体的Coder类
class Coder

继续阅读全文 »