美女鎮(zhèn)樓.JPG

好久沒有更新簡書了，最近在看一個(gè)動畫的第三方，想著是時(shí)候可以把動畫相關(guān)的東西總結(jié)下了！對了，上面的美女是龍母！哈哈，最近看權(quán)力游戲，感覺很好！

-------------------------------------------------進(jìn)入正題------------------------------------------------------------------

動畫的大體分類(個(gè)人總結(jié)可能有誤)

分類.png

UIView 動畫

屬性動畫

    [UIView beginAnimations:nil context:nil];
    [UIView setAnimationDelay:1];
    [UIView setAnimationDuration:2];
    [UIView setAnimationRepeatCount:100];
    [UIView setAnimationRepeatAutoreverses: YES];  // 翻轉(zhuǎn)
    [UIView setAnimationCurve:UIViewAnimationCurveEaseInOut]; //設(shè)置動畫變化的曲線
    UIView *view =  self.redview;
    view.alpha = 0;
    view.center = CGPointMake(view.center.x + 300, view.center.y);
    [UIView setAnimationDelegate:self];   // 設(shè)置代理 監(jiān)測動畫結(jié)束的
    [UIView setAnimationDidStopSelector:@selector(shopAction)];
    [UIView commitAnimations];


   其中   setAnimationCurve 參數(shù)為
   UIViewAnimationCurveEaseInOut：這種曲線的動畫開始緩慢，在其持續(xù)時(shí)間的中間加速，然后在完成之
 前再次減慢。這是大多數(shù)動畫的默認(rèn)曲線。
   UIViewAnimationCurveEaseIn：動畫開始時(shí)緩慢，然后加速，直到動畫結(jié)束。這里選用這種類型動畫曲
 線。
   UIViewAnimationCurveEaseOut：動畫開始時(shí)速度很快，在結(jié)束前開始減速。
   UIViewAnimationCurveLinear：在動畫持續(xù)時(shí)間內(nèi)，動畫勻速運(yùn)行。

基于Block的屬性動畫

     [UIView animateWithDuration:0.5 animations:^{
    
    UIView *view = self.viewArray[4];
   view.transform = CGAffineTransformRotate(view.transform, M_2_PI); // 順時(shí)針旋轉(zhuǎn)
}];


[UIView animateKeyframesWithDuration:2 delay:0 options:UIViewKeyframeAnimationOptionRepeat animations:^{
    UIView *view = self.viewArray[5];
   view.transform = CGAffineTransformMakeScale(2, 1);//寬高伸縮比例;
} completion:^(BOOL finished) {
    if (finished) {
       UIView *view = self.viewArray[5];
       view.backgroundColor = [UIColor colorWithRed: arc4random()%256 / 255.0 green:arc4random()%256 / 255.0 blue:arc4random()%256/ 255.0  alpha:1.0];
    }
}];
[UIView animateKeyframesWithDuration:5 delay:0 options:UIViewKeyframeAnimationOptionRepeat animations:^{
     UIView *view = self.viewArray[6];
    view.transform = CGAffineTransformMakeTranslation(300, 6);//xy移動距離;
} completion:^(BOOL finished) {
    if (finished) {
        UIView *view = self.viewArray[6];
        view.backgroundColor = [UIColor colorWithRed: arc4random()%256 / 255.0 green:arc4random()%256 / 255.0 blue:arc4random()%256/ 255.0  alpha:1.0];
    }
    
}];
[UIView animateWithDuration:0.5 delay:0 options:UIViewAnimationOptionRepeat animations:^{
      UIView *view = self.viewArray[7];
      view.transform = CGAffineTransformMake(1.5, 1, 2, 2, 1,1);//自定義形變,參數(shù)自擬;
    
} completion:^(BOOL finished) {
    if (finished) {
           UIView *view = self.viewArray[7];
           view.backgroundColor = [UIColor colorWithRed: arc4random()%256 / 255.0 green:arc4random()%256 / 255.0 blue:arc4random()%256/ 255.0  alpha:1.0];
    }
    
}];

