iOS:動畫_ZenDei技術網路在線

1、UIView Animation 1-1）、原始的，非Block。 1-2）、Block 2、Transition（轉場動畫） 2-1）、原始的 2-2）、封裝過的，簡潔，用UIView Animation，View的方法，非Layer 2-3）、VC自帶的模態視圖轉場動畫 ...

　　1、UIView Animation

　　2、Transition（轉場動畫）

　　...

　　N、粒子動畫

1、UIView Animation

　　1-1）、原始的，非Block。

//動畫名、內容
[UIView beginAnimations:@"id100" context:@"animation1"];
//時長2秒
[UIView setAnimationDuration:2.0];	
//動畫速度
//    UIViewAnimationCurveEaseInOut,  // 慢入、慢出
//    UIViewAnimationCurveEaseIn,     // 慢入
//    UIViewAnimationCurveEaseOut,    // 慢出
//    UIViewAnimationCurveLinear,     // 勻速
[UIView setAnimationCurve:UIViewAnimationCurveEaseIn];	
//設置代理
[UIView setAnimationDelegate:self];
//動畫將要開始SEL
[UIView setAnimationWillStartSelector:@selector(animationWillStart:context:)];	
//動畫將要結束SEL
[UIView setAnimationDidStopSelector:@selector(animationDidStop:finished:context:)];
//提交動畫
[UIView commitAnimations];

//簽代理後，才能實現SEL的方法(方法名隨意，參數個數也隨意，分別少於2/3個的時候，只收到前面幾個參數，多於它的參數，後面參數空，有用過C的回調函數，應該會比較熟悉)
//開始動畫時的方法
-(void)animationWillStart:(NSString *)animationID context:(void *)context
{
    NSLog(@"動畫開始");
}
//結束動畫時的方法
-(void)animationDidStop:(NSString *)animationID finished:(NSNumber *)finished context:(void *)context
{
    //可以判斷ID，做連續動畫
    NSLog(@"動畫結束");
}
//自己取名
-(void)theAnimationStop:(NSString *)animationID thecontext:(void *)theContext context:(void *)context2
{
NSLog(@"%@,%@,%@",animationID,theContext,context2);
}

　　1-2）、Block

//嵌套，做連續動畫
[UIView animateWithDuration:2.0 animations:^{

    self.cyanVIew.frame = CGRectMake(100, 400, 100, 100);

} completion:^(BOOL finished) {

    [UIView animateWithDuration:2.0 animations:^{

        self.cyanVIew.frame = CGRectMake(100, 100, 100, 100);

    }];

}];

2、Transition（轉場動畫）

　　2-1）、原始的

//創建
CATransition *animation = [CATransition animation];
//動畫時間
animation.duration = 1.5;
//動畫類型
//    kCATransitionFade           //淡入
//    kCATransitionMoveIn         //覆蓋
//    kCATransitionPush           //推
//    kCATransitionReveal         //掀起，相對覆蓋
//以下為私有API
//    @"cube"                     //立方體（某寶的AR切換）
//    @"suckEffect"               //吮吸
//    @"oglFlip"                  //翻轉（某信，好友歷史說說，查看詳情）
//    @"rippleEffect"             //波紋
//    @"pageCurl"                 //日曆上翻
//    @"pageUnCurl"               //日曆下蓋
//    @"cameraIrisHollowOpen"     //相機打開
//    @"cameraIrisHollowClose"    //相機關閉
animation.type = @"cube";
//動畫方向
//    kCATransitionFromRight      //從右邊
//    kCATransitionFromLeft       //從左邊
//    kCATransitionFromTop        //從上面
//    kCATransitionFromBottom     //從下麵
animation.subtype = kCATransitionFromLeft;
//動畫速度（慢入、慢出）
//    kCAMediaTimingFunctionLinear        //勻速
//    kCAMediaTimingFunctionEaseIn        //慢入
//    kCAMediaTimingFunctionEaseOut       //慢出
//    kCAMediaTimingFunctionEaseInEaseOut //慢入慢出
//    kCAMediaTimingFunctionDefault       //勻速，不過有點快
animation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseOut];
//代理
//- (void)animationDidStart:(CAAnimation *)anim;
//- (void)animationDidStop:(CAAnimation *)anim finished:(BOOL)flag;
animation.delegate = self;

//1、添加動畫到導航欄
[self.navigationController.view.layer addAnimation:animation forKey:@"animation"];
[self.navigationController pushViewController:vc animated:NO];

