【code_小马】OC 类似于雷达的动画

作者: 曾经像素有点低 | 来源:发表于2017-03-08 10:55 被阅读9341次
    我们是工程师 ——加油 !

    CALayer篇:

    使用动画组(CAAnimationGroup)、CAReplicatorLayer 在 CAShaperLayer实现的下图gif中的效果:

    【code_小马】.gif
    • 没有UI设计师,我的配图依旧那么通俗,O(∩_∩)O哈哈~

    ####### 来~ 撸代码!

    1.这里还用看么。。。直接看3后边的吧

    #define Y_W  [UIScreen mainScreen].bounds.size.width
    
    @interface ViewController ()
    {
        //浅灰色的那个图层
        UIView * yg_backView;
        //黄色的那个图层
        CAShapeLayer * yg_animation_shapeLayer;
    }
    
    /**replicatorLayer*/
    @property (nonatomic,strong) CAReplicatorLayer * yg_replicatorLayer;
    
    @end
    
    

    2.这里还用看么。。。直接看3后边的吧

    @implementation ViewController
    
    - (void)viewDidLoad {
        [super viewDidLoad];
    
        /**设置主界面*/
        [self setUI];
    }
    
    

    3.布局UI

    -(void)setUI
    {
      
        self.view.backgroundColor = [UIColor whiteColor];
        /**加一个动画开始的按钮*/
        UIButton * button = [UIButton buttonWithType:(UIButtonTypeCustom)];
        [button setTitle:@"show" forState:(UIControlStateNormal)];
        button.frame = CGRectMake(Y_W-150, 80, 80, 60);
        button.layer.masksToBounds = YES;
        button.layer.cornerRadius = 4;
        button.backgroundColor = [UIColor orangeColor];
        [self.view addSubview:button];
        [button addTarget:self action:@selector(showAnimation) forControlEvents:(UIControlEventTouchUpInside)];
    
        /**动画背景图*/
        yg_backView = [[UIView alloc]init];
        yg_backView.frame = CGRectMake(0, 150, Y_W, 200);
        [self.view addSubview:yg_backView];
        yg_backView.backgroundColor = [UIColor lightGrayColor];
        yg_backView.clipsToBounds = YES;
        
        /**动画图层,就是不停变大的那个圆*/
        yg_animation_shapeLayer = [[CAShapeLayer alloc]init];
        yg_animation_shapeLayer.backgroundColor = [UIColor yellowColor].CGColor;
        yg_animation_shapeLayer.bounds = CGRectMake(0, 0, 20, 20);
        yg_animation_shapeLayer.cornerRadius = 10;
        yg_animation_shapeLayer.position = CGPointMake(Y_W/2, 100);
    
        /**复制图层,可以不设置bound或frame*/
        _yg_replicatorLayer = [CAReplicatorLayer layer];
        _yg_replicatorLayer.backgroundColor = [UIColor cyanColor].CGColor;
        [_yg_replicatorLayer addSublayer:yg_animation_shapeLayer];//把动 画图层(shaperLayer) 关联到 复制图层(replicatorLayer)上
        _yg_replicatorLayer.instanceCount = 3.0;//三个复制图层
        _yg_replicatorLayer.instanceDelay = 0.3;//复制间隔时间为0.3秒
        _yg_replicatorLayer.repeatCount = MAXFLOAT;
        [yg_backView.layer addSublayer:_yg_replicatorLayer];
    
    }
    
    

    4.展示动画

    -(void)showAnimation
    {
        
        /**放大的动画*/
        CABasicAnimation * yg_transform_animation = [CABasicAnimation animationWithKeyPath:@"transform"];
        NSValue * yg_value = [NSValue valueWithCATransform3D:CATransform3DMakeScale(10, 10, 1)];
        yg_transform_animation.toValue = yg_value;
        yg_transform_animation.duration = 2;
        
        /**透明度动画---->(也可以直接设置CAReplicatorLayer的instanceAlphaOffset来实现,记得提前设置shaperLayer的不透明度)*/
        CABasicAnimation * yg_alpha_animation = [CABasicAnimation animationWithKeyPath:@"opacity"];
        yg_alpha_animation.fromValue = [NSNumber numberWithInt:1];
        yg_alpha_animation.toValue = [NSNumber numberWithFloat:0.1];
        yg_alpha_animation.duration = 2;
        
        /**动画组*/
        CAAnimationGroup * yg_animationGroup = [[CAAnimationGroup alloc]init];
        yg_animationGroup.animations = @[yg_transform_animation,yg_alpha_animation];
        yg_animationGroup.duration = 2;
        yg_animationGroup.repeatCount = MAXFLOAT;
        [yg_animation_shapeLayer addAnimation:yg_animationGroup forKey:nil];//将动画组 添加到 shapeLayer上
        
    }
    
    

    写完喽...对了,补充一下

    //想用instanceAlphaOffset实现透明度变化的,可以参考下下面的代码
     
     yg_animation_shapeLayer.opacity = 0.7;
    
      _yg_replicatorLayer.instanceAlphaOffset = -0.4;
    

    【code_小马】

    晌午时光

    很喜欢的一篇文章,拿出来和大家分享
    【第十集】

    阿福毫不费力的把我压在身下,受伤的腿使我根本无法挣扎,我使劲的大喊却被雷雨声淹没。他一把揪扯开我的衬衫,我圆润的房在他手里微微发抖,昏黄的灯下赤裸的身体显得格外诱人。    “妖精!”阿福惊呼,他抓住我的手臂挺身刺入 闪电之下,我清清楚楚的看到他因欲而兴奋的变形的脸。    “如风!”在被他穿透的一刻,我大叫。    接着我便看到了如风。    阿福未来得及抽动一下就倒在了我身上,如风的刀穿过阿福划破了我的小腹,我的身体霎那间被染红。    如风提起阿福的尸体扔在地上,他脱下T恤裹住我抱在怀里,我一句话都说不出,只是静静地流泪。    门口被如风打倒的两人被屋内血腥吓呆,黄毛对躺在地上动不了的另一个小弟说:“我……我去找程老大来!”说罢就一瘸一拐的跑了。    如风紧紧抱着我,眼睛血红,额上暴出青筋。    我望着阿福的尸体说:“你把他杀了?”    如风点头,从未流过泪的他竟然默默掉下了眼泪,他使劲的抓着我的肩膀好像想把我按到他的身体里去。    如风的眼泪滴落在我脸上,滚烫的晕开,我淡淡的说:“我们就一块死在这儿吧,好么?阿风,我们一起死吧。”    “好!”如风说,他坚定的望着我,我感到分外的安宁,可以比拟死亡的安宁。    我们互相搂抱着,像没有生命的两个石雕,所有活着的希望与勇气都消失了。我当时只是想,我们要一起死了,就这么一起死了也挺好的,这样就永远都不会分开。     不久门口穿来了阵阵的机车轰鸣声,房门被踹开了,很多人站在门外,一个身材高大面无表情的中年男子走了进来。    “老大!就是这小子干的!他杀了阿福!”黄毛从中年男子的身后走出指着如风喊道。    中年男子从阿福的尸体上跨过,走到我和如风面前。我并未觉得可怕与慌张,也许是因为当时我虽活着却跟死了没什么两样,否则他身上散发的那种一种逼人的气势,不会让我毫无感觉。

    点击阅读文章第九集

    点击阅读文章第十一集
    文章后续更新中,喜欢请关注哦 🌹

    相关文章

      网友评论

        本文标题:【code_小马】OC 类似于雷达的动画

        本文链接:https://www.haomeiwen.com/subject/goqbgttx.html