实现歌词逐渐变色的动画,像卡拉OK一样可以根据时间进度来染色。效果如图:
 
因项目需求要实现一个类似歌词逐渐变色的效果,自己想来想去想不出来实现方案,还是得求助万能的google,
最终是找到了这篇博客http://www.iwangke.me/2014/10/06/how-to-implement-a-core-animation-based-60-fps-ktv-lyrics-view/,比较完美的解决了这个问题。
这篇博客已经将实现方案及其原理讲的很清楚了,只是没有具体的demo,所以我就把自己的demo放这儿(https://github.com/Phelthas/LXMLyricsLabel),顺便总结一下。
 
首先看需求:
要达到的效果是:原来的文本已经是显示出来了,然后文本逐渐从左到右逐渐改变颜色。
难点是“逐渐改变颜色”。
 
博客中给出的解决方案是将两个除了字体颜色其他属性都完全一样的label重叠放在一起,下面的是原来的字体颜色的whiteLabel,上面的是的染色后的greenLabel,然后控制greenLabel逐渐显示出来。
(博客中提到faceBook的shimmer(https://github.com/facebook/Shimmer) 也是用同样的实现方式)等有空了仔细研究下
 
那怎么才能控制greenLabel逐渐显示出来呢?
这里可不是渐隐渐现,而是从左到右依次显示出来!
所以就需要用到部分渲染,也就是利用layer的mask属性。
@property(strong) CALayer *mask;
 
mask虽然是个layer,但它并不会显示出来,它是用自己的alpha值来控制原layer内容渲染与否的一个layer。如果mask的alpha值为1,那原layer就会渲染出来,反之,就不会渲染出来,也就不会显示出来,而是透明的。
 
而且因为mask是个layer,可以给mask添加CAAnimation,
所以就可以用mask的动画来让原layer从左到右逐渐显示,
只需要给mask添加一个宽度从0到label宽度的动画就行了。
如果需要控制时间,用keyFrameAnimation就可以满足需求。
 
需要注意的是layer不能对frame做动画,只能对position和bounds做动画,所以要改变layer的frame,就得考虑position和bounds两个属性。这里我们只需要label从左到右渲染,所以可以利用下anchorPoint这个属性,将anchorPoint设置为(0,0.5)(其默认值是(0.5,0.5)),那改变layer的bounds的时候,它就只会想右边扩展了。
 
具体代码在demo里,这里就不贴了。
有什么问题,欢迎讨论。 

iOS歌词逐渐变色动画的更多相关文章

  1. IOS开发系列 --- 核心动画

    原始地址:http://www.cnblogs.com/kenshincui/p/3972100.html 概览 在iOS中随处都可以看到绚丽的动画效果,实现这些动画的过程并不复杂,今天将带大家一窥i ...

  2. iOS CAReplicatorLayer 实现脉冲动画效果

    iOS CAReplicatorLayer 实现脉冲动画效果 效果图 脉冲数量.速度.半径.透明度.渐变颜色.方向等都可以设置.可以用于地图标注(Annotation).按钮长按动画效果(例如录音按钮 ...

  3. iOS - Core Animation 核心动画

    1.UIView 动画 具体讲解见 iOS - UIView 动画 2.UIImageView 动画 具体讲解见 iOS - UIImageView 动画 3.CADisplayLink 定时器 具体 ...

  4. iOS 自定义转场动画

    代码地址如下:http://www.demodashi.com/demo/12955.html 一.总效果 本文记录分享下自定义转场动画的实现方法,具体到动画效果:新浪微博图集浏览转场效果.手势过渡动 ...

  5. iOS 自定义转场动画浅谈

    代码地址如下:http://www.demodashi.com/demo/11612.html 路漫漫其修远兮,吾将上下而求索 前记 想研究自定义转场动画很久了,时间就像海绵,挤一挤还是有的,花了差不 ...

  6. iOS自定义转场动画实战讲解

    iOS自定义转场动画实战讲解   转场动画这事,说简单也简单,可以通过presentViewController:animated:completion:和dismissViewControllerA ...

  7. VCTransitionsLibrary –自定义iOS交互式转场动画的库

    简介 VCTransitionsLibrary 提供了许多适用于入栈,出栈,模态等场景下控制器切换时的转场动画.它本身提供了一个定义好的转场动画库,你可以拖到自己工程中直接使用;也提供了许多拥有不同转 ...

  8. iOS 实现启动屏动画(Swift实现,包含图片适配)

    代码地址如下:http://www.demodashi.com/demo/12090.html 准备工作 首先我们需要确定作为宣传的图片的宽高比,这个一般是与 UI 确定的.一般启动屏展示会有上下两部 ...

  9. iOS Programming Controlling Animations 动画

    iOS Programming Controlling Animations 动画 The word "animation" is derived from a Latin wor ...

随机推荐

  1. OpenCASCADE Gauss Integration

    OpenCASCADE Gauss Integration eryar@163.com Abstract. Numerical integration is the approximate compu ...

  2. python利用dict模拟switch

    pytho本身并未提供switch语句,但可以通过dict来模拟switch, #方法1 def add(x,y): return x+y def dec(x,y): return x-y def m ...

  3. Vue 方法与事件处理器

    按键修饰符 在监听键盘事件时,我们经常需要检测 keyCode.Vue.js 允许为 v-on 添加按键修饰符: <!-- 只有在 keyCode 是 时调用 vm.submit() --> ...

  4. 深入理解javascript对象系列第三篇——神秘的属性描述符

    × 目录 [1]类型 [2]方法 [3]详述[4]状态 前面的话 对于操作系统中的文件,我们可以驾轻就熟将其设置为只读.隐藏.系统文件或普通文件.于对象来说,属性描述符提供类似的功能,用来描述对象的值 ...

  5. 2、Redis入门介绍

    1.什么是Redis Redis:REmote DIctionary Server(远程字典服务器) 是完全开源免费的,用C语言编写的,遵守BSD协议,是一个高性能的(key/value)分布式内存数 ...

  6. Objective-C中的单例模式

    ​    ​单例模式算是设计模式中比较简单的一种吧,设计模式不是只针对某种编程语言,在C++, Java, PHP等其他OOP语言也有设计模式,笔者初接触设计模式是通过<漫谈设计模式>了解 ...

  7. Ubuntu杂记——Ubuntu下以USB方式连接Android手机调试

    在Ubuntu下进行Android开发,发现自己的手机就算打开USB连接.USB调试还是连不上,一直都是显示??????.百度了很多,发现都是要改“ /etc/udev/rules.d/50-andr ...

  8. 【记录】GitHub/TortoiseGit 修改邮箱/提交者

    我使用 Git 客户端工具是 TortoiseGit,在提交更新的时候,不知何时起会出现下面这种情况: 正常提交作者信息显示应该是: 本来也没怎么注意,但是在提交历史中,记录就不显示出来了,也就是在首 ...

  9. 1Z0-053 争议题目解析346

    1Z0-053 争议题目解析346 考试科目:1Z0-053 题库版本:V13.02 题库中原题为: 346.What is the impact of the results of the outp ...

  10. (十八)WebGIS中清空功能和地图定位功能的设计以及实现

    文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/. 1.背景 当地图中增加了很多元素后,对不同的元素需要进行一定的控制,最 ...