iOS開發 - 動畫效果

1、簡介

一個優秀的應用少不了多彩的動畫效果

iOS提供了多種動畫效果的實現，包括一般動畫、核心動畫等

2、簡單動畫

頭尾式

// 頭尾式動畫實現動畫效果非常簡單，秩序要三步
// 頭尾式動畫只能實現簡單的效果，如UIView的移動，顏色漸變等

// 1.開始動畫
[UIView beginAnimations:nil context:nil];

// 2.設置動畫時間
[UIView setAnimationDuration:3.0];

// 需要實現的動畫效果

// 3.提交動畫
[UIView commitAnimations];

Block式

// Block式動畫只需要將需要實現的動畫效果代碼添加到Block塊即可
[UIView animateWithDuration:0.5 animations:^{
	// 需要實現的動畫效果
}];

序列幀式

// 序列幀動畫也叫電影式動畫
// 利用電影的原理實現原理，將圖片一張張的播放出來即可
// 序列幀動畫只適合少量的圖片的情況，大量圖片會佔用太多內存資源

// 創建存放圖片的數組，以四張圖片爲例
NSMutableArray *imageArray = [NSMutableArray array];
for (int i=1; i<=4; i++)
{
    UIImage *image = [UIImage imageNamed:[NSString stringWithFormat:@"%02d",i]];
    [imageArray addObject:image];
}
    
// 創建顯示圖片的控件
UIImageView *imageView = [[UIImageView alloc] initWithFrame:CGRectMake(x, y, w, h)];
[self.view addSubview:imageView];
    
// 設置圖片空間的圖片數組
imageView.animationImages = imageArray;
    
// 設置動畫的時間，即播放一次所需要的時間
imageView.animationDuration = 5;
    
// 設置動畫的重複次數，默認爲0，也就是無限循環
imageView.animationRepeatCount = 0;
    
// 開始執行動畫
[imageView startAnimating];

// 說明：使用序列幀動畫可能需要判斷動畫執行的狀態
// stopAnimating 停止播放
// isAnimating 是否正在播放

3、基礎動畫

// 基礎動畫主要是旋轉、縮放、平移等動畫效果
// iOS提供了CABasicAnimation類供我們使用

// 基礎動畫常用屬性
// keyPath : 動畫類型
// duration : 動畫時間
// removedOnCompletion : 是否維持動畫效果
// fillMode : 動畫模式


// 1.translation
// 動畫對象
CABasicAnimation *animation = [CABasicAnimation animation];

// 動畫類型
animation.keyPath = @"transform.translation";

/**
 *  translation 整體平移
 *
 *  byValue 移動的距離
 *
 *  @param 125 x方向移動的距離
 *  @param 105 y方向移動的距離
 */
animation.byValue = [NSValue valueWithCGPoint:CGPointMake(125, 105)];

// 執行時間
animation.duration = 1;

// 是否保持動畫執行後的效果
animation.removedOnCompletion = NO;

// 動畫模式
animation.fillMode = kCAFillModeForwards;

// 向執行動畫的圖層添加動畫
[self.imageView.layer addAnimation:animation forKey:nil];


// 2.position
CABasicAnimation *animation = [CABasicAnimation animation];
animation.keyPath = @"position";

/**
 *  position 整體平移
 *
 *  座標爲view的中心移動後的座標
 *
 */
// 第一種形式，移動到某位置
// 以最初的位置爲起點，移動相同的路徑，包括距離和方向
// animation.toValue = [NSValue valueWithCGPoint:CGPointMake(0, 0)];
// 第二種形式，每次偏移量爲
animation.byValue = [NSValue valueWithCGPoint:CGPointMake(10, 10)];

animation.duration = 1;
animation.removedOnCompletion = NO;
animation.fillMode = kCAFillModeForwards;
[self.imageView.layer addAnimation:animation forKey:nil];


// 3.rotation
CABasicAnimation *animation = [CABasicAnimation animation];
animation.keyPath = @"transform.rotation";

/**
 *  rotation 同心旋轉
 *
 *  @param M_PI_2 正數是向右旋轉
 */
animation.byValue = @(M_PI_2);

animation.duration = 1;
animation.removedOnCompletion = NO;
animation.fillMode = kCAFillModeForwards;
[self.imageView.layer addAnimation:animation forKey:nil];


// 4.bounds
CABasicAnimation *animation = [CABasicAnimation animation];
animation.keyPath = @"bounds";

/**
 *  bounds 以view中心爲起始點改變大小
 *
 *  @param 0  設置值不起作用
 *  @param 0  設置值不起作用
 *  @param 60 改變之後的寬度
 *  @param 60 改變之後的高度
 */
