美文网首页iOS绘图与动画
[iOS]支付宝咻一咻动画

[iOS]支付宝咻一咻动画

作者: 羽惊 | 来源:发表于2016-02-27 22:40 被阅读1191次

    效果图


    xxx.gif

    模仿支付宝咻一咻的动画,动画由两部分组成,一是scale由小变大,二是透明的由1到0

    两个部分的变化都是由基础动画完成,再将两个动画添加到动画组中完成整个动画

    - (void)startAnimation{
    
    //创建执行动画的Layer
    
    CALayer*layer = [CALayerlayer];
    
    layer.frame=CGRectMake(0,0, [UIScreenmainScreen].bounds.size.width, [UIScreenmainScreen].bounds.size.width);
    
    layer.cornerRadius= [UIScreenmainScreen].bounds.size.width/2;
    
    layer.position=self.view.layer.position;
    
    layer.backgroundColor= [UIColorcolorWithRed:arc4random() %254/255.0green:arc4random() %254/255.0blue:arc4random() %254/255.0alpha:1.0].CGColor;
    [self.view.layer addSublayer:layer];
    
    //圆的大小改变
    
    CABasicAnimation*boundsAnimation = [CABasicAnimationanimationWithKeyPath:@"transform.scale.xy"];
    
    boundsAnimation.fromValue= [NSNumber numberWithFloat:0];
    
    boundsAnimation.toValue= [NSNumber numberWithFloat:1];
    
    boundsAnimation.removedOnCompletion=YES;
    
    boundsAnimation.duration=3.0;
    
    //透明度的改变
    
    CABasicAnimation*opacityAnimation = [CABasicAnimationanimationWithKeyPath:@"opacity"];
    
    opacityAnimation.fromValue= [NSNumbernumberWithFloat:1];
    
    opacityAnimation.toValue= [NSNumbernumberWithFloat:0];
    
    opacityAnimation.removedOnCompletion=YES;
    
    opacityAnimation.duration=3.0;
    
    //创建动画组
    
    CAAnimationGroup*group = [CAAnimationGroupanimation];
    
    group.animations=@[boundsAnimation, opacityAnimation];
    
    group.duration=3.0;
    
    group.removedOnCompletion=YES;
    
    [layeraddAnimation:groupforKey:@"xiuyixiu"];
    
    //动画完成后移除Layer
    
    [selfperformSelector:@selector(removeLayer:)withObject:layerafterDelay:3];
    
    }
    
    //移除Layer
    
    - (void)removeLayer:(CALayer*)layer{
    
    [layer removeFromSuperlayer];
    
    }
    
    //点击页面开始执行动画
    
    - (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent*)event{
    
    [selfstartAnimation];
    
    }
    

    相关文章

      网友评论

        本文标题:[iOS]支付宝咻一咻动画

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