//2、添加動畫到普通的View
[bgView.layer addAnimation:animation forKey:@"animation"];
//把最上面的View放到最底層，一般轉場可能就2層相互轉換，也可用exchangeSubviewAtIndex:withSubviewAtIndex:
[bgView sendSubviewToBack:[[bgView subviews] lastObject]];

　　2-2）、封裝過的，簡潔，用UIView Animation，View的方法，非Layer

//參數cache，YES為截圖後再轉場，減輕系統負擔，動畫更流暢，NO為一起動畫，如需要邊轉場邊動畫的效果

//     UIViewAnimationTransitionNone,
//     UIViewAnimationTransitionFlipFromLeft,     //左邊下翻效果(X信，好友歷史說說，查看詳情)
//     UIViewAnimationTransitionFlipFromRight,    //右邊下翻效果
//     UIViewAnimationTransitionCurlUp,           //上翻日曆效果
//     UIViewAnimationTransitionCurlDown,         //下蓋日曆效果

//1、導航欄轉場
[UIView animateWithDuration:2.0 animations:^{
    [UIView setAnimationTransition:UIViewAnimationTransitionFlipFromLeft forView:self.navigationController.view cache:YES];
    [self.navigationController pushViewController:vc animated:NO];
}];

//2、普通View轉場，把當前View放在最底層，最好大小全相同，不然動畫效果很尷尬
[UIView animateWithDuration:2.0 animations:^{
    //轉場動畫
    [UIView setAnimationTransition:UIViewAnimationTransitionCurlDown forView:bgView cache:YES];
    //最上面的View放到最下麵
    [bgView sendSubviewToBack:[[bgView subviews] lastObject]];
}];

　　2-3）、VC自帶的模態視圖轉場動畫

//設置模態視圖的轉場效果（如X信，朋友的歷史單條說說，點擊查看詳細）。
second.modalTransitionStyle = UIModalTransitionStyleFlipHorizontal;
//推
[self presentViewController:second animated:YES completion:^{
}];

N、粒子動畫

　　N-0）、寫在前面

　　　　粒子發射層繼承CALayer，那麼陰影、邊界、圓角的屬性都有。

　　　　y軸/x軸速度小於加速度(重力) 會有雪花/風力效果（cell.velocity < cell.yAcceleration）。

　　　　y軸速度稍大於加速度(重力) 會有發射/投擲效果（cell.velocity > cell.yAcceleration）。

　　　　粒子發射層設為疊加模式會有火焰效果（emitterLayer.renderMode = kCAEmitterLayerAdditive）。

　　　　粒子的名字。可以用KVC來設置屬性（[emitterLayer setValue:[NSNumber numberWithFloat:M_PI] forKey:@"emitterCells.test2.emissionLongitude"];）。

　　　　粒子縮放速度。當縮放到0的時候，又會放大，所以想要從birth到lifetime結束都是縮放形式，就需要不斷調值，不要縮放太快（cell.scaleSpeed）。

　　　　粒子包含粒子。顏色，速度之類的都會疊加，會有意想不到的效果（emitterLayer.emitterCells = @[cell]; cell.emitterCells = @[cell2];）。

　　　　粒子的形狀、模型 emitterShape、emitterMode 搞了很久沒搞懂。多虧這邊文章（ http://www.cnblogs.com/densefog/p/5424155.html ）

　　N-1）、創建粒子發射層

    //創建 粒子發射器層layer
    emitterLayer = [CAEmitterLayer layer];
    //發射器 frame(可設置合適大小來 masksToBounds )
    emitterLayer.frame = self.view.bounds;
    //發射器 發射源起點
    emitterLayer.emitterPosition = CGPointMake(emitterLayer.frame.size.width / 2.0, emitterLayer.frame.size.height/ 2.0);
    //發射器 發射源size
    emitterLayer.emitterSize = CGSizeMake(100.0, 100.0);
    //混合方式（Add是疊加，有火焰效果，其他覆蓋）
//    kCAEmitterLayerUnordered    //無序
//    kCAEmitterLayerOldestFirst  //老的在（數組）最前面（顯示最下層）
//    kCAEmitterLayerOldestLast   //老的在（數組）最後面（顯示最上層）
//    kCAEmitterLayerBackToFront  //
//    kCAEmitterLayerAdditive     //疊加
    emitterLayer.renderMode = kCAEmitterLayerOldestLast;
    //是否開啟超三維空間模式(NO慢慢變白透明消失，YES直接透明消失)
    emitterLayer.preservesDepth = YES;
    //發射器形狀
