Swift: 打造滑动解锁文字动画

最新推荐文章于 2023-05-05 10:28:39 发布

future_challenger

最新推荐文章于 2023-05-05 10:28:39 发布

阅读量1.3k

点赞数

分类专栏： Swift Animation 文章标签： swift animation slide to unlock

本文链接：https://blog.csdn.net/future_challenger/article/details/43673871

版权

本文介绍了如何使用Swift和CAGradientLayer创建一个类似'滑动解锁'的文字动画效果。通过设置UILabel、Gradient Layer和动画，实现了从渐变色到白色的文字高亮过渡，并通过重构代码以方便在多个地方复用此功能。

摘要由CSDN通过智能技术生成

最近木事，找出来玩了玩facebook的paper。到处都是那个"slide to unlock your phone"的效果啊。忽闪忽闪的小有点炫酷的感觉。于是准备研究一下。木有想到的是居然可以用CAGradientLayer和一个小小的动画就可以实现这个效果。“滑动解锁”的效果：

当然啦，首先你需要显示出这个“滑动解锁”的文本。这里咱们就用一个简单的UILabel来解决这个问题。

    var textExampleLabel: UILabel!

    override func viewDidLoad() {
        super.viewDidLoad()
        
        textExampleLabel = UILabel(frame: CGRectMake(10, 100, UIScreen.mainScreen().bounds.size.width - 20, 30))
        textExampleLabel.text = "slide to unlock your phone, slide to unlock your"
        self.view.addSubview(textExampleLabel)
    }

label作为成员变量（属性），在viewDidLoad方法中初始化并赋给“滑动解锁”的文本。

之后就用Gradient Layer来mask这段文本。来看看怎么准备这mask。要使用CALayer这个东东，千万不能少得就是前提条件需要引入QuartzCore。

import QuartzCore

之后为了迎接随后到来的gradient mask，需要重构一部分代码。让整个背景的颜色都为黑色，让label的文字为白色。这样看起来这个解锁的动画效果在强烈的黑白对比下更加明显。重构之后的代码：

        self.view.backgroundColor = UIColor.blackColor()
        
        textExampleLabel = UILabel(frame: CGRectMake(10, 100, UIScreen.mainScreen().bounds.size.width - 20, 30))
        textExampleLabel.text = "slide to unlock your phone, slide to unlock yo"
        textExampleLabel.backgroundColor = UIColor.blackColor() // background color -> black
        textExampleLabel.textColor = UIColor.whiteColor()       // foreground color -> white
        self.view.addSubview(textExampleLabel)

这些都是在viewDidLoad方法中的。

下面开始添加mask：

        var gradientMask = CAGradientLayer()
        let colors: Array<AnyObject> = [UIColor.blackColor().CGColor, UIColor.whiteColor().CGColor, UIColor.blackColor().CGColor]
        gradientMask.colors = colors
        
        
        textExampleLabel.layer.mask = gradientMask

运行出来之后，你会吓一跳。因为，全部都是黑得了。。。

这是因为，mask属性需要用到的是颜色的透明部分。也就是说给定的变化的颜色需要出现一部分透明或者半透明的颜色，这样的gradient layer作为另外一个layer的mask才能发挥作用。另外需要千万注意的一个问题是，上面的gradientMask还需要有一个frame。一般这个值是mask属性所在view的bounds。不要错用了frame，那样gradientMask就mask到错误的地方了。那么补全代码之