// 彈簧效果  // 一  動畫執(zhí)行的時(shí)間   二  動畫延遲執(zhí)行的時(shí)間  第三個(gè)  彈簧震動的頻率 0 - 1 值越小頻率越高 四 彈簧的起始抖動的速度  五 代表動畫的效果  六 具體執(zhí)行的動畫   七 執(zhí)行完之后 的操作
[UIView animateWithDuration:1 delay:0 usingSpringWithDamping:0.1 initialSpringVelocity:10 options:UIViewAnimationOptionCurveLinear animations:^{
         UIView *view = self.viewArray[8];
    if (view.center.x > [UIScreen mainScreen].bounds.size.width) {
        view.center = CGPointMake(0, view.center.y);
    }else{
        view.center = CGPointMake(view.center.x + 10, view.center.y);
    }
    
    
    
} completion:^(BOOL finished) {
    
}];

我的理解是UIView的屬性動畫 就是在一定時(shí)間內(nèi)改變其屬性值從而達(dá)到動畫的效果。

屬性動畫效果如下，有助于理解不同參數(shù)的效果

UIview 屬性動畫.gif

過渡動畫（本來有做gif 圖但是不知道為啥放上來不會動了 捂臉!）
圖好了??

轉(zhuǎn)場.gif

  [UIView transitionWithView:self.view3 duration:1 options:UIViewAnimationOptionTransitionFlipFromTop animations:^{
        self.view1.hidden = NO;
        self.view2.hidden = YES;
    } completion:^(BOOL finished) {
        
    }];


  參數(shù)  
 //轉(zhuǎn)場動畫相關(guān)的

  UIViewAnimationOptionTransitionNone            //無轉(zhuǎn)場動畫
  UIViewAnimationOptionTransitionFlipFromLeft    //轉(zhuǎn)場從左翻轉(zhuǎn)
  UIViewAnimationOptionTransitionFlipFromRight   //轉(zhuǎn)場從右翻轉(zhuǎn)
  UIViewAnimationOptionTransitionCurlUp          //上卷轉(zhuǎn)場
  UIViewAnimationOptionTransitionCurlDown        //下卷轉(zhuǎn)場
  UIViewAnimationOptionTransitionCrossDissolve   //轉(zhuǎn)場交叉消失
  UIViewAnimationOptionTransitionFlipFromTop     //轉(zhuǎn)場從上翻轉(zhuǎn)
  UIViewAnimationOptionTransitionFlipFromBottom  //轉(zhuǎn)場從下翻轉(zhuǎn)

layer 層動畫

layer 層屬性 設(shè)置一些邊框 圓角等

view.layer.borderWidth = 6;
view.layer.borderColor = [UIColor redColor].CGColor;
view.layer.cornerRadius = 10;
CGPoint archP = view.layer.anchorPoint;
CGPoint postion = view.layer.position;

layer 動畫 CABasicAnimation

   // 一些常用的key
   /*   transform.scale 比例轉(zhuǎn)化    @(0.8)
 transform.scale.x  寬的比例    @(0.8)
 transform.scale.y  高的比例    @(0.8)
 transform.rotation.x   圍繞x軸旋轉(zhuǎn)  @(M_PI)
 transform.rotation.y   圍繞y軸旋轉(zhuǎn)  @(M_PI)
 transform.rotation.z   圍繞z軸旋轉(zhuǎn)  @(M_PI)
 cornerRadius   圓角的設(shè)置   @(50)
 backgroundColor    背景顏色的變化 (id)[UIColor purpleColor].CGColor
 bounds 大小，中心不變 [NSValue valueWithCGRect:CGRectMake(0, 0, 200, 200)];
 position   位置(中心點(diǎn)的改變)  [NSValue valueWithCGPoint:CGPointMake(300, 300)];
 contents   內(nèi)容，比如UIImageView的圖片 imageAnima.toValue = (id)[UIImage imageNamed:@"to"].CGImage;
 opacity    透明度 @(0.7)
 contentsRect.size.width    橫向拉伸縮放  @(0.4)最好是0~1之間的
 */
   /*  屬性   說明
duration    動畫的時(shí)長
repeatCount 重復(fù)的次數(shù)。不停重復(fù)設(shè)置為 HUGE_VALF
repeatDuration  設(shè)置動畫的時(shí)間。在該時(shí)間內(nèi)動畫一直執(zhí)行，不計(jì)次數(shù)。
beginTime   指定動畫開始的時(shí)間。從開始延遲幾秒的話，設(shè)置為【CACurrentMediaTime() + 秒數(shù)】 的方式
timingFunction  設(shè)置動畫的速度變化
autoreverses    動畫結(jié)束時(shí)是否執(zhí)行逆動畫
fromValue   所改變屬性的起始值
toValue 所改變屬性的結(jié)束時(shí)的值
byValue 所改變屬性相同起始值的改變量
 */

 //CABasicAnimation 最終不會修改其屬性  只是為了做動畫使用
 // 設(shè)置需要修改的layer層屬性
