iOS 仪表盘动效

作者: 墙上砖 | 来源:发表于2017-06-09 17:45 被阅读145次

iOS 仪表盘动效
[iOS] 视频添加动效水印实现介绍
YoYoBall加载动画
Fade数字切换动效
iOS动效
css简单动效
iOS动画详解（学习动画看这一篇就够了）
DAY 34
iOS雪花飘落动效
iOS滚珠菜单动效

年初做了个类似支付宝仪表盘，
看了很多demo都不太符合要求，就自己动手做了一个。

希望能给个star☺
github地址：github.com/TildaWatts/EzraRoundView.git

中间还是有点坑，不过效果可以。

动效全部使用的CALayer画的，可以节省性能，不用考虑线程。

需求是这样的：双层动效。外圈底层颜色从由左向右，由红到黄渐变，由上到下，透明度逐渐变浅。

IMG_4749.GIF

@property (nonatomic,assign) CGFloat percent;//期望进度
@property (nonatomic, assign) CGFloat maximum;//满进度

其中这个地方可能需要解释一下，这个底色渐变的CAGradientLayer的方法，研究了很久，基本搞清楚了，先看代码

//外圆底色（渐变）
- (CAGradientLayer *)draProgressBottomGradieLayer
{
    
    _progressBottomGradieLayer = [CAGradientLayer layer];
    _progressBottomGradieLayer.frame = self.bounds;
    
    CGFloat width = self.frame.size.width;
    CGFloat height = self.frame.size.height;
    //上
    CAGradientLayer *gradientLayer1 = [CAGradientLayer layer];
    gradientLayer1.frame = CGRectMake(0, 0, width, height);
    gradientLayer1.colors = @[(__bridge id)[UIColor colorWithHexString:@"FF4C4C"].CGColor,
                              (__bridge id)[UIColor colorWithHexString:@"FFB94A"].CGColor];
    gradientLayer1.startPoint = CGPointMake(0, 0);
    gradientLayer1.endPoint = CGPointMake(1, 0);
    
    //左下
    CAGradientLayer *gradientLayer2 = [CAGradientLayer layer];
    gradientLayer2.frame = CGRectMake(0, height/2.0, width/2.0,  height/2.0);
    gradientLayer2.colors = @[(__bridge id)[UIColor colorWithHexString:@"FF4C4C"].CGColor,
                              (__bridge id)[UIColor colorWithHexString:@"FFFFFF" alpha:1].CGColor];
    gradientLayer2.startPoint = CGPointMake(0, 0);
    gradientLayer2.endPoint = CGPointMake(0, 1);
    
    //右下
    CAGradientLayer *gradientLayer3 = [CAGradientLayer layer];
    gradientLayer3.frame = CGRectMake(width/2.0, height/2.0, width/2.0,  height/2.0);
    gradientLayer3.colors = @[(__bridge id)[UIColor colorWithHexString:@"FFB94A"].CGColor,
                              (__bridge id)[UIColor colorWithHexString:@"FFFFFF" alpha:1].CGColor];
    gradientLayer3.startPoint = CGPointMake(0, 0);
    gradientLayer3.endPoint = CGPointMake(0, 1);
    
    [_progressBottomGradieLayer addSublayer:gradientLayer1];
    [_progressBottomGradieLayer addSublayer:gradientLayer2];
    [_progressBottomGradieLayer addSublayer:gradientLayer3];
    [gradientLayer1 setLocations:@[@0.35,@0.75]];
    [gradientLayer3 setLocations:@[@0.2,@0.75]];
    [gradientLayer2 setLocations:@[@0.2,@0.75]];
    
    return _progressBottomGradieLayer;
}