Android开发中一些你需要知道的图片相关知识和网站推荐分享
-- TinyPNG
这个网站可以说是开发必知的一个图片网站，它的作用就是压缩图片，而且效果相当显著，可以说是“神站”级别。当然了，你不知道没关系，漂亮的或者帅帅的美工知道也行，总之你俩必须有一个人知道，在我们项目开发的后期，有一项就是要减小Apk的大小，这其中较重一项就是图片，在即将2018的现在，流量对于大家来说依然很敏感，越小的Apk体积对于用户来说升级成本就越小。效果上大多可以减小PNG图片60-90%左右，其压缩原理官网有介绍：就是把相似像素的24bit位用8bit位来表示，并且移除了不必要的元数据，是有损压缩，不理解的话自己去查一下像素组成，基于这个原理，一般图片内内容较为锐利的压缩效果就会特别好，而一些看起来模模糊糊的像素混杂的效果就会比较差，可以想象一下iPhone X的壁纸。
除了网站压缩呢，我们还可以通过转换图片格式来减小图片体积---Webp，在Android Studio中，点击图片右键，选项的最下边会有一个“convert to Webp... ”的选项，你可以自己选择图片的压缩质量等，需要注意的是，选择时会提示你是当然app支持的最小版本号是否低于API18，如果低于18，也就是android4.3就会跳过对于透明通道的压缩。我们知道Android的图片都是png，而png图片是ARGB像素模式，A就是alpha，透明；RGB分别是Red，Green，Blue。另外，在布局、colors文件、代码中我们设置颜色时通常有两种：一种是“#”开头，后面加颜色值，三位和六位其实是一样的，都是代表GRB，比如“fff”和“ffffff”显示的颜色时一样的，而四位和八位是一样的，都是代表ARGB，加了一个透明通道，最前边的一位或者两位就是代表透明度，布局xml文件中也有专门的设置透明度的alpha属性；还有一种是代码中用的以“oxff”开头的直接设置颜色的代码，比如“oxff00000000”,后面跟六位或者八位的色值，这个开头表示的是十六进制的意思，忽略即可，只有后面的数值起作用，最后你们需要自己检查一遍压缩的质量，如果效果实在太差就别压缩。
-- 阿里巴巴矢量图标库
看名字就知道了，一个图标库网站，其实这样的图标库网站挺多的，搜一下png网站就有很多，但是再看名字，阿里巴巴...所以就推荐这个网站，最起码审美能跟得上主流，对吧。做一些小demo的时候必要的图片icon素材是必不可少的。所以有需要就去搜索吧。
-- 花瓣网
上面那个只有一些图标，想要demo做的好看还得加一些真正的图片素材才行，公司UI推荐的一个图片素材网站，很文艺，很清新。你值得拥有。
-- Dribbble
这个对于美工来说就了不得了，在这个网站上做的好据说可以直接被大公司带走，有点像我们猿类的Github，是面试的一大装逼附加利器。那对于我们程序员来说有啥作用呢，除了也可以搜一些图片素材之外，对我们最动画的帮助很大。这里就得额外讲一下Android中的动画了。
考虑本文并不是专门讲解动画的篇章，什么帧动画，补间动画、属性动画之类的动画定义就不详细讲解了，写博客时间不长，以后可以慢慢补充。这里主要针对一些场景对比一下gif动画和一款神奇的动画加载库--Lottie。如果我们自定义一些个性的刷新头或者引导页、或者加载中dialog弹窗的时候是不是需要做一些动画呢，这时候可能会用到gif图，简单使用一下没问题，但是一些精致的动画就不行了，而且gif图有个很大的问题，就是毛边现象无法解决，无论是Glide等图片框架还是专门加载Gif的gif-drawable库，都不行，还可以使用APNG格式的图片，和Gif差不多，可以理解为是第一帧没有毛边的gif图片，APNG图片本身也不小，较大时会明显耗时，而且原生安卓也不支持，有兼容问题，所以也不推荐。这里推荐一个神奇的动画加载库--Lottie，它有点类似SVG动画，通过绘制路径的形式来绘制动画，但又比SVG要简单的多，因为同样是绘制路径，SVG需要我们自己却写一些自定义控件，而Lottie主要的工作是在漂亮的和帅帅的美工那里，要需要他们利用Photoshop的一个插件生成对应想要制作动画的json文件，然后你拿过来加载一下就好了，没错，是json文件，放一段代码感受一下：
{"assets":[{"id":"comp_3","layers":[{"ddd":0,"ind":0,"ty":4,"nm":"Shape Layer 7","ks":{"o":{"k":100},"r":{"k":60},"p":{"k":[297.498,470.398,0]},"a":{"k":[-174.535,-132.535,0]},"s":{"k":[{"i":{"x":[0.833,0.833,0.833],"y":[0.833,0.833,0.833]},"o":{"x":[0.167,0.167,0.167],"y":[0.167,0.167,0.167]},"n":["0p833_0p833_0p167_0p167","0p833_0p833_0p167_0p167","0p833_0p833_0p167_0p167"],"t":0,"s":[199,199,100],"e":[150,150,100]},{"i":{"x":[0.833,0.833,0.833],"y":[0.833,0.833,0.833]},"o":{"x":[0.167,0.167,0.167],"y":[0.167,0.167,0.167]},"n":["0p833_0p833_0p167_0p167","0p833_0p833_0p167_0p167","0p833_0p833_0p167_0p167"],"t":14,"s":[150,150,100],"e":[150,150,100]},{"i":{"x":[0.833,0.833,0.833],"y":[0.833,0.833,0.833]},"o":{"x":[0.167,0.167,0.167],"y":[0.167,0.167,0.167]},"n":["0p833_0p833_0p167_0p167","0p833_0p833_0p167_0p167","0p833_0p833_0p167_0p167"],"t":20,"s":[150,150,100],"e":[200,200,100]},{"t":36}]}},"ao":0,"shapes":[{"ty":"gr","it":[{"d":1,"ty":"el","s":{"k":[36.93,36.93]},"p":{"k":[0,0]},"nm":"Ellipse Path 1","mn":"ADBE Vector Shape - Ellipse"},{"ty":"st","c":{"k":[1,1,1,1]},"o":{"k":100},"w":{"k":2},"lc":1,"lj":1,"ml":4,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke"},{"ty":"fl","c":{"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":4,"s":[0.13,0.49,0.99,1],"e":[0.99,0.28,0.43,1]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":6,"s":[0.99,0.28,0.43,1],"e":[1,0.42,0.22,1]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":8,"s":[1,0.42,0.22,1],"e":[0.74,0.34,1,1]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":12,"s":[0.74,0.34,1,1],"e":[0.21,0.65,1,1]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":15,"s":[0.21,0.65,1,1],"e":[0.02,0.85,0.8,1]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":17,"s":[0.02,0.85,0.8,1],"e":[0.99,0.28,0.43,1]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":18,"s":[0.99,0.28,0.43,1],"e":[1,0.42,0.22,1]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":21,"s":[1,0.42,0.22,1],"e":[0.74,0.34,1,1]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":24,"s":[0.74,0.34,1,1],"e":[0.21,0.65,1,1]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":27,"s":[0.21,0.65,1,1],"e":[0.02,0.85,0.8,1]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":30,"s":[0.02,0.85,0.8,1],"e":[0.1,0.84,0,0.99]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":33,"s":[0.1,0.84,0,0.99],"e":[0.13,0.49,0.99,1]},{"t":35}]},"o":{"k":100},"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill"},{"ty":"tr","p":{"k":[-174.535,-132.535],"ix":2},"a":{"k":[0,0],"ix":1},"s":{"k":[100,100],"ix":3},"r":{"k":0,"ix":6},"o":{"k":100,"ix":7},"sk":{"k":0,"ix":4},"sa":{"k":0,"ix":5},"nm":"变换"}],"nm":"Ellipse 1","np":3,"mn":"ADBE Vector Group"}],"ip":-1,"op":57,"st":-1,"bm":0,"sr":1},{"ddd":0,"ind":1,"ty":4,"nm":"Shape Layer 6","ks":{"o":{"k":100},"r":{"k":[{"i":{"x":[0.176],"y":[0.697]},"o":{"x":[0.707],"y":[0.098]},"n":["0p176_0p697_0p707_0p098"],"t":16,"s":[60],"e":[420]},{"t":36}]},"p":{"k":[304.465,586.465,0]},"a":{"k":[-70.535,-80.535,0]},"s":{"k":[100,100,100]}},"ao":0,"shapes":[{"ty":"gr","it":[{"d":1,"ty":"el","s":{"k":[36.93,36.93]},"p":{"k":[0,0]},"nm":"Ellipse Path 1","mn":"ADBE Vector Shape - Ellipse"},{"ty":"st","c":{"k":[1,1,1,1]},"o":{"k":100},"w":{"k":2},"lc":1,"lj":1,"ml":4,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke"},{"ty":"fl","c":{"k":[0.1,0.84,0,1]},"o":{"k":100},"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill"},{"ty":"tr","p":{"k":[-174.535,-132.535],"ix":2},"a":{"k":[0,0],"ix":1},"s":{"k":[100,100],"ix":3},"r":{"k":0,"ix":6},"o":{"k":100,"ix":7},"sk":{"k":0,"ix":4},"sa":{"k":0,"ix":5},"nm":"变换"}],"nm":"Ellipse 1","np":3,"mn":"ADBE Vector Group"}],"ip":16,"op":48,"st":16,"bm":0,"sr":1},{"ddd":0,"ind":2,"ty":4,"nm":"Shape Layer 5","ks":{"o":{"k":100},"r":{"k":[{"i":{"x":[0.176],"y":[0.697]},"o":{"x":[0.707],"y":[0.098]},"n":["0p176_0p697_0p707_0p098"],"t":13,"s":[60],"e":[420]},{"t":33}]},"p":{"k":[304.465,586.465,0]},"a":{"k":[-70.535,-80.535,0]},"s":{"k":[100,100,100]}},"ao":0,"shapes":[{"ty":"gr","it":[{"d":1,"ty":"el","s":{"k":[36.93,36.93]},"p":{"k":[0,0]},"nm":"Ellipse Path 1","mn":"ADBE Vector Shape - Ellipse"},{"ty":"st","c":{"k":[1,1,1,1]},"o":{"k":100},"w":{"k":2},"lc":1,"lj":1,"ml":4,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke"},{"ty":"fl","c":{"k":[0.02,0.85,0.8,1]},"o":{"k":100},"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill"},{"ty":"tr","p":{"k":[-174.535,-132.535],"ix":2},"a":{"k":[0,0],"ix":1},"s":{"k":[100,100],"ix":3},"r":{"k":0,"ix":6},"o":{"k":100,"ix":7},"sk":{"k":0,"ix":4},"sa":{"k":0,"ix":5},"nm":"变换"}],"nm":"Ellipse 1","np":3,"mn":"ADBE Vector Group"}],"ip":13,"op":45,"st":13,"bm":0,"sr":1},{"ddd":0,"ind":3,"ty":4,"nm":"Shape Layer 4","ks":{"o":{"k":100},"r":{"k":[{"i":{"x":[0.176],"y":[0.697]},"o":{"x":[0.707],"y":[0.098]},"n":["0p176_0p697_0p707_0p098"],"t":10,"s":[60],"e":[420]},{"t":30}]},"p":{"k":[304.465,586.465,0]},"a":{"k":[-70.535,-80.535,0]},"s":{"k":[100,100,100]}},"ao":0,"shapes":[{"ty":"gr","it":[{"d":1,"ty":"el","s":{"k":[36.93,36.93]},"p":{"k":[0,0]},"nm":"Ellipse Path 1","mn":"ADBE Vector Shape - Ellipse"},{"ty":"st","c":{"k":[1,1,1,1]},"o":{"k":100},"w":{"k":2},"lc":1,"lj":1,"ml":4,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke"},{"ty":"fl","c":{"k":[0.21,0.65,1,1]},"o":{"k":100},"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill"},{"ty":"tr","p":{"k":[-174.535,-132.535],"ix":2},"a":{"k":[0,0],"ix":1},"s":{"k":[100,100],"ix":3},"r":{"k":0,"ix":6},"o":{"k":100,"ix":7},"sk":{"k":0,"ix":4},"sa":{"k":0,"ix":5},"nm":"变换"}],"nm":"Ellipse 1","np":3,"mn":"ADBE Vector Group"}],"ip":10,"op":45,"st":10,"bm":0,"sr":1},{"ddd":0,"ind":4,"ty":4,"nm":"Shape Layer 3","ks":{"o":{"k":100},"r":{"k":[{"i":{"x":[0.176],"y":[0.697]},"o":{"x":[0.707],"y":[0.098]},"n":["0p176_0p697_0p707_0p098"],"t":7,"s":[60],"e":[420]},{"t":27}]},"p":{"k":[304.465,586.465,0]},"a":{"k":[-70.535,-80.535,0]},"s":{"k":[100,100,100]}},"ao":0,"shapes":[{"ty":"gr","it":[{"d":1,"ty":"el","s":{"k":[36.93,36.93]},"p":{"k":[0,0]},"nm":"Ellipse Path 1","mn":"ADBE Vector Shape - Ellipse"},{"ty":"st","c":{"k":[1,1,1,1]},"o":{"k":100},"w":{"k":2},"lc":1,"lj":1,"ml":4,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke"},{"ty":"fl","c":{"k":[0.74,0.34,1,1]},"o":{"k":100},"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill"},{"ty":"tr","p":{"k":[-174.535,-132.535],"ix":2},"a":{"k":[0,0],"ix":1},"s":{"k":[100,100],"ix":3},"r":{"k":0,"ix":6},"o":{"k":100,"ix":7},"sk":{"k":0,"ix":4},"sa":{"k":0,"ix":5},"nm":"变换"}],"nm":"Ellipse 1","np":3,"mn":"ADBE Vector Group"}],"ip":7,"op":45,"st":7,"bm":0,"sr":1},{"ddd":0,"ind":5,"ty":4,"nm":"Shape Layer 2","ks":{"o":{"k":100},"r":{"k":[{"i":{"x":[0.176],"y":[0.697]},"o":{"x":[0.707],"y":[0.098]},"n":["0p176_0p697_0p707_0p098"],"t":3,"s":[60],"e":[420]},{"t":23}]},"p":{"k":[304.465,586.465,0]},"a":{"k":[-70.535,-80.535,0]},"s":{"k":[100,100,100]}},"ao":0,"shapes":[{"ty":"gr","it":[{"d":1,"ty":"el","s":{"k":[36.93,36.93]},"p":{"k":[0,0]},"nm":"Ellipse Path 1","mn":"ADBE Vector Shape - Ellipse"},{"ty":"st","c":{"k":[1,1,1,1]},"o":{"k":100},"w":{"k":2},"lc":1,"lj":1,"ml":4,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke"},{"ty":"fl","c":{"k":[1,0.77,0,1]},"o":{"k":100},"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill"},{"ty":"tr","p":{"k":[-174.535,-132.535],"ix":2},"a":{"k":[0,0],"ix":1},"s":{"k":[100,100],"ix":3},"r":{"k":0,"ix":6},"o":{"k":100,"ix":7},"sk":{"k":0,"ix":4},"sa":{"k":0,"ix":5},"nm":"变换"}],"nm":"Ellipse 1","np":3,"mn":"ADBE Vector Group"}],"ip":3,"op":45,"st":3,"bm":0,"sr":1},{"ddd":0,"ind":6,"ty":4,"nm":"Shape Layer 1","ks":{"o":{"k":100},"r":{"k":[{"i":{"x":[0.176],"y":[0.697]},"o":{"x":[0.707],"y":[0.098]},"n":["0p176_0p697_0p707_0p098"],"t":0,"s":[60],"e":[420]},{"t":20}]},"p":{"k":[304.465,586.465,0]},"a":{"k":[-70.535,-80.535,0]},"s":{"k":[100,100,100]}},"ao":0,"shapes":[{"ty":"gr","it":[{"d":1,"ty":"el","s":{"k":[36.93,36.93]},"p":{"k":[0,0]},"nm":"Ellipse Path 1","mn":"ADBE Vector Shape - Ellipse"},{"ty":"st","c":{"k":[1,1,1,1]},"o":{"k":100},"w":{"k":2},"lc":1,"lj":1,"ml":4,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke"},{"ty":"fl","c":{"k":[0.99,0.28,0.43,1]},"o":{"k":100},"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill"},{"ty":"tr","p":{"k":[-174.535,-132.535],"ix":2},"a":{"k":[0,0],"ix":1},"s":{"k":[100,100],"ix":3},"r":{"k":0,"ix":6},"o":{"k":100,"ix":7},"sk":{"k":0,"ix":4},"sa":{"k":0,"ix":5},"nm":"变换"}],"nm":"Ellipse 1","np":3,"mn":"ADBE Vector Group"}],"ip":0,"op":45,"st":0,"bm":0,"sr":1}]}],"layers":[{"ddd":0,"ind":0,"ty":0,"nm":"cPre-comp 3","refId":"comp_3","ks":{"o":{"k":100},"r":{"k":0},"p":{"k":[109,115,0]},"a":{"k":[375,667,0]},"s":{"k":[40,40,100]}},"ao":0,"ef":[{"ty":5,"nm":"快速模糊","mn":"ADBE Fast Blur","ix":1,"ef":[{"ty":0,"nm":"模糊度","mn":"ADBE Fast Blur-0001","ix":1,"v":{"k":51}},{"ty":7,"nm":"模糊方向","mn":"ADBE Fast Blur-0002","ix":2,"v":{"k":1}},{"ty":7,"nm":"重复边缘像素","mn":"ADBE Fast Blur-0003","ix":3,"v":{"k":0}}]},{"ty":5,"nm":"简单阻塞工具","mn":"ADBE Simple Choker","ix":2,"ef":[{"ty":7,"nm":"视图","mn":"ADBE Simple Choker-0001","ix":1,"v":{"k":1}},{"ty":0,"nm":"阻塞遮罩","mn":"ADBE Simple Choker-0002","ix":2,"v":{"k":-27.4}}]}],"w":750,"h":1334,"ip":0,"op":48,"st":0,"bm":0,"sr":1}],"v":"4.5.4","ddd":0,"ip":0,"op":35,"fr":25,"w":160,"h":160}
如果看不过来，可以使用快捷键 shift+end复制一整行去其它编辑器上看一下，这是一段刷新的动画，是不和网络请求来的json一毛一样，首先你要明白一件事，这段json格式的动画占用的资源要比图片的gif要小的多得多，具体的lottie使用，这里放个引导链接，有兴趣的可以去看一下：链接
回到主题，前面介绍了这么多lottie，Dribbble这个网站一大优势就是可以直接搜索到一些json动画，另外公司美工制作的json如果不能整正确加载，可以让他尝试将里面所有的静态文字图案都用帧动画去渲染就好了，想做练习，拿我上面的放的代码也是可以的。
-- LottieFiles
补充这个网站
相对于上面那个图片网站，这个就是一个专业的json动画网站，还能扫二维码等操作，现在json动画的应用越来越广了，甚至前段开发人员也会用到这个动画，另外再附一个更好的介绍文章--链接
-- 标你妹
一个可以自动生成dp标注的网页，如果你们美工只切苹果版px标注的话，这个网站就很有必要推荐给ta们！
基本的图片网站就推荐以上那些了，下一篇准备写关于图片适配，以及适配不当内存占用等问题