实现歌词逐渐变色的动画,像卡拉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. Visualize Surface by Delaunay Triangulator

    Visualize Surface by Delaunay Triangulator eryar@163.com Abstract. Delaunay Triangulation is the cor ...

  2. 用扩展开发一个PHP类

    原文:http://my.oschina.net/mickelfeng/blog/122519?p=1 假设我们要用PHP扩展实 现一个类Person,它有一个private的成员变量$_name和两 ...

  3. php面向对象基础

    1.类 由众多对象抽象出来的 它包含了对象通用的特性 2.对象 一切皆对象 它是由实例化出来的 例: 求两个圆之间阴影的面积 <!DOCTYPE html PUBLIC "-//W3C ...

  4. 【结果很简单,过程很艰辛】记阿里云Ons消息队列服务.NET接口填坑过程

    Maybe 这个问题很简单,因为解决方法是非常简单,但填坑过程会把人逼疯,在阿里云ONS工作人员.同事和朋友的协助下,经过一天的调试和瞎捣鼓,终于解决了这个坑,把问题记下来,也许更多人在碰到类似问题的 ...

  5. android标题栏下面弹出提示框(一) TextView实现,带动画效果

    产品经理用的是ios手机,于是android就走上了模仿的道路.做这个东西也走了一些弯路,写一篇博客放在这里,以后自己也可用参考,也方便别人学习. 弯路: 1.刚开始本来用PopupWindow去实现 ...

  6. Android获取内置sdcard跟外置sdcard路径

    Android获取内置sdcard跟外置sdcard路径.(测试过两个手机,亲测可用) 1.先得到外置sdcard路径,这个接口是系统提供的标准接口. 2.得到上一级文件夹目录 3.得到该目录的所有文 ...

  7. SubSonic3.0.0.4.2源码包与调用Dll

    ================================================================ 名    称:SubSonic插件版    本:3.0.0.4.2最后 ...

  8. Oracle_SQL函数-单行函数

    SQL函数 SQL函数分类 SQL函数主要有两种,分为单行函数.多行函数 单行函数:只对一行进行变换,每行返回一个结果.可以转换数据类型,可以嵌套参数可以是一列或一个值 多行函数:多行函数,每次对一组 ...

  9. ASP.NET:注销功能实现

    原理:清空Session 1.Web窗体:index.aspx <a href="logoutHandler.ashx">注销</a> 2.一般处理程序:L ...

  10. iframe编程的一些问题

    前几天做一个用iframe显示曲线图的demo,发现对iframe的contentDocument绑定 onclick事件都无效,而在页面中对iframe.contentDocument的onclic ...