Alex

利用CALayer mask实现文字颜色过渡效果选择器

好久没更新博客了,也不知道写点啥~ 最近在CocoaChina看到一篇投稿  视错觉UI  这UI效果感觉很有意思,但是作者的方法有点奇技淫巧的感觉。针对这个效果,我跟朋友经过一番讨论,感觉也可以用目前很多动画采用的CALayer mask思路来实现。

我们先来看一下CALayer mask的官方说明

我英文水平有点蹩脚,用翻译软件翻译一遍就能明白其大概的理论意思了,说起来会有点抽象。弄个demo大家就能很直观的理解了,这个demo也体现了我实现这个UI效果的核心思路。

我们找一张背景透明的百度logo图片

baidulogo

看代码:

我们将百度logo图片设置为新建的maskLayer的contents,然后将maskLayer设置为demoView.layer的mask遮罩。随后我们再添加一个背景色为红色尺寸大小为demoView一半的colorView为demoView的子视图,其效果呈现为:

63E9DB8C-90BA-4A59-A948-A978DB979820

我对其的理解是,只有当mask的内容不透明的部分和被遮罩的layer叠加的部分才能显示,且是以被遮罩的layer的颜色显示为优先的,这个可能一下无法理解,自己多实践一下就能慢慢理解了。


下面来讲我们对这个UI效果的具体设计与实现,代码已经封装上传至github,感兴趣的朋友可以下来看看。

其实很简单,我们封装一个视图,分为三层

 

最底层:一个带有颜色的选择滑块view(对应代码中的selectedView)

 

中间层:一个view上面放有标题label (对应代码中的titlesView)

 

最上层:一个用来遮罩的view,这个view layer的mask是以titlesView生成的image为contents的一个layer,再添加一个view的子视图对应的就是上述理论的colorView啦 (对应代码中的DDmaskView)

 

这样就形成了一个视图的层次架构了,可能我描述的不是很好,代码不多,具体的逻辑可以下载代码查看

github下载地址

有问题欢迎发邮件给我~

 

 

码字很辛苦,转载请注明来自Alex博客笔记《利用CALayer mask实现文字颜色过渡效果选择器》

评论

  1. 洲洲 #1

    文章不错,顺便问一句:po主你头像是本人吗?好帅啊。

    回复
    2016-01-5
    • Alex

      求不黑! 我还是个孩子!

      回复
      2016-01-7
  2. 隔壁老王 #2

    大牛 膜拜~

    回复
    2016-01-5