CABasicAnimation *basicAnimation = [CABasicAnimation animationWithKeyPath:@"position.x"];
//設(shè)置對應(yīng)的控件Layer層position.x 的起始值
basicAnimation.fromValue = @(-112);
// 設(shè)置最終值
basicAnimation.toValue = @(425);
// 設(shè)置時(shí)間
basicAnimation.duration = 4;
// 設(shè)置動畫重復(fù)的次數(shù)
basicAnimation.repeatCount = 1000000;
// 將動畫添加到對應(yīng)視圖的layer層上
[view1.layer addAnimation:basicAnimation forKey:nil];


CABasicAnimation *transformAnima = [CABasicAnimation animationWithKeyPath:@"transform.rotation.y"];

transformAnima.fromValue = @(M_PI_2);
transformAnima.toValue = @(M_PI);
transformAnima.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
transformAnima.autoreverses = YES;
transformAnima.repeatCount = HUGE_VALF;
transformAnima.beginTime = CACurrentMediaTime() + 1;


// 這兩個(gè)是在動畫結(jié)束之后使view 到最終狀態(tài)而不是原始狀態(tài)  因?yàn)閘ayer 層動畫 其實(shí)view 本身frame 沒有改變的
transformAnima.removedOnCompletion = NO;
transformAnima.fillMode = kCAFillModeForwards;
//    fillMode
 /* 該屬性定義了你的動畫在開始和結(jié)束時(shí)的動作。默認(rèn)值是 kCAFillModeRemoved。
  取值的解釋
   kCAFillModeRemoved 設(shè)置為該值，動畫將在設(shè)置的 beginTime 開始執(zhí)行（如沒有設(shè)置beginTime屬性，則動畫立即執(zhí)行），動畫執(zhí)行完成后將會layer的改變恢復(fù)原狀。
   kCAFillModeForwards 設(shè)置為該值，動畫即使之后layer的狀態(tài)將保持在動畫的最后一幀，而removedOnCompletion的默認(rèn)屬性值是 YES，所以為了使動畫結(jié)束之后layer保持結(jié)束狀態(tài)，應(yīng)將removedOnCompletion設(shè)置為NO。
   kCAFillModeBackwards 設(shè)置為該值，將會立即執(zhí)行動畫的第一幀，不論是否設(shè)置了 beginTime屬性。觀察發(fā)現(xiàn)，設(shè)置該值，剛開始視圖不見，還不知道應(yīng)用在哪里。
 kCAFillModeBoth 該值是 kCAFillModeForwards 和 kCAFillModeBackwards的組合狀態(tài)
*/

   // 添加動畫
   [view.layer addAnimation:transformAnima forKey:@"A"];

CAKeyframeAnimation 關(guān)鍵幀動畫

// 關(guān)鍵幀動畫
// 指定動畫需要修改的屬性
CAKeyframeAnimation *keyFrameA = [CAKeyframeAnimation animationWithKeyPath:@"position"];
// 獲得起始的點(diǎn)
CGPoint point1 = view12.layer.position;
// 第二個(gè)點(diǎn)
CGPoint point2 = CGPointMake(375 / 2.0, -50);
// 第三個(gè)點(diǎn)
CGPoint point3 = CGPointMake(375 + 50, point1.y);
// 第四個(gè)點(diǎn)
CGPoint point4 = point1;
NSValue *pointV1 = [NSValue valueWithCGPoint:point1];
NSValue *pointV2 = [NSValue valueWithCGPoint:point2];
NSValue *pointV3 = [NSValue valueWithCGPoint:point3];
NSValue *pointV4 = [NSValue valueWithCGPoint:point4];
keyFrameA.values = @[pointV1,pointV2,pointV3,pointV4];
// 設(shè)置每幀動畫的起始和結(jié)束點(diǎn)
keyFrameA.duration = 5;
// 設(shè)置重復(fù)的次數(shù)
keyFrameA.repeatCount = 1000;
//將動畫添加到指定的控件的layer上；
[view12.layer addAnimation:keyFrameA forKey:nil];


