程序猿阵线联盟-汇总各类技术干货

iOS 关于千聊录音动画的简单实现

2017-08-15  本文已影响41人  41c48b8df394

首先看下效果展示:


动画.gif

  Core Animation(核心动画)是一组功能强大、效果华丽的动画API,无论在iOS系统或者在你开发的App中,都有大量应用。

楼主简单的利用UIBezierPath绘画圆,然后利用CABasicAnimationopacity调整视图的透明度,然后利用CABasicAnimationtransform.scale来实现圆的放大缩小,如果想要了解更多传送门:
http://www.imlifengfeng.com/blog/?p=548

废话不多所上代码
基本都是通过懒加载实现
创建CAShapeLayer

- (CAShapeLayer *)shapeLayer{
    if (_shapeLayer==nil) {
        _shapeLayer = [CAShapeLayer layer];
        _shapeLayer.frame = CGRectMake(100, 100, 100, 100);
        _shapeLayer.fillColor = [UIColor blueColor].CGColor;
        _shapeLayer.strokeColor = [UIColor blackColor].CGColor;
        //通过贝塞尔曲线绘制圆
        CGFloat startAngle = 0.0;
        CGFloat endAngle = M_PI *2;

        UIBezierPath *bezierPath = [UIBezierPath bezierPathWithArcCenter:CGPointMake(50, 50) radius:50 startAngle:startAngle endAngle:endAngle clockwise:YES];
        _shapeLayer.path = bezierPath.CGPath;

    }
    return _shapeLayer;
}

添加动画组这里用到CAAnimationGroup

- (CAAnimationGroup *)animaGroup{
    if (_animaGroup == nil) {
        CABasicAnimation * _opacityAnima = [CABasicAnimation animationWithKeyPath:@"opacity"];
        _opacityAnima.fromValue = @(0.7);
        _opacityAnima.toValue = @(0.3);
        
        CABasicAnimation *expandAnimation = [CABasicAnimation animationWithKeyPath:@"transform.scale"];
        expandAnimation.fromValue = [NSNumber numberWithFloat:1]; // 开始时的倍率
        expandAnimation.toValue = [NSNumber numberWithFloat:1.5]; // 结束时的倍率
        
        
        _animaGroup = [CAAnimationGroup animation];
        _animaGroup.animations = @[ expandAnimation,_opacityAnima];
        _animaGroup.duration = 3;
        _animaGroup.repeatCount = HUGE;
        _animaGroup.autoreverses = YES;
    }
    return _animaGroup;
   
}

具体里面的属性可以点击上文链接了解不多解释,只实现
动画开始、停止方法

/Start Animation
- (void)startAnimation{
    [self.layer addSublayer:self.shapeLayer];
    [self.shapeLayer addAnimation:self.animaGroup forKey:@"scaleGroup"];
}
//Stop Animation
- (void)stopAnimation{
    if (_shapeLayer) {
        [self.shapeLayer removeAllAnimations];
        [self.shapeLayer removeFromSuperlayer];

    }
}

代码地址:https://github.com/lanjiaoli/Animation
有不足的地方大家多多指出,谢谢

上一篇下一篇

猜你喜欢

热点阅读