ロック画面のスライドでロック解除みたいな文字の作り方

なんのこと？

ロック画面でこういう風に光るテキストのこと

FacebookのPaperやRoomsでもローディング中のアニメーションとして使われています。
つくってみました。

つくりかた

概要

Storyboard上で

1. UIViewControllerにUILabelをくっつけて、好きなプロパティを設定する
2. 設定したUILabelをコードと結びつける

StoryboardのUILabelと結びつけたコード上で
3. CAGradientLayerでグラデーションするレイヤーをつくる
4. CATextLayerでStoryboardで設定したUILabelと同じテキストをつくる
5. 3のGradientLayerのmaskに4のTextLayerをいれる
6. グラデーションをアニメーションさせる
7. Storyboardで設定したテキストはClearColorにして見えなくする

1. UIViewControllerにUILabelをくっつけて、好きなプロパティを設定する。

こんな感じで適当にやりましょう。

2. コードと結びつける

Identity Inspector の Classにコードで書くクラス名を記述します。

3. CAGradientLayerでグラデーションするレイヤーをつくる

    _gradientLayer = [CAGradientLayer layer];
    _gradientLayer.startPoint = (CGPoint){0.0, 0.5}; //デフォルトだと縦にグラデーションするので設定
    _gradientLayer.endPoint = (CGPoint){1.0, 0.5};
    _gradientLayer.colors = @[
            (id)UIColor.blackColor.CGColor,
            (id)UIColor.whiteColor.CGColor,
            (id)UIColor.blackColor.CGColor
    ];
    _gradientLayer.locations = @[@0.0, @0.5, @1.0];
    _gradientLayer.frame = CGRectInset(self.bounds, - self.bounds.size.width, 0); //グラデーションをアニメーションさせたいので幅を大きめにしておきます。
    [self.layer addSublayer:_gradientLayer];

4. CATextLayerでテキストをつくる

    _maskLayer = [CATextLayer layer];
    _maskLayer.frame = CGRectMake(self.bounds.size.width, 0, self.bounds.size.width, self.bounds.size.height); //gradientlayer.mask に入れるので、gradientLayerからの相対座標にする。
    _maskLayer.string = self.text; //こういう風に書くとStoryboardで設定した値を取ってこれて便利。
    _maskLayer.font = (__bridge CFTypeRef)self.font;
    _maskLayer.fontSize = self.font.pointSize;
    _maskLayer.alignmentMode = kCAAlignmentCenter;
    _maskLayer.contentsScale = [[UIScreen mainScreen] scale];

5. 3のGradientLayerのmaskに4のTextLayerをいれる

グラデーションがテキストの形にマスクされます。

    _gradientLayer.mask = _maskLayer;

6. グラデーションをアニメーションさせる

CABasicAnimationやCAKeyframeAnimationを使うとCALayerのプロパティをアニメーションさせられます。今回はCAGradientLayerのlocationsをアニメーションさせます。

    CABasicAnimation *gradientAnimation= [CABasicAnimation animationWithKeyPath:@"locations"];
    gradientAnimation.fromValue = @[@0.0, @0.0, @0.25];
    gradientAnimation.toValue = @[@0.75, @1.0, @1.0];
    gradientAnimation.duration = 2.0;
    gradientAnimation.repeatCount = HUGE_VALF;
    [_gradientLayer addAnimation: gradientAnimation forKey:nil];

7. storyboardで設定したテキストはClearColorにして見えなくする

textLayerのテキストを見せるのでUILabelのテキストは見えなくしましょう。

   self.textColor = [UIColor clearColor]; // textlayerのtextをみせるため

サンプルコード

書きました。
https://github.com/TomohikoSato/AnimatedGradationText