前言

上一篇文章主要分享了動畫的基礎(chǔ)內(nèi)容和加載等待動畫的實際應(yīng)用，一直考慮在寫一篇動畫的實戰(zhàn)，但是苦于沒有好的素材，所以一直沒有動筆，這篇文章主要分享一篇電量動態(tài)顯示的動畫，首先看效果圖:

效果圖

第一眼看到這種動畫感覺美輪美奐，心里特別想知道他是如何實現(xiàn)的，但是做動畫動畫，首先你得明白一個動畫有幾種效果，然后拆分，一步步來實現(xiàn)。這個動畫有兩種效果：
一.外邊一個類似加載的過程。
二.內(nèi)部類似波浪的過程。

對于效果一，你能想到的最簡單的辦法一張圖片，讓他旋轉(zhuǎn)就可以了。為了讓這個動畫有停頓的感覺，我想到了至少兩種辦法，一種是系統(tǒng)封裝好的方法，另一種是動畫組，鑒于上一篇沒有涉及到動畫組，這里采用動畫組，具體看代碼：

   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];

以上需要補(bǔ)充說明的動畫組的是使用步驟：

• 1.創(chuàng)建基本動畫，可以設(shè)置每個動畫的起始時間，以及持續(xù)時間
• 2.將基本動畫添加到組動畫數(shù)組中，設(shè)置持續(xù)時間
  這里需要解釋的是每個單獨(dú)動畫持續(xù)時間是占動畫組的比例，例如動畫組持續(xù)2秒，每個單獨(dú)動畫個持續(xù)1秒，那么每個單獨(dú)動畫占總時長50%。

以上動畫的效果已經(jīng)寫好，我們只需要將動畫添加到圖片的layer上即可。

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

看第一個效果：

效果圖

對于效果二，如果你認(rèn)真仔細(xì)思考過，那你肯定會有思路，繼續(xù)使用動畫組，利用貝塞爾曲線畫出過程曲線，然后添加到動畫組里，就ok了，但是這個過程真的很復(fù)雜，親自嘗試過！其實有一個很簡單的辦法，我們只是需要一張圖片而已！

我們只需要給這張圖片的y和left做動畫就能實現(xiàn)。
這里有個小技巧是，我們不能將圖片添加到self.rotationIMG上，因為這樣會擋住效果一的動畫效果，為了顯示波浪在這個圓里，我們需要創(chuàng)建一個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.layer.cornerRadius = 115 /2.0;
    self.bgView.clipsToBounds = YES;

接下就是做動畫的時刻，利用系統(tǒng)封裝的方法

[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;
        
    }];

看一下運(yùn)行效果:

效果圖

另一種動畫效果

  [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得多少，進(jìn)而確定占圖片高度的的多少，而坐標(biāo)系x``y軸是向下的。
waveImageView.left設(shè)置為0即可。當(dāng)電量為100的時候，其實是顯示不滿的，我們需要做判斷，只要讓它的高度占滿即可。

像演示中總電量和百分?jǐn)?shù)，其實就是兩個label，加上即可，不在贅述，完整的程序在demo中細(xì)細(xì)品味吧！

結(jié)尾

其實這篇文章是想寫CAShapeLayer的，但是真的沒有找到好素材，敬請諒解，簡書上有一篇根據(jù)CAShapeLayer封裝很好的動畫，大家可以去學(xué)習(xí)
[地址]http://www.itdecent.cn/p/658641c77f51

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