ios动画实战运用 -（电量动态显示）（二）

前言

上一篇文章主要分享了动画的基础内容和加载等待动画的实际应用，一直考虑在写一篇动画的实战，但是苦于没有好的素材，所以一直没有动笔，这篇文章主要分享一篇电量动态显示的动画，首先看效果图:

效果图

第一眼看到这种动画感觉美轮美奂，心里特别想知道他是如何实现的，但是做动画动画，首先你得明白一个动画有几种效果，然后拆分，一步步来实现。这个动画有两种效果：
一.外边一个类似加载的过程。
二.内部类似波浪的过程。

对于效果一，你能想到的最简单的办法一张图片，让他旋转就可以了。为了让这个动画有停顿的感觉，我想到了至少两种办法，一种是系统封装好的方法，另一种是动画组，鉴于上一篇没有涉及到动画组，这里采用动画组，具体看代码：

   CABasicAnimation *basic = [CABasicAnimation animationWithKeyPath:@"transform.rotation.z"];
    basic.beginTime = 0;
    basic.toValue = @(M_PI);
    basic.duration = 1.0;
    basic.autoreverses = NO;
    basic.fillMode = kCAFillModeForwards;
    
    CABasicAnimation *basic1 = [CABasicAnimation animationWithKeyPath:@"transform.rotation.z"];
    basic1.beginTime = basic.beginTime + basic.duration;
    basic1.fromValue = @(M_PI);
    basic1.toValue = @(M_PI *2);
    basic1.duration = 1.0;
    basic1.autoreverses = NO;
    basic1.fillMode = kCAFillModeForwards;
    
    CAAnimationGroup *group = [CAAnimationGroup animation];
    group.duration = 2;
    group.repeatCount = 2;
    group.animations = @[basic,basic1];
    group.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseOut];

以上需要补充说明的动画组的是使用步骤：

• 1.创建基本动画，可以设置每个动画的起始时间，以及持续时间
• 2.将基本动画添加到组动画数组中，设置持续时间
  这里需要解释的是每个单独动画持续时间是占动画组的比例，例如动画组持续2秒，每个单独动画个持续1秒，那么每个单独动画占总时长50%。

以上动画的效果已经写好，我们只需要将动画添加到图片的layer上即可。

[self.rotationIMG.layer addAnimation:group forKey:nil];

看第一个效果：

效果图

对于效果二，如果你认真仔细思考过，那你肯定会有思路，继续使用动画组，利用贝塞尔曲线画出过程曲线，然后添加到动画组里，就ok了，但是这个过程真的很复杂，亲自尝试过！其实有一个很简单的办法，我们只是需要一张图片而已！

我们只需要给这张图片的y和left做动画就能实现。
这里有个小技巧是，我们不能将图片添加到self.rotationIMG上，因为这样会挡住效果一的动画效果，为了显示波浪在这个圆里，我们需要创建一个UIView比self.rotationIMG尺寸小一点即可。

    UIImageView *waveImageView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"wave"]];
    waveImageView.frame = CGRectMake(0, 0, 450, 300);
    waveImageView.alpha = 1;
    
    waveImageView.top = 115;
    waveImageView.left = -300;
    
    [self.bgView addSubview:waveImageView];

这里需要解释的是，waveImageView图片的尺寸是随便定的，为了动画效果试出来的一个合适的尺寸,waveImageView.top和waveImageView.left中top和left是不可以直接获取的，需要给UIView添加一个分类，才能做到。

添加图片后的效果如下：

这不是我们想要的效果，我们需要做的就是把不在 self.bgView范围内的图片裁掉

    self.bgView.layer.cornerRadius = 115 /2.0;
    self.bgView.clipsToBounds = YES;

接下就是做动画的时刻，利用系统封装的方法

[UIView animateWithDuration:4.0 animations:^{
        
        waveImageView.top = 115 - (([self.electric intValue]/100.0) * 115);
        if ([self.electric intValue] ==100) {
            waveImageView.top = -30;
        }
        waveImageView.left = 0;
        
    }];

看一下运行效果:

效果图

另一种动画效果

  [UIView animateWithDuration:1.0 animations:^{
            waveImageView.top = 0;
            waveImageView.left = -200;
        } completion:^(BOOL finished) {
            [UIView animateWithDuration:3.0 animations:^{
    
                waveImageView.top = 115 - (([self.electric intValue]/100.0) * 115);
                if ([self.electric intValue] ==100) {
                    waveImageView.top = -30;
                }
    
                waveImageView.left = 0;
            }];
        }];

效果图可以看开头演示第一个动画。

这里需要解释一下self.electric是电量，waveImageView.top大小是这样计算的：图片的尺寸高为115，self.electric占100得多少，进而确定占图片高度的的多少，而坐标系x``y轴是向下的。
waveImageView.left设置为0即可。当电量为100的时候，其实是显示不满的，我们需要做判断，只要让它的高度占满即可。

像演示中总电量和百分数，其实就是两个label，加上即可，不在赘述，完整的程序在demo中细细品味吧！

结尾

其实这篇文章是想写CAShapeLayer的，但是真的没有找到好素材，敬请谅解，上有一篇根据CAShapeLayer封装很好的动画，大家可以去学习
[地址]http://www.jianshu.com/p/658641c77f51

本文的demo地址
https://github.com/markdashi/CircleWaveAnimation