動畫效果:Animation

標籤：動畫效果   animation   動畫   動畫總結   

先建立一個圖片imageView

 self.imageView =[[UIImageView alloc] initWithImage:[UIImage imageNamed:@"tara4.jpg"]];    self.imageView.frame =CGRectMake(85, 400, 200, 200);    self.imageView.layer.cornerRadius =100;    self.imageView.layer.masksToBounds=YES;    [self.view addSubview:self.imageView];

寫幾個button的點擊方法寫在button的點擊方法,點擊觸發效果1. UIView提供的動畫(1).// UIView 提供的第一種動畫

 // Duration 動畫的時間間隔(double類型)[UIView animateWithDuration:3 animations:^{   // 動畫內容寫在block裡        self.imageView.frame =CGRectMake(100, 100, 100, 75);    }];使 imageView 移動到新的位置上,並且把size改為新的

(2).UIView 的第二種使 imageView 移動到新的位置上,並且把size改為新的,最後又回到原位置

[UIView animateWithDuration:5 animations:^{         self.imageView.frame =CGRectMake(30, 100, 300, 225);        self.imageView.alpha =0;    } completion:^(BOOL finished) {        [UIView animateWithDuration:3 animations:^{        self.imageView.frame =CGRectMake(85, 400, 200, 150);            self.imageView.alpha =1;        }];    }];

(3).UIView的第三種方法可以重複 第二個參數:延遲, 第三個參數:動畫類型只重複動畫的內容

[UIView animateWithDuration:5 delay:0.1 options:UIViewAnimationOptionRepeat animations:^{        self.imageView.frame =CGRectMake(30, 100, 300, 225);        self.imageView.alpha =0;    } completion:^(BOOL finished) {        [UIView animateWithDuration:3 animations:^{                    self.imageView.frame =CGRectMake(85, 400, 200, 150);                        self.imageView.alpha =1;                    }];    }];

(4)UIView 第四種 顫抖動畫// 第三個參數:設定的越小,震動的越劇烈// 第四個參數 :設定越大, 圖片的初速度越大

   [UIView animateWithDuration:5 delay:0.1 usingSpringWithDamping:0.1 initialSpringVelocity:10 options:UIViewAnimationOptionRepeat animations:^{        self.imageView.frame =CGRectMake(30, 100, 300, 225);        self.imageView.alpha =0;    } completion:^(BOOL finished) {        [UIView animateWithDuration:3 animations:^{                                self.imageView.frame =CGRectMake(85, 400, 200, 150);                                    self.imageView.alpha =1;                                }];    }];

2.通過transform對視圖進行操作(1).對視圖進行旋轉的操作

// 第二個參數:設定旋轉的弧度 (π /4)    self.imageView.transform =CGAffineTransformRotate(self.imageView.transform, M_PI_4);

(2).對視圖的縮放// 第二, 三個參數:設定縮放的比例

 self.imageView.transform = CGAffineTransformScale(self.imageView.transform, 0.9, 0.9);

(3).使視圖位移設定視圖的位移量

    self.imageView.transform = CGAffineTransformTranslate(self.imageView.transform, 50, 50);

3. layer動畫layer 主要負責顯示控制項的一些設定資訊 ,比如邊框 ,弧度等 ,layer動畫的種類很多,我們看見的UIView的動畫也是封裝了幾個layer動畫(1).建立一個動畫的效果

    CATransition *transition =[CATransition animation];設定動畫種類 : cube (), rippleEffect (水波紋) suckEffect oglFlip transition.type [email protected]"rippleEffect";   // 設定動畫時間長度    [transition setDuration:3];    // 設定動畫的重複次數    // NSIntegerMax 整數的最大值    [transition setRepeatCount:NSIntegerMax];//向imageView 上添加動畫效果, 添加到imageView的layer上    [self.imageView.layer addAnimation:transition forKey:@"transistion"];

(2).layer 動畫的第二種 (放大縮小)

CABasicAnimation *basic =[CABasicAnimation animationWithKeyPath:@"transform.scale"];    // 對layer動畫設定需要kvc的方式賦值 ,就是需要通過給定一個key,再去設定    // 動畫時間長度    [basic setDuration:3];    // 動畫執行的次數    [basic setRepeatCount:NSIntegerMax];    // 這個動畫設定的是一個縮放的效果,需要給一個開始的初始值    縮放的初始倍數    basic.fromValue =[NSNumber numberWithInt:1];    // 在設定一個結束的值   縮放的結束倍數    basic.toValue = [NSNumber numberWithInt:2];    // toValue 和fromvalue 需要一個id類型的對象(需要整數類型,0.5按0算)    //把動畫添加到視圖上    [self.imageView.layer addAnimation:basic forKey:@"basic"];

(3). 讓圖片旋轉

 CABasicAnimation *basic =[CABasicAnimation animationWithKeyPath:@"transform.rotation"];    // 設定角度    basic.fromValue =[NSNumber numberWithInt:0.0];    basic.toValue =[NSNumber numberWithFloat: -4 *M_PI_2];    // 設定動畫時間長度    [basic setDuration:3];    // 次數    [basic setRepeatCount:NSIntegerMax];    [self.imageView.layer addAnimation:basic forKey:@"basic"];    // 是否回到原位    [basic setAutoreverses:YES];

(4). 主要畫面格動畫

    CAKeyframeAnimation *keyAnimation =[CAKeyframeAnimation animationWithKeyPath:@"position"];    // 給動畫建立一個行走的路徑, 用來記錄移動的的關鍵座標    CGMutablePathRef path =CGPathCreateMutable();    // 指定起始的座標位置    // 第一個參數 :用 path來儲存起始的路徑    // 第二個參數 :NULL    // 第三四個參數 :要移動的控制項的起始座標    CGPathMoveToPoint(path,NULL, self.imageView.frame.origin.x, self.imageView.frame.origin.y);    // 設定圖片的移動軌跡    CGPathAddLineToPoint(path, NULL, 100, 100);    CGPathAddLineToPoint(path, NULL, 300, 20);    CGPathAddLineToPoint(path, NULL, 50, 10);    CGPathAddLineToPoint(path, NULL, 140, 200);    // 給視圖設定一條曲線路徑    CGPathAddCurveToPoint(path, NULL, 200, 200, 200, 100, 120, 40);    CGPathAddCurveToPoint(path, NULL, 80, 10, 20, 100, 300, 100);    CGPathAddCurveToPoint(path, NULL, 20, 90, 20, 100, 200, 150);    CGPathAddCurveToPoint(path, NULL, 30, 70, 60, 90, 110, 50);    // 設定動畫的時間長度    [keyAnimation setDuration:3];    [keyAnimation setRepeatCount:NSIntegerMax];    // 把設計好的路線放到動畫中    [keyAnimation setPath:path];    // 最後,把動畫添加到視圖上    [self.imageView.layer addAnimation:keyAnimation forKey:@"keyAnimation"];

著作權聲明：本文為博主原創文章，未經博主允許不得轉載。

動畫效果:Animation