一句话实现性感动画swift_ios

一行代码搞定酷炫动画

之前写了几篇关于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工具试试,哪位大牛有推荐吗?

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,547评论 6 477
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,399评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,428评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,599评论 1 274
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,612评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,577评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,941评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,603评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,852评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,605评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,693评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,375评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,955评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,936评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,172评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 43,970评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,414评论 2 342

推荐阅读更多精彩内容