实现歌词逐渐变色的动画,像卡拉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. 学用MVC4做网站六后台管理:6.1.1管理员登录、6.1.2退出

    1.管理员登录 在6.1中已添加控制器[AdministratorController] 在控制器中添加[Login()]action,用来显示登录页面 /// <summary> /// ...

  2. PS批处理的使用

    一. 前言 做开发的时候,最多的时候就是图片的使用了.有时候图片的处理都按照同样的步骤,比如说统一将图片的大小调整为固定大小,或者统一在所有的图片的的某个位置上加入文字或者小图片等等,这时候PS的批处 ...

  3. Android调用Jni,非常简单的一个Demo

    step1:创建一个android项目       Project Name:jnitest       Build Target: Android 1.6       Application Nam ...

  4. Javascript一些实用技巧

    1.利用NumberObj的toString(radix)方法获取随机数字字母字符串,radix是表示数字的基数,就是进制,如下所示 var getRndAlphaNumStr = (len) =&g ...

  5. C# 一个页面,多个Updatepannel,多个Timer

    这几天在搞一个项目,其中一个页面里面有好几组数据要定时刷新,但是,每一组数据要刷新的时间不一样,所以就需要用到多个定时器.本人刚工作不久,对Js 的Ajax不太了解,反而对微软的那个Ajax相对了解一 ...

  6. OWIN 中 K Commands(OwinHost.exe)与 Microsoft.AspNet.Hosting 的角色问题

    问题详情:K Commands(OwinHost.exe)是不是 OWIN 中的 Host 角色?如果是,那 Microsoft.AspNet.Hosting 对应的是 OWIN 中的哪个角色? OW ...

  7. 如何 判断 设备 是否 连接 上 了 wifi

    这里,我给出一个函数 public boolean sale_connect_check(WifiConfiguration wcg,Context context) { boolean judge_ ...

  8. 1Z0-053 争议题目解析682

    1Z0-053 争议题目解析682 考试科目:1Z0-053 题库版本:V13.02 题库中原题为: 682.Identify the scenarios in which the RMAN CROS ...

  9. 重温Servlet学习笔记--编码问题

    在说编码问题之前,首先先了解一下常见的字符编码: ISO-8859-1:  拉丁编码,不支持中文 gbk,gb2312,gb18030:系统默认编码,是中国的国标码 utf-8: 支持几乎所有语言的编 ...

  10. CompoundButton.OnCheckedChangeListener与RadioGroup.OnCheckedChangeListener冲突

    当RadioGroup与CompoundButton同时存在且都要监听事件时CompoundButton.OnCheckedChangeListener与RadioGroup.OnCheckedCha ...