animation.toValue = [NSValue valueWithCGRect:CGRectMake(0, 0, 60, 60)];

animation.duration = 1;
animation.removedOnCompletion = NO;
animation.fillMode = kCAFillModeForwards;
[self.imageView.layer addAnimation:animation forKey:nil];


// 5.scale
CABasicAnimation *animation = [CABasicAnimation animation];
animation.keyPath = @"transform.scale";

/**
 *  scale 以view中心爲起始點縮放
 *
 *  @param -0.5 縮小0.5倍
 */
animation.byValue = @-0.5;

animation.duration = 1;
animation.removedOnCompletion = NO;
animation.fillMode = kCAFillModeForwards;
[self.imageView.layer addAnimation:animation forKey:nil];

4、轉場動畫

// 轉場動畫多用於視圖的切換，即從一個視圖過度到另一個視圖，因此也叫做過度動畫
// iOS提供CATransition實現轉場動畫效果

// 轉場動畫常用屬性
// 動畫類型 type
// 動畫時間 duration
// 動畫方向 subtype

// 轉場動畫
CATransition *animation = [CATransition animation];

// 動畫類型
animation.type = @"rippleEffect";

// 動畫時間
animation.duration = 1;

// 動畫方向
animation.subtype = @"kCATransitionFromLeft";

// 添加動畫
[self.imageView.layer addAnimation:animation forKey:nil];

5、關鍵幀動畫

// 關鍵幀動畫可以認爲是某一個UIView按照一定的路線的移動

UIImageView *imageView = [[UIImageView alloc] init];
imageView.backgroundColor = [UIColor cyanColor];
imageView.layer.masksToBounds = YES;
imageView.layer.cornerRadius = 15;
imageView.bounds = CGRectMake(0, 0, 30, 30);
imageView.center = CGPointMake(290, 190);
[self.view addSubview:imageView];

// 創建幀動畫對象
CAKeyframeAnimation *keyAnimation = [CAKeyframeAnimation animation];

// 類型
keyAnimation.keyPath = @"position";

// 路徑
// 優先級：path > values
/* keyAnimation.values = @[[NSValue valueWithCGPoint:CGPointMake(290, 190)],
 [NSValue valueWithCGPoint:CGPointMake(160, 60)],
 [NSValue valueWithCGPoint:CGPointMake(30, 190)],
 [NSValue valueWithCGPoint:CGPointMake(160, 320)],
 [NSValue valueWithCGPoint:CGPointMake(290, 190)]]; */

// 時間
keyAnimation.duration = 1;

// 節奏
keyAnimation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];

// 創建路徑：保存繪圖信息
CGMutablePathRef path = CGPathCreateMutable();
// 繪製圖形
// ellipse 橢圓形
// 路徑對象、NULL即可、橢圓形的外切四邊形的frame
CGPathAddEllipseInRect(path, NULL, CGRectMake(30, 60, 260, 260));

// 動畫路徑
keyAnimation.path = path;
CFRelease(path);

// 保存動畫效果
keyAnimation.removedOnCompletion = NO;
keyAnimation.fillMode = kCAFillModeForwards;

// 添加動畫
// 將動畫添加到imageView所在的圖層
[imageView.layer addAnimation:keyAnimation forKey:nil];

6、組動畫

// 組動畫就是將不同的動畫效果同時執行的動畫
// iOS提供了CAAnimationGroup實現組動畫

// 組動畫基本步驟
// 1.創建組動畫對象
// 2.創建不同的動畫效果
// 3.將不同的動畫效果加入到組動畫 
// 4.添加動畫到圖層

UIImageView *imageView = [[UIImageView alloc] initWithFrame:CGRectMake(20, 20, 40, 40)];
imageView.backgroundColor = [UIColor orangeColor];
[self.view addSubview:imageView];

// 動畫組
CAAnimationGroup *animationGroup = [CAAnimationGroup  animation];

// 平移
CABasicAnimation *position = [CABasicAnimation animation];
position.keyPath = @"position";
position.toValue = [NSValue valueWithCGPoint:CGPointMake(160, 240)];

// 旋轉
CABasicAnimation *rotation = [CABasicAnimation animation];
rotation.keyPath = @"transform.rotation";
rotation.toValue = @(M_PI);

// 縮放
CABasicAnimation *scale = [CABasicAnimation animation];
scale.keyPath = @"transform.scale";
scale.toValue = @(1.5);

// 時間
animationGroup.duration = 1;

// 將動畫添加到動畫組
animationGroup.animations = @[position, rotation, scale];

// 添加動畫組到圖層
[imageView.layer addAnimation:animationGroup forKey:nil];