//繞矩形循環(huán)跑

CALayer * rectLayer = [[CALayer alloc] init];
rectLayer.frame = CGRectMake(15, 200, 30, 30);
rectLayer.cornerRadius = 15;
rectLayer.backgroundColor = [[UIColor blackColor] CGColor];
[self.view.layer addSublayer:rectLayer];
CAKeyframeAnimation *rectRunAnimation = [CAKeyframeAnimation animationWithKeyPath:@"position"];
//設(shè)定關(guān)鍵幀位置，必須含起始與終止位置
rectRunAnimation.values = @[[NSValue valueWithCGPoint:rectLayer.frame.origin],
                            [NSValue valueWithCGPoint:CGPointMake([UIScreen mainScreen].bounds.size.width - 15,
                                                                  rectLayer.frame.origin.y)],
                            [NSValue valueWithCGPoint:CGPointMake([UIScreen mainScreen].bounds.size.width - 15,
                                                                  rectLayer.frame.origin.y + 100)],
                            [NSValue valueWithCGPoint:CGPointMake(15, rectLayer.frame.origin.y + 100)],
                            [NSValue valueWithCGPoint:rectLayer.frame.origin]];

 //    CGMutablePathRef path = CGPathCreateMutable()
//    CGPathMoveToPoint(path, NULL, rectLayer.position.x - 15, rectLayer.position.y - 15);
 //    CGPathAddLineToPoint(path, NULL, 320 - 15, rectLayer.frame.origin.y);
 //    CGPathAddLineToPoint(path, NULL, 320 - 15, rectLayer.frame.origin.y + 100);
 //    CGPathAddLineToPoint(path, NULL, 15, rectLayer.frame.origin.y + 100);
//    CGPathAddLineToPoint(path, NULL, 15, rectLayer.frame.origin.y);
//    rectRunAnimation.path = path;
//    CGPathRelease(path);



//設(shè)定每個(gè)關(guān)鍵幀的時(shí)長，如果沒有顯式地設(shè)置，則默認(rèn)每個(gè)幀的時(shí)間=總duration/(values.count - 1)
rectRunAnimation.keyTimes = @[[NSNumber numberWithFloat:0.0], [NSNumber numberWithFloat:0.6],
                              [NSNumber numberWithFloat:0.7], [NSNumber numberWithFloat:0.8],
                              [NSNumber numberWithFloat:1]];

  //    1 kCAMediaTimingFunctionLinear//線性
  //    2 kCAMediaTimingFunctionEaseIn//淡入
  //    3 kCAMediaTimingFunctionEaseOut//淡出
 //    4 kCAMediaTimingFunctionEaseInEaseOut//淡入淡出
  //    5 kCAMediaTimingFunctionDefault//默認(rèn)


rectRunAnimation.timingFunctions = @[[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut],
                                     [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseOut],
                                     [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseIn],
                                     [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionDefault]];
rectRunAnimation.repeatCount = 1000;
rectRunAnimation.autoreverses = NO;

 //    1 const kCAAnimationLinear//線性，默認(rèn)
 //    2 const kCAAnimationDiscrete//離散，無中間過程，但keyTimes設(shè)置的時(shí)間依舊生效，物體跳躍地出現(xiàn)在各個(gè)關(guān)鍵幀上
 //    3 const kCAAnimationPaced//平均，keyTimes跟timeFunctions失效
 //    4 const kCAAnimationCubic//平均，同上
 //    5 const kCAAnimationCubicPaced//平均，同上

rectRunAnimation.calculationMode = kCAAnimationLinear;
rectRunAnimation.duration = 4;
rectRunAnimation.removedOnCompletion = NO;
rectRunAnimation.fillMode = kCAFillModeForwards;
[rectLayer addAnimation:rectRunAnimation forKey:@"rectRunAnimation"];
self.rectLayer = rectLayer;
}
  // 抖動示例

  // 創(chuàng)建幀動畫對象
CAKeyframeAnimation *anim = [CAKeyframeAnimation animation];
  // 設(shè)置動畫屬性