//    kCAEmitterLayerPoint        //發射源一個點，位置來源（emitterPosition）
//    kCAEmitterLayerLine         //發射源一條線，位置來源（emitterSize，正中的橫線）
//    kCAEmitterLayerRectangle    //發射源一個矩形，位置來源（emitterSize）
//    kCAEmitterLayerCuboid       //發射源一個立方體，位置來源（emitterSize + emitterZPosition）
//    kCAEmitterLayerCircle       //發射源一個圓形，位置來源（emitterSize 的內切圓）
//    kCAEmitterLayerSphere       //發射源一個立體圓形，位置來源（emitterSize + emitterZPosition的內切圓）
    emitterLayer.emitterShape = kCAEmitterLayerPoint;
    //發射模型
//    kCAEmitterLayerPoints       //發射模型一個點
//    kCAEmitterLayerOutline      //發射模型外框邊界
//    kCAEmitterLayerSurface      //發射模型矩陣裡面
//    kCAEmitterLayerVolume       //
    emitterLayer.emitterMode = kCAEmitterLayerPoints;
    //發射Z軸起點
    emitterLayer.emitterZPosition = 50.0;
    //發射器的深度
    emitterLayer.emitterDepth = 50.0;
    //在一開始生成隨機的粒子數？（暫時看不出效果）
    emitterLayer.seed = 80;
    //添加到layer層
    [self.view.layer addSublayer:emitterLayer];

　　N-2）、創建粒子

    //創建 粒子
    CAEmitterCell *cell = [[CAEmitterCell alloc] init];
    //粒子 名稱
    cell.name = @"test";
    //粒子 圖片
    cell.contents = (__bridge id _Nullable)([UIImage imageNamed:@"2"].CGImage);
    //粒子 y軸加速度(重力)
    cell.yAcceleration = 75.f;//-50.f;
    //粒子 x軸加速度(重力)
    cell.xAcceleration = 0.f;
    //粒子 生成速率(/秒,>1.0)
    cell.birthRate = 1;
    //粒子 生命周期
    cell.lifetime = 5.0;
    //粒子 顏色
    cell.color = [UIColor colorWithRed:1 green:0.5 blue:0.1 alpha:1.0].CGColor;
    //粒子 透明速度(-0.0 <-> -1.0,-0.9消失得快，-0.1消失得慢)
    cell.alphaSpeed = -0.1;
    //粒子 運動的速度
    cell.velocity = 50;
    //粒子 運動的速度範圍(velocity +- Range/2 )
    cell.velocityRange = 50;
    //粒子旋轉角度(0 - Range)
    cell.spin = 0;
    //粒子旋轉角度範圍(0 - Range)
    cell.spinRange = 0;
    //粒子 縮放
    cell.scale = 1;
    //粒子 縮放速度（-1 <-> 1 ,-變小 +變大，煙花爆炸後效果,如果變小到0又會增大，值需要調試）
    cell.scaleSpeed = -0.5;
    //粒子 發射角度
    cell.emissionLongitude = (M_PI/2)*3;
    //粒子 發射角度範圍(Longitude +- Range/2 )
    cell.emissionRange = M_PI/2;
    //顏色變換範圍
//    cell.greenRange = 1.0;
//    cell.redRange = 1.0;
//    cell.blueRange = 1.0;
    //顏色變換速度
//    cell.redSpeed =-1.5;
//    cell.blueSpeed =+1.5;
//    cell.greenSpeed =+1.0;

　　N-3）、添加粒子到發射層

//單個粒子動畫
emitterLayer.emitterCells = @[cell];

//多個粒子同時動畫
emitterLayer.emitterCells = @[cell,cell2];

//粒子動畫包含粒子動畫（裂變的感覺）
emitterLayer.emitterCells = @[cell];
cell.emitterCells = @[cell2];
cell2.emitterCells = @[cell3];

註：

　　在第三種情況，控制好 lifebirthRate 和 lifetime ，可以達到煙花效果。

　　比如cell是發射效果（這裡設為1個/秒吧）、cell3是爆炸效果（幾十、幾百個/秒），如果，cell3加在cell上，效果就像彗星移動（cell移動的過程中，cell3不斷生成）。

　　那麼要實現發射效果，就要加個緩存層cell2。cell的生命周期（N秒) 和cell2的生成率（1個/N秒)一樣，cell剛消失，cell2才產生。不過因為 lifebirthRate >= 1 。所以目前只有1秒符合。

cell.lifebirthRate = 隨意
cell.lifetime = 1.0 + ?;

cell2.lifebirthRate = 1.0;
cell2.lifetime = 1.0 + ?;

cell2的圖片可以空，等到cell快消失前，生成一個cell2，同時cell2包含的cell3一秒幾十、幾百個生成，就是發射爆炸效果了。