iOSがカラーグラデーションを実現するためのいくつかの方法

デモアドレス：https：//github.com/xiaochaofeiyu/YSCAnimation
有用な場合は、スターに質問し、提案して話し合うことを歓迎します。

1.CAGradientLayerはグラデーションを実現します

CAGradientLayerは、カラーグラデーションレイヤーを生成するために使用されるCALayerの特別なサブクラスであり、使用する方が便利です。以下に、関連するプロパティについて説明します。

色グラデーション色
場所グラデーションカラーの分割点
startPoint＆endPoint色のグラデーションの方向。範囲は（0,0）から（1.0,1.0）の間です。たとえば、（0,0）（1.0,0）は水平方向のグラデーションを表し、（0,0）（0,1.0））は垂直方向の直線グラデーションを表します

    CAGradientLayer * gradientLayer = [CAGradientLayerレイヤー]; 
    gradientLayer.colors = @ [（__ bridge id）[UIColor redColor] .CGColor、（__ bridge id）[UIColor yellowColor] .CGColor、（__ bridge id）[UIColor blueColor] .CGColor]; 
    gradientLayer.locations = @ [@ 0.3、@ 0.5、@ 1.0]; 
    gradientLayer.startPoint = CGPointMake（0、0）; 
    gradientLayer.endPoint = CGPointMake（1.0、0）; 
    gradientLayer.frame = CGRectMake（0、100、300、100）; 
    [self.view.layer addSublayer：gradientLayer];

CAGradientLayerは、グラデーション間のグラデーションを実現するためのシンプルで直感的なものですが、円形や曲線のグラデーションなど、グラデーション領域全体の形状をカスタマイズできないなど、特定の制限があります。

2.勾配を達成するためのコアグラフィックス関連の方法

iOSコアグラフィックスでグラデーションカラーを描画するには、2つの方法があります。CGContextDrawLinearGradientを使用して線形グラデーションを生成し、CGContextDrawRadialGradientを使用して円の半径方向のカラーグラデーションを生成します。この関数は、パスの形状に関係なくパスをカスタマイズできます。原則としてクリップを作成するため、CGContextClip関数の前にCGContextAddPath関数を呼び出して、CGPathRefをコンテキストに追加する必要があります。
もう1つ注意すべき点は、グラデーションの方向です。方向は2つのポイントによって制御され、ポイントの単位は座標です。したがって、CGPathRefから正しいポイントを正しく見つける必要があります。もちろん、特定の実装を確認する方法はたくさんあります。この例では、CGPathGetBoundingBox関数を呼び出してCGPathRefの長方形の領域を返すだけで、次のようになります。この長方形に基づく2つのポイント。読者は、必要に応じて特定のコードを変更できます。

1->線形グラデーション

-（void）drawLinearGradient：（CGContextRef）context 
                      path：（CGPathRef）path 
                startColor：（CGColorRef）startColor 
                  endColor：（CGColorRef）endColor 
{ 
    CGColorSpaceRef colorSpace = CGColorSpaceCreateDeviceRGB（）; 
    CGFloatの場所[] = {0.0、1.0}; 

    NSArray * colors = @ [（__ bridge id）startColor、（__ bridge id）endColor]; 

    CGGradientRefグラデーション= CGGradientCreateWithColors（colorSpace、（__ bridge CFArrayRef）colors、locations）; 


    CGRect pathRect = CGPathGetBoundingBox（path）; 

    //適用要求
    CGContextSaveGState（context）;
    要求要求要求要求修改CGPointstartPoint = CGPointMake（CGRectGetMinX（pathRect）、CGRectGetMidY（pathRect））;
    CGPoint endPoint = CGPointMake（CGRectGetMaxX（pathRect）、CGRectGetMidY（pathRect））; 

    CGContextAddPath（context、path）; 
    CGContextClip（context）; 
    CGContextDrawLinearGradient（context、gradient、startPoint、endPoint、0）; 
    CGContextRestoreGState（context）; 

    CGGradientRelease（gradient）; 
    CGColorSpaceRelease（colorSpace）; 
} 

-（void）viewDidLoad  
{ 
    [super viewDidLoad]; 
    //ビューを読み込んだ後、追加の設定を行います。

    //创建CGContextRefUIGraphicsBeginImageContext 
    （self.view.bounds.size）; 
    CGContextRef gc = UIGraphicsGetCurrentContext（）; 

    //创建CGMutablePathRef
    CGMutablePathRefパス= CGPathCreateMutable（）; 

    //绘制
    PathCGRect rect = CGRectMake（0、100、300、200）;
    CGPathMoveToPoint（path、NULL、CGRectGetMinX（rect）、CGRectGetMinY（rect））; 
    CGPathAddLineToPoint（path、NULL、CGRectGetMidX（rect）、CGRectGetMaxY（rect））; 
    CGPathAddLineToPoint（path、NULL、CGRectGetMaxY（rect）、CGRectGetMaxY（rect）
    CGPathCloseSubpath（path）; 

    //グラデーションを描画します
    [selfdrawLinearGradient：gc path：path startColor：[UIColor greenColor] .CGColor endColor：[UIColor redColor] .CGColor]; 

    //リリースに注意してください
    CGMutablePathRefCGPathRelease（path）; 

    //コンテキストから
    UIImageで画像を取得します* img = UIGraphicsGetImageFromCurrentImageContext（）; 
    UIGraphicsEndImageContext（）; 

    UIImageView * imgView = [[UIImageView alloc] initWithImage：img]; 
    [self.view addSubview：imgView];
}

2->円の半径方向のグラデーション

