BMMusicPlayer简介

基于FreeStreamer播放器二次封装。仿网易云封面图旋转，转圈音乐动效。全局基于ASDK。

里面有几个算是技术点吧，分别为：

仿’爱奇艺’Tabbar点击动画切换效果
list页面cell采用ASDK实现layer化
播放器单利实现，除”关闭”，”进度条滑块”采用ASDK实现layer化。
播放器背景使用封面图背景高斯模糊效果，获取图片主色调作为shandow。音效动画同样获取图片主色调。

现在来分别的来详细说说

仿”爱奇艺”Tabbar的点击切换效果。

之前一直觉得爱奇艺的动画做的好屌~很多动画单纯用代码实现，仅一个路径就要画死人。并且很多app的小控件做的都很厉害。你可以看看很多主流的播放器的播放暂停按钮，那个动画简直让人不知道如何用纯代码实现。在羡慕的同时就发现一个很有意思的库:lottie。这个是airbnb开源的一个动画库，当然现在已经很普及了。它是通过设计师设计或者网上下载一些素材通过Adobe After Effects配合对应的外挂扩展插件到处一个json。然后再项目带入对应的库，调用json来实现动画效果。

整体体验下来效果还是不错的。而且过程也很简单。但是有一个痛点是灵活性不足—不方便于修改。一般来说都是设计师做好了整个成品（注意：里面可能还设计尺寸匹配），然后生成json，各端导入。而json文件为了大小，可读性基本为0。那么就带来了另外一个问题。几乎不可以二次修改。

有一个官方的素材库：https://www.lottiefiles.com/ 里面的动画真的厉害的不行。但是基于第二点问题。里面真正开源，也就是带有AEP资源的其实很少。而一般来说这种动画都需要做一点程度的定制化，也就导致真正可用的其实不多。

不过~如果您公司有一个牛逼的设计师。用这个库还是超级爽歪歪的。

ASDK

ASDK也就是FaceBook开源的非常出名的AsyncDisplayKit,但已经改名为Texture。

最早知道这个库是在研究YYKit时，作者提到很多核心渲染逻辑是借鉴的它。具体有多调，网上随便搜索一下就知道了。之前一直没有机会接触到，刚好有一个新项目，就用80%的ASDK写了。

基本上重新封装了整个UIKit，大到控制器，小到Label。主要说一说使用感受。

异步控制：之前一直觉得既然是异步渲染，那么在写业务代码的时候是有多繁琐啊。使用下来发现其实还好。正常的View里面的线程处理问题不会特别复杂，我也没遇到什么大的问题。主要遇到的问题都在动画上。

View与Layer选择：这个库很吊的是，很多空间都可以直接使用Layer来绘制。比如播放器的List页面，里面的封面图，new整个视图，锁整个视图，标题，时间都是在一个层级。但是带来一个弊端是：调式有点傻~ 需要一个一个把isLayerBacked关掉。

布局：首先ASDK是不支持AutoLayout的，引入了新的布局方式Flex。要么你不想有成本就傻傻的用frame布局。但是这明显不是一个正确的选择。说说Flex的学习成本吧，大概就是一天。然后你会发现这种布局方式太爽，太灵活，太兼容性强了。而且代码量也不是特别多。只是刚开始的时候有点不习惯。它的思路永远是从最小控件然后一点一点成Spec到最大。

缺点：学习成本，而且目前的2.7版本也不是一个很稳定版本（截稿位置，最近的commit是1天以前）。第三方的问题。正常的开发其实对第三方的依赖性很强的，而它不是特别的友好。动画问题，不知道这个是不是我个人的原因，总觉得怪怪的。而且因为异步的原因还有闪烁的问题，一直也没有很好的解决办法。

最后，给一点我的个人建议。排除这个库的体积来说，我觉得这个库还是值得引入的。但是已最小模块来使用。也就是说简单的没有交互的简单页面或者控件，小到VIew来用。你可以这样理解就把他当做是一个可变图片处理器。可以动态绘制出你需要的图。放在对应的View上。或者。。。YYkit

播放器动画

播放器动画其实拆2个，一个是最简单的基础动画，旋转。一个是多条圈的波纹动画。波纹动画上还有一个小圆点，从几个地方旋转出来。

核心思想其实就是把小圆点放在圈让，然后让圈也旋转。然后通过动画beginTime参数来控制波纹的效果，简单理解就是每个延时一点产生的视觉效果。

眨眼一看波纹动画的代码量好多。我也很觉得在demo使用UIKit的时候其实代码了很少的，只是在ASDK也不知道为什么我用动画组的时候只能执行一个动画。也是排查了很久才找到这个问题。于是需要给每一个动画设置重复的属性。

还有一个点是在圆角上的Shadow，也不算什么难点吧，但是可以提一下，就是分为2块，一块是是作为Shadow，一块作为圆角的裁剪

iOSPalette一个开源的提取一张图片的主色调。使得页面更加的生活灵活，不同的封面图下有不同的光晕和波纹动画，效果十分的赞。算法是Google拔下来。具体看看作者简书就好了，我这里也不过多介绍了。

截图演示(声音播放部分无法演示)

主代码说明

1.Tabbar部分

使用同一个animation来播放动画，通过移除添加控制生命周期。

2.播放器页面高斯模糊，shandow，音效动画

高斯模糊

因为使用asdk异步线程，告诉模糊放在了图片的归解档中。正常在主线程拿到下载后的图片中操作就好了。

获取主色作为shandow
1。因为是圆角添加shandow，涉及masksToBounds所以是在coverPictureNode背后有一个同样大小的coverPictureShadowNode上添加的shandow。
2。使用#import "iOSPalette.h"在- (**void**)getPaletteImageColor:(GetColorBlock)block;中获取主颜色，并设置给coverPictureShadowNode。同时这个时候把颜色给音效动画。

音效动画

音效动画分为2个小模块：1.旋转。2.波纹

旋转部分：

波纹部分：

在波纹地方有其实就是有kCoverPictureRippleCount条圈通过不同的beginTime实现。在asdk中有一个小问题是当使用动画组的时候，仅显示第一个动画，还没找到原因。当使用正常View时，通过设置动画组，并删除动画相同属性就好了，这样代码也精简很多。

停止动画：

单纯移除动画会导致旋转归零，产生视觉不适。