簡介

這篇主要介紹CAKeyframeAnimation關鍵幀動畫和CATransform3D的簡單使用惠豺，scenekit實現(xiàn)的飛機游戲在下一篇詳細介紹瘫辩。傳送門

先看看實現(xiàn)的動畫效果嵌灰，下面在逐個分析菠齿。git項目地址

總體效果圖.gif

動畫分析和實現(xiàn)

1. 搖錢樹

yqs.gif

這是我第一個app中的一個動畫，看到需求后一頭霧水骑疆，由于當時才接觸ios贿肩，簡直無從下手座哩，經(jīng)過各種百度后才找到一些頭緒苍凛。從監(jiān)聽手機震動趣席，到樹干搖晃，最后掉落元寶毫深，逐步理清了各個對象需要執(zhí)行的行為動作吩坝。下面我會貼一些代碼，具體的還請去項目中查看哑蔫，代碼注釋也寫得很詳細。
手機搖晃監(jiān)聽

- (void)motionBegan:(UIEventSubtype)motion withEvent:(UIEvent *)event
{
    NSLog(@"%@",NSStringFromSelector(_cmd));
}

- (void)motionEnded:(UIEventSubtype)motion withEvent:(UIEvent *)event
{
    NSLog(@"%@",NSStringFromSelector(_cmd));
    AudioServicesPlaySystemSound(kSystemSoundID_Vibrate);//系統(tǒng)震動
    
    [self ybAnimation];
    [self shakeYQS:yqsImage];
}

搖晃樹干

- (void)shakeYQS:(UIImageView *)view
{
    //表示以z坐標軸為中心軸旋轉(zhuǎn)
    CAKeyframeAnimation *animation = [CAKeyframeAnimation animationWithKeyPath:@"transform.rotation.z"];
    animation.values = @[@(0),@(-M_PI_4/2),@(0),@(M_PI_4/2),@(0),
                         @(-M_PI_4/3),@(0),@(M_PI_4/3),@(0),
                         @(-M_PI_4/4),@(0),@(M_PI_4/4),@(0),
                         @(-M_PI_4/5),@(0),@(M_PI_4/6),@(0)];//設置樹的搖晃幅度,分母變大表示搖晃幅度越來越小，不斷h衰減至0闸迷。
    animation.repeatCount = 1;
    animation.duration = 1;
    [view.layer addAnimation:animation forKey:@"shake"];
    
}

這里要理解keypath的意思嵌纲，從代碼中可以很直觀的看出監(jiān)聽的是z軸旋轉(zhuǎn)屬性，判斷旋轉(zhuǎn)方向可以用握手定則腥沽，用手握住坐標軸逮走，大拇指指向坐標軸方向，其余四指為旋轉(zhuǎn)的方向今阳，至于順逆時針师溅，需要視情況而定。

至于元寶掉落盾舌，就是簡單的一個平移動畫

//元寶掉落
- (void)ybAnimation
{
    for (int i = 0; i< ybArray.count; i++) {
        
        UIImageView * yb = ybArray[i];
        
        int x = rand()%215;
        int y = rand()%60 + 60;
        yb.frame = CGRectMake(x + MinX(yqsImage), y + MinY(yqsImage), yb.frame.size.width, yb.frame.size.height);
        
        yb.hidden = NO;
        CAKeyframeAnimation *animation = [CAKeyframeAnimation animationWithKeyPath:@"position.y"];
        animation.delegate = self;
        animation.values = @[@(yb.frame.origin.y), @(yb.frame.origin.y+200)];
        
        float startTime = 0;
        
        animation.repeatCount = 1;
        
        float endTime = (float)(arc4random()%100) / 100 + 0.5;
        
        animation.keyTimes = @[@(startTime), @(endTime)];
        animation.duration = endTime;
        animation.fillMode = kCAFillModeForwards;
        animation.removedOnCompletion = NO;
        [animation setValue:@"ybDrop" forKey:@"ybAnimation"];
        [animation setValue:yb forKey:@"animationView"];
        [yb.layer addAnimation:animation forKey:@"ybAnimation"];
    }
}

其實拿到一個動畫需求后墓臭，首先要理清的就是整個動畫過程中，每個對象執(zhí)行了哪些行為妖谴。分析好后窿锉，然后就往基本動畫上套就行了，比如膝舅，平移嗡载，縮放，旋轉(zhuǎn)這些仍稀，再復雜點可能會加入路徑洼滚，3D場景變換等等，當然這些也需要一定的知識積累技潘。下面兩個簡單動畫判沟，我就不貼代碼了，只寫一些分析思路崭篡。

2. 唱片動畫

recordCD.gif

從圖中知道挪哄，唱針和唱片執(zhí)行的都是旋轉(zhuǎn)動畫，不同在于琉闪，唱針只旋轉(zhuǎn)了幾十度迹炼，而唱片卻是旋轉(zhuǎn)的360度，然后一直循環(huán)執(zhí)行颠毙。

3. 閃爍動畫

flashing.gif

4. 扇形統(tǒng)計圖

sectorChart.gif

這個稍微復雜一點户誓，從畫出扇形饼灿，到動畫執(zhí)行，最后計算每個扇形的點擊范圍并做出偏移帝美。

首先碍彭，使用UIBezierPath和CAShapeLayer，畫出扇形悼潭。光畫出來還是比較簡單庇忌，然后是動畫執(zhí)行。怎樣才會產(chǎn)生上圖那種類似掃描的效果舰褪？先來看看圓形進度條動畫

progress1.gif

progress2.gif

想象一下皆疹，如果把邊界的寬度一點點擴大達到圓的半徑的長度，是不是就會出現(xiàn)扇形圖掃描一樣的動畫了抵知。

圖形畫好后墙基，還要判斷點擊范圍，這里采用的數(shù)學公式計算刷喜。首先判斷該點是否在圓內(nèi)残制，即點到圓心的距離是否大于半徑；然后是觸摸點跟圓心連成的直線和起始邊形成的夾角是在哪個扇形區(qū)域類掖疮，都能通過公式計算出來初茶。最后點擊扇形執(zhí)行偏移事件。（具體的計算公式請結(jié)合項目中的代碼查看理解）

5. 飛機游戲
飛機游戲的實現(xiàn)其實并不如想象中困難浊闪，主要基于SceneKit實現(xiàn)的恼布，SceneKit中封裝了很多對象，使其從建立模型到執(zhí)行動畫行為搁宾，操作起來都簡單易懂折汞，感覺比較適合做一些小游戲開發(fā)。我會在下一篇文章中寫出我的開發(fā)思路盖腿。傳送門

6. 使用View構造一個立方體

3DViewLayout.gif

這里主要使用了CATransform3D屬性爽待，該屬性封裝了layer層的3D旋轉(zhuǎn)，平移翩腐，縮放等操作鸟款。這里通過對6個view的平移和旋轉(zhuǎn)實現(xiàn)的立方體顯示。

7. 視圖的3d旋轉(zhuǎn)

dragAndRotateView.gif

用Pan手勢實現(xiàn)的茂卦，手指拖動圖片時計算出向量坐標何什，然后通過CATransform3DRotate來實現(xiàn)旋轉(zhuǎn)。主要邏輯代碼就幾行等龙，詳細注釋請在項目查看处渣。

完結(jié)

感興趣的可以去項目地址下載下來看看伶贰。git項目地址