-（void）drawRadialGradient：（CGContextRef）context 
                      path：（CGPathRef）path 
                startColor：（CGColorRef）startColor 
                  endColor：（CGColorRef）endColor 
{ 
    CGColorSpaceRef colorSpace = CGColorSpaceCreateDeviceRGB（）; 
    CGFloatの場所[] = {0.0、1.0}; 

    NSArray * colors = @ [（__ bridge id）startColor、（__ bridge id）endColor]; 

    CGGradientRefグラデーション= CGGradientCreateWithColors（colorSpace、（__ bridge CFArrayRef）colors、locations）; 


    CGRect pathRect = CGPathGetBoundingBox（path）; 
    CGPointセンター= CGPointMake（CGRectGetMidX（pathRect）、CGRectGetMidY（pathRect））;
    CGFloat半径= MAX（pathRect.size.width / 2.0、pathRect.size.height / 2.0）* sqrt（2）; 

    CGContextSaveGState（context）; 
    CGContextAddPath（context、path）; 
    CGContextEOClip（context）; 

    CGContextDrawRadialGradient（context、gradient、center、0、center、radius、0）; 

    CGContextRestoreGState（context）; 

    CGGradientRelease（gradient）; 
    CGColorSpaceRelease（colorSpace）; 
} 

-（void）viewDidLoad  
{ 
    [super viewDidLoad]; 
    //ビューを読み込んだ後、追加の設定を行います。

    //创建CGContextRefUIGraphicsBeginImageContext 
    （self.view.bounds.size）; 
    CGContextRef gc = UIGraphicsGetCurrentContext（）;

    //创建CGMutablePathRefCGMutablePathRef
    パス= CGPathCreateMutable（）; 

    //绘制
    PathCGRect rect = CGRectMake（0、100、300、200）; 
    CGPathMoveToPoint（path、NULL、CGRectGetMinX（rect）、CGRectGetMinY（rect））; 
    CGPathAddLineToPoint（path、NULL、CGRectGetMidX（rect）、CGRectGetMaxY（rect））; 
    CGPathAddLineToPoint（path、NULL、CGRectGetWidth（rect）、CGRectGetMaxY（rect））; 
    CGPathAddLineToPoint（path、NULL、CGRectGetWidth（rect）、CGRectGetMinY（rect））; 
    CGPathCloseSubpath（path）; 

    //绘制渐変形
    [selfdrawRadialGradient：gc path：path startColor：[UIColor greenColor] .CGColor endColor：[UIColor redColor] .CGColor]; 

    //注意释放CGMutablePathRefCGPathRelease 
    （path）;

    //コンテキストから画像を取得し、インターフェースに表示します
    UIImage * img = UIGraphicsGetImageFromCurrentImageContext（）; 
    UIGraphicsEndImageContext（）; 

    UIImageView * imgView = [[UIImageView alloc] initWithImage：img]; 
    [self.view addSubview：imgView]; 
}

3.レイヤーのマスク属性としてCAShapeLayerを使用します

CALayerのmaskプロパティは、マスクの（不透明な）部分を表示するレイヤーのマスクとして使用できます。CAShapeLayerはCALayerのサブクラスであり、pathプロパティを介してさまざまな形状を生成できます。CAShapeLayerオブジェクトがレイヤーのマスクプロパティとして使用すると、さまざまな形状のレイヤーを生成できます。したがって、色のグラデーションを生成するには、いくつかの手順があります。

imageViewを生成します（レイヤーにすることもできます）。image属性はカラーグラデーション画像です。
CAShapeLayerオブジェクトを生成し、パス属性に従って目的の形状を指定します
CAShapeLayerオブジェクトをimageViewのマスク属性に割り当てます

-（void）viewDidLoad 
{ 
    [super viewDidLoad]; 

    [self.view addSubview：self.firstCircle]; 
    _firstCircle.frame = CGRectMake（0、0、200、200）; 
    _firstCircle.center = CGPointMake（CGRectGetWidth（self.view.bounds）/ 2.0、CGRectGetHeight（self.view.bounds）/ 2.0）; 
    CGFloat firsCircleWidth = 5; 
    self.firstCircleShapeLayer = [self generateShapeLayerWithLineWidth：firsCircleWidth]; 
    _firstCircleShapeLayer.path = [self generateBezierPathWithCenter：CGPointMake（100、100）radius：100] .CGPath; 
    _firstCircle.layer.mask = _firstCircleShapeLayer; 
}  

-（CAShapeLayer *）generateShapeLayerWithLineWidth：（CGFloat）lineWidth 
{  
    CAShapeLayer * waveline = [CAShapeLayer layer];
    waveline.lineCap = kCALineCapButt;
    waveline.lineJoin = kCALineJoinRound; 
    waveline.strokeColor = [UIColor redColor] .CGColor; 
    waveline.fillColor = [[UIColor clearColor] CGColor]; 
    waveline.lineWidth = lineWidth; 
    waveline.backgroundColor = [UIColor clearColor] .CGColor; 

    ウェーブラインを返します。
} 

-（UIBezierPath *）generateBezierPathWithCenter：（CGPoint）center radius：（CGFloat）radius 
{ 
    UIBezierPath * circlePath = [UIBezierPath bezierPathWithArcCenter：center radius：radius startAngle：0 endAngle：2 * M_PI時計回り：NO]; 

    circlePathを返します。
} 

-（UIImageView *）firstCircle 
{ 
    if（！_ firstCircle）{
        self.firstCircle = [[UIImageView alloc] initWithImage：[UIImage imageNamed：@ "circleBackground"]]; 
        _firstCircle.layer.masksToBounds = YES; 
        _firstCircle.alpha = 1.0; 
    } 

    return _firstCircle; 
}

デモアドレス：https：//github.com/xiaochaofeiyu/YSCAnimation
in YSCNewVoiceWaveView and YSCVoiceLoadingCircleView