实现歌词逐渐变色的动画,像卡拉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. 【开源】OSharp3.0框架解说系列:新版本说明及新功能规划预览

    OSharp是什么? OSharp是个快速开发框架,但不是一个大而全的包罗万象的框架,严格的说,OSharp中什么都没有实现.与其他大而全的框架最大的不同点,就是OSharp只做抽象封装,不做实现.依 ...

  2. 用脚本如何实现将Linux下的txt文件批量转化为Windows下的txt文件?

    众所周知,Windows和Linux的文件换行回车格式不同,Windows下换行格式是\r\n(回车+换行),Linux下换行格式为\n(只是换行),因此,其中一个操作系统的文本文件若需要在另外一个中 ...

  3. iPhone 6/plus iOS Safari fieldset border 边框消失

    问题:iPhone6 plus 手机浏览网页,fieldset border 边框消失. 示例代码: <div> <fieldset style="border: 1px ...

  4. hibernate笔记--缓存机制之 一级缓存(session缓存)

    一级缓存: 又称为session缓存,它和session生命周期相同,周期非常短.是事务级别的缓存: 还是以Book和Category这两个表为例,我们用代码观察一个缓存的存在: 假设现在我要去查询i ...

  5. Cesium原理篇:3最长的一帧之地形(2:高度图)

           这一篇,接着上一篇,内容集中在高度图方式构建地球网格的细节方面.        此时,Globe对每一个切片(GlobeSurfaceTile)创建对应的TileTerrain类,用来维 ...

  6. what's this? 浅谈js中this的指向问题

    刚刚学习js的朋友可能和我一样,看到代码中的this总是一脸懵逼,不知道this到底指向谁.经过一段时间的了解,我想跟大家分享下自己的理解. 何时出现this 函数在调用的时候,会自动获得两个特殊变量 ...

  7. Android 短信监听及用途分析

    监听系统短信这个只能作为一个技术点来研究下,读者可能在工作中可能不会哦涉及到,一般的应用软件也不会有这个需求 但是作为程序员呢,多了解一下也是好的. Android 监听系统短信有什么用? 1.对系统 ...

  8. Go项目的目录结构

    项目目录结构如何组织,一般语言都是没有规定.但Go语言这方面做了规定,这样可以保持一致性,做到统一.规则化比较明确. 1.一般的,一个Go项目在GOPATH下,会有如下三个目录: |--bin |-- ...

  9. 我理解的this

    this指的就是当前上下文环境对象,主要分两种情况. 1.函数中的this指的是调用该函数的那个上下文环境对象 这个的理解还是非常重要的. 看一个全局函数的例子 var b = 1; function ...

  10. WPF阴影效果(DropShadowEffect)

    <TextBlock Text="阴影效果" FontSize="32"> <TextBlock.Effect> <DropSha ...