뭐야?

잠금 화면에서 이런 식으로 빛나는 텍스트



Facebook의 Paper나 Rooms에서도 로딩중의 애니메이션으로서 사용되고 있습니다.
만들어 보았습니다.

만드는 방법

개요

Storyboard에서
1. UIViewController에 UILabel을 붙이고 원하는 속성을 설정합니다.
2. 설정한 UILabel을 코드와 연결

스토리 보드의 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의 위치를 ​​애니메이션으로 만듭니다.

    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をみせるため

샘플 코드

썼습니다.
htps : // 기주 b. 코 m / 토모 히코 사토 / 아니 마테 dG 라다치 온테 xt