iOS动画学习笔记3 Video Tutorial iOS Animation with Swift - Ray Wenderlich

今天要实现的动画效果很简单，就是大家每天都能看到的一个页面⬇️

主要的动画就是下面提示右滑的label有一个滑动渐变的感觉，有没有一种以假乱真的感觉，话不多说，上代码~

var gradientLayer: CAGradientLayer = CAGradientLayer()
var text = "Slide to reveal"

下面的视图区域开始有两个属性，一个是负责渐变效果的gradientLayer还有提示滑动的文本。

    gradientLayer.frame = CGRect(x: -bounds.size.width, y: bounds.origin.y,
                                 width: 3 * bounds.size.width,
                                 height: bounds.size.height)

    gradientLayer.startPoint = CGPoint(x: 0.0, y: 0.5)
    gradientLayer.endPoint = CGPoint(x: 1.0, y: 0.5)

    let colors: [AnyObject] = [
        UIColor.blackColor().CGColor,
        UIColor.whiteColor().CGColor,
        UIColor.blackColor().CGColor
    ]
    gradientLayer.colors = colors

    let locations: [NSNumber] = [0.25,0.5,0.75]
    gradientLayer.locations = locations

    layer.addSublayer(gradientLayer)

设置startPoint（渐变起始点）和endPoint（渐变结束点）的位置要用到CAGradientLayer的坐标系统，然后设置gradientLayer的渐变颜色，最后设置渐变的location，每一个点表示颜色在CAGradientLayer坐标系相对位置处要开始进行渐变颜色了。设置完效果如下：

现在给这个渐变效果加上动画：

        let gradientAnimation = CABasicAnimation(keyPath: "locations")
        gradientAnimation.fromValue = [0.0,0.0,0.25]
        gradientAnimation.toValue = [0.65,1.0,1.0]
        gradientAnimation.duration = 3.0
        gradientAnimation.repeatCount = 1_000_000
        gradientAnimation.removedOnCompletion = false
        gradientAnimation.fillMode = kCAFillModeForwards

        gradientLayer.addAnimation(gradientAnimation, forKey: nil)

通过更改gradientLayer的location属性，也就是更改颜色从哪里开始变化，达到一种渐变滑动的感觉。记得设置动画结束后不移除，也就是removedOnCompletion为false，然后出现在屏幕前方。效果如下：

有了动画效果后，需要为gradientLayer覆盖上一层mask遮罩，这样才能实现类似于字体的滑动效果。CALayer的mask属性就是给一个layer添加一层，让这个layer只显示遮罩范围内的部分，其他部分被遮住。像Marin所展示的这样，给一张方形自拍遮上圆形或心形遮罩，让整个图片变圆形或爱心~

首先要根据之前的text文本画出遮罩的大致形状，这里用到了Core Graphics框架，Core Graphics是iOS上所有绘图功能的基石，包括UIKit。使用Core Graphics，可以创建直线、路径、渐变、文字与图像等内容，并可以做变形处理，图像质量较高。

    let font = UIFont(name:"HelveticaNeue-Thin", size: 28.0)
    let style = NSMutableParagraphStyle()
    style.alignment = .Center

    UIGraphicsBeginImageContext(frame.size)
    let context = UIGraphicsGetCurrentContext()

    text.drawInRect(bounds,withAttributes: [
                    NSFontAttributeName:font!,
                    NSParagraphStyleAttributeName:style])

    let image = UIGraphicsGetImageFromCurrentImageContext()

    UIGraphicsEndImageContext()

首先需要创建绘制图片的上下文context，然后根据文本内容绘制文字遮罩，可以设置文本的字体以及段落样式。调用UIGraphicsGetImageFromCurrentImageContext函数可从当前上下文中获取一个UIImage对象，将这个UIImage赋给遮罩层，遮罩层就有了文字的形状。记住在所有的绘图操作后别忘了调用UIGraphicsEndImageContext函数关闭图形上下文。绘制好的文字遮罩层如下图：

        let maskLayer = CALayer()
        maskLayer.backgroundColor = UIColor.clearColor().CGColor
        maskLayer.frame = CGRectOffset(bounds, bounds.size.width, 0)
        maskLayer.contents = image.CGImage

        gradientLayer.mask = maskLayer

将制作好的文字遮罩层maskLayer赋给上面的渐变层，这样就有了文本滑动渐变的效果了：

感觉挺好玩的，大家不妨一试~