Cocoaの日々情報局

こんな感じ。





方向は上下左右の指定ができる。

２枚の画像を重ね合わせるだけでなくグラデーションマスク（レイヤー）を重ねているところがミソ。

- (NSArray *)getGradientColors
{
    return [NSArray arrayWithObjects:
            (id)[UIColorFromHexAlpha(0xffffff, 1) CGColor],
                  :
            (id)[UIColorFromHexAlpha(0xffffff, 1) CGColor],
            (id)[UIColorFromHexAlpha(0xffffff, 0.99) CGColor],
            (id)[UIColorFromHexAlpha(0xffffff, 0.95) CGColor],
            (id)[UIColorFromHexAlpha(0xffffff, 0.9) CGColor],
            (id)[UIColorFromHexAlpha(0xffffff, 0.8) CGColor],
            (id)[UIColorFromHexAlpha(0xffffff, 0.7) CGColor],
            (id)[UIColorFromHexAlpha(0xffffff, 0.6) CGColor],
            (id)[UIColorFromHexAlpha(0xffffff, 0.5) CGColor],
            (id)[UIColorFromHexAlpha(0xffffff, 0.4) CGColor],
            (id)[UIColorFromHexAlpha(0xffffff, 0.3) CGColor],
            (id)[UIColorFromHexAlpha(0xffffff, 0.2) CGColor],
            (id)[UIColorFromHexAlpha(0xffffff, 0.1) CGColor],
            (id)[UIColorFromHexAlpha(0xffffff, 0.05) CGColor],
            (id)[UIColorFromHexAlpha(0xffffff, 0.01) CGColor],
            nil];
}

こういうのを用意しておいて、

_maskLayer = [CAGradientLayer layer];
    
    switch (_animationDirection)
    {
        case AnimationDirectionLeftToRight:
            _maskLayer.startPoint = CGPointMake(0, 0.5);
            _maskLayer.endPoint = CGPointMake(1, 0.5);
            break;
        case AnimationDirectionRightToLeft:
            _maskLayer.startPoint = CGPointMake(1, 0.5);
            _maskLayer.endPoint = CGPointMake(0, 0.5);
            break;
        case AnimationDirectionTopToBottom:
            _maskLayer.startPoint = CGPointMake(0.5, 0);
            _maskLayer.endPoint = CGPointMake(0.5, 1);
            break;
        case AnimationDirectionBottomToTop:
            _maskLayer.startPoint = CGPointMake(0.5, 1);
            _maskLayer.endPoint = CGPointMake(0.5, 0);
            break;
    }
    
    [_imageLayer setMask:_maskLayer];
        :
}
- (void)bindMaskLayer
{
    _maskLayer.colors = [self getGradientColors];
}

CAGradientLayerを作り、.colorsにセット。方向に応じて startPoint/endPointを調整。
一手間かけるだけでよくなる一例。

ネタ元はこちら

This post is archived under GUIライブラリ