anim.keyPath = @"transform.rotation";
anim.values = @[@(kAngleToRadian(-5)), @(kAngleToRadian(5))];
 // 設(shè)置動畫執(zhí)行次數(shù)
anim.repeatCount = HUGE_VALF;
 // 設(shè)置動畫的執(zhí)行時(shí)長
anim.duration = 0.1;
  // 設(shè)置動畫的自動反轉(zhuǎn)效果
anim.autoreverses = YES;
anim.removedOnCompletion = NO;
anim.fillMode = kCAFillModeForwards;
/ 將動畫效果添加到lionImage的layer上
[self.imagev.layer addAnimation:anim forKey:nil];

本來都有動圖的，現(xiàn)在都動不了，大家可以想象下 一個(gè)圖在左右抖動 ， 上面的那個(gè)圖是 一個(gè)小球按著矩形 線路走一會快一會慢 ！ ??

圖來了

CAKeyframeAnimation.gif

其實(shí)關(guān)鍵幀動畫相對來說可能會作出比較復(fù)雜的效果，使用方法很簡單，只是復(fù)雜的動畫會使用到算法，可能稍微需要思考。

CATransition 轉(zhuǎn)場

 kCATransitionFade                   //交叉淡化過渡                     
kCATransitionMoveIn               //移動覆蓋原圖                     
kCATransitionPush                    //新視圖將舊視圖推出去                     
kCATransitionReveal                //底部顯出來     
 kCATransitionFromRight；                     
 kCATransitionFromLeft(默認(rèn)值)                     
 kCATransitionFromTop；                     
 kCATransitionFromBottom          
注：kCATransitionFade 不支持Subtype   

CATransition *anima = [CATransition animation];
anima.type = kCATransitionFade;//設(shè)置動畫的類型
anima.subtype = kCATransitionFromRight; //設(shè)置動畫的方向
//anima.startProgress = 0.3;//設(shè)置動畫起點(diǎn)
//anima.endProgress = 0.8;//設(shè)置動畫終點(diǎn)
anima.duration = 1.0f;
 [_demoView.layer addAnimation:anima forKey:@"fadeAnimation"];

當(dāng)然很多動畫都不是單一的出現(xiàn)的，下面我們就看下動畫組合。
其實(shí)動畫組合無非就是多種動畫作用在一個(gè)view上面達(dá)到的效果

例如

組合動畫.gif

動畫組合

  // 動畫組合
CABasicAnimation *positionAnima = [CABasicAnimation animationWithKeyPath:@"position.y"];
positionAnima.duration = 0.8;
positionAnima.fromValue = @(view.center.y);
positionAnima.toValue =  @(view.center.y + 100);
positionAnima.timingFunction = [CAMediaTimingFunction 
 functionWithName:kCAMediaTimingFunctionLinear];
positionAnima.repeatCount = HUGE_VALF;
//    positionAnima.repeatDuration = 2;
positionAnima.removedOnCompletion = NO;
positionAnima.fillMode = kCAFillModeForwards;
positionAnima.delegate = self;
positionAnima.autoreverses = YES; // 執(zhí)行逆動畫
[view.layer addAnimation:positionAnima forKey:@"AnimationMoveY"];


/* 放大縮小 */

// 設(shè)定為縮放
CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"transform.scale"];

// 動畫選項(xiàng)設(shè)定
animation.duration = 2.5; // 動畫持續(xù)時(shí)間
animation.repeatCount = HUGE_VALF; // 重復(fù)次數(shù)
animation.autoreverses = YES; // 動畫結(jié)束時(shí)執(zhí)行逆動畫
// 縮放倍數(shù)
animation.fromValue = [NSNumber numberWithFloat:1.0]; // 開始時(shí)的倍率
animation.toValue = [NSNumber numberWithFloat:2.0]; // 結(jié)束時(shí)的倍率
// 添加動畫
animation.removedOnCompletion = NO;
animation.fillMode = kCAFillModeForwards;
[view.layer addAnimation:animation forKey:@"scale-layer"];

效果就是在移動的過程中放大縮小

好了，至此都總結(jié)完畢，這些都是基礎(chǔ)的東西，好好利用這些再復(fù)雜的動畫也能做出來！ 當(dāng)然，還有粒子效果這里因?yàn)闆]有動圖就不先不總結(jié)了，好的，謝謝大家的捧場！