一行代码搞定酷炫动画
之前写了几篇关于UIView动画和CA动画的理论以及它们的关系，并没有真正从实践的角度去实现各个动画编程。然而这次就该记录下到底怎么在APP中运用各类动画了，也刚刚手上刚好有个音乐播放器demo,就拿你练手吧。
-
先来看看效果图到底是怎样的。
效果美到没话说
-
在构建的多个动画中，自己觉得有点小得意的就是歌曲列表后面那个随音乐跳动的动画。在第一个gif里面不能明显清晰的呈现出来，于是有了第二个gif。
第一个gif
-
第二个gif中就比较清晰可见了。非常有节日气氛，凌乱中带有美的感觉。如果加载到特定的app中，估计更有一番风味。这些都不重要，重要的是动画简单易得却不失风范。怎么简单？一行代码够简单了吧。世界上难道还存在不用代码就能实现动画的吗？那是storyboard世界吗？嘻嘻开个玩笑，估计有，是我不知道而已。
GRMusicUIAnimation2.gif
容我先记录一下第一个gif里面所包含的动画吗？其实光看gif，有点难看出所有animation，还需娓娓道来。
-
1.首先从上往下开始说啊(要怪我吗)，第一个肯定是那个旋转的封面，这旋转动画想必不用多嘴，略过。
-
2.旋转封面上有个绿色进度条动画，高仿QQ音乐哦。自己把circleSleder改造后就成进度条了。
-
3.旋转封面还有个弹性动画，界面切换时展现。duration比较短，不太明显。
-
4.往下就是按钮btn的动画，摇晃和放大。当然也在界面切换时还有个弹性动画。
-
5.接着往下就是歌曲列表的动画。造gif时忘了拖动列表，所以歌曲列表中cell的酷炫动画没有呈现出来。不过这个动画在另一界面中滚动tableView时呈现出来了。这动画思想源于老镇。
-
6.界面切换回来时，整个歌曲列表有个3D动画，不知道察觉到没有。
-
7.歌曲列表背后有个随音乐跳动的动画，也就是待会重点记录说明的动画。
-
8.底部有个向左滚动的label。其实它并不是label，它是一个button。button上实现的动画哦！原创哦，还可以吧！界面切换回来的时候它也有个弹性动画。
-
9.另一界面的频道列表滚动时cell的动画。
-
10.其实还有一个小动画，就是点击音乐控制btn按钮时候弹出的提示窗口。很多牛人一看就知道怎么回事。我采用的的框架是swiftNotice。不过这框架不支持纯文本动画，自己扩展的呢，顺便把frame也重写了下。
-
至此已经基本记录完这个demo所具有的动画。
该好好说说那个随音乐跳动的动画了吧？说好的一行代码呢？！请看大屏幕。
animation音乐波动 = GRMusicAnimation(rect: self.geQuLieBiao.frame, number: 5)
-
够简单的接口吧。只带两个参数。
rect: 是指定这个动画视图的frame。
number:是指动画中要显示的柱子数。
柱子数为30的时候
-
柱子数为30的时候，是不是更有诱惑呢？
-
当然也有控制API，想要在什么时候启动就什么时候启动，什么时候停止就什么时候停止。
animation音乐波动.GRAnimateStart() animation音乐波动.GRAnimateStop()
这里值得一提的是我这个是属于UIView动画,也是连续动画，因此在UIView动画的结束闭包里面是连续调用了UIView.而手动终止动画layer.removeAllAnimations也会执行结束闭包。因此在终止动画的时候一定要考虑到在闭包里区分到底是自动播放动画完毕还是手动终止了动画。不加以区分的话是无法停止动画的。这问题也在前面的文章了记录了。
这是自己第一篇在简书使用gif图的文章 。感觉这gif造图工具好是好用，但虚化的背景压根渲染不来啊~下次换个git工具试试，哪位大牛有推荐吗？
网友评论