iOS開發學習之簡單動畫

UIActivityIndicatorViewUIImageView的序列幀動畫UIView動畫時鐘動畫一、UIActivityIndicatorView 1⃣️屬性－isAnimating屬性判斷是否正在動畫2⃣️第三方庫SVProgressHUD[SVProgressHUD dismiss][SVProgressHUD showWithStatus:@“網路載入中” maskType:SVProgressHUDMashTypeGradient]；(後面的參數是否遮擋，可以不用)3⃣️NSTimer[NSTimer scheduledTimerWithTimeInterval:1 target:2 selector:3 userInfo:4 repeats:5];1.時間間隔 2.self 3.觸發時調用的方法 4.使用者資訊 5.是否重複[timer invalidate];複製代碼- (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event{    // 使用了SVProgress的maskType屬性，當前視圖無法接受觸摸事件    // 需要想辦法關閉    // 使用NSTimer    if ([_indicatorView isAnimating]) {        [SVProgressHUD dismiss];        [_indicatorView stopAnimating];    } else {        [SVProgressHUD showWithStatus:@"等會~~~" maskType:SVProgressHUDMaskTypeGradient];                // 指標一啟動，就無法互動了，要把時鐘放在這裡        [_indicatorView startAnimating];                [NSTimer scheduledTimerWithTimeInterval:2.0 target:self selector:@selector(updateTimer:) userInfo:nil repeats:NO];    }} // NSTimer調用方法的參數，只能是NSTimer，使用參數，在當前樣本中，就不需要使用成員變數了- (void)updateTimer:(NSTimer *)timer{    [SVProgressHUD dismiss];    [_indicatorView stopAnimating];        // 關閉時鐘    [timer invalidate];}複製代碼二、UIImageView的序列幀動畫1⃣️屬性說明－animationImages：要顯示的一組圖盤－animationDuration：顯示所有圖片需要的時間(如果中間由修改速度，需要先停止、設定、開始)－animationRepeatCount：動畫的執行次數2⃣️相關方法－-(void)startAnimating;－-(void)stopAnimating－-(void)isAnimating; 1.趙雲動畫複製代碼// 建立趙雲的序列幀動畫- (void)createZhaoyunImage{    // Do any additional setup after loading the view, typically from a nib.    // 設定ImageView的序列幀動畫    // 1. 需要一個數組    NSMutableArray *images = [NSMutableArray array];    for (int i = 1; i < 11; i++) {        NSString *fileName = [NSString stringWithFormat:@"/images/zy/%d.png", i];        UIImage *image = [UIImage imageNamed:fileName];        [images addObject:image];    }        [_zhaoyunImage setImage:images[0]];    // 設定映像數組    [_zhaoyunImage setAnimationImages:images];    // 設定10張圖片播放的時間長度    [_zhaoyunImage setAnimationDuration:1.0f];    // 開始動畫    [_zhaoyunImage startAnimating];} - (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event{    if ([_zhaoyunImage isAnimating]) {        // 序列幀動畫每次停止的時候，都會顯示設定的映像，而不是當前播放至的映像        [_zhaoyunImage stopAnimating];    } else {        [_zhaoyunImage startAnimating];    }}複製代碼2.燕子動畫 複製代碼#pragma mark - 拖拽燕子- (void)dragBird:(UIPanGestureRecognizer *)sender{    // 先需要知道手指的位置    CGPoint location = [sender locationInView:self.view];        // 手勢狀態改是UIGestureRecognizerStateChanged的時候，手指還沒有離開螢幕    // 這個時候，可以修改鳥的位置，同時讓鳥撲騰    if (sender.state == UIGestureRecognizerStateChanged) {        // 注意：如果要修改播放中的序列幀動畫        // 1. 需要先停止動畫        [_birdImage stopAnimating];        // 2. 修改動畫頻率        [_birdImage setAnimationDuration:0.2f];        // 3. 重新啟動動畫        [_birdImage startAnimating];                // 修改燕子的動畫頻率        // 設定燕子的位置        [_birdImage setCenter:location];    } else if (sender.state == UIGestureRecognizerStateEnded) {        // 恢複燕子慢悠悠        // 1. 需要先停止動畫        [_birdImage stopAnimating];        // 2. 修改動畫頻率        [_birdImage setAnimationDuration:1.2f];        // 3. 重新啟動動畫        [_birdImage startAnimating];     }} // 設定燕子的序列幀動畫，並設定燕子的拖拽手勢監聽- (void)createBirdImage{    // 設定燕子的序列幀動畫    NSArray *images = @[[UIImage imageNamed:@"/images/素材/燕子1.png"],                        [UIImage imageNamed:@"/images/素材/燕子2.png"]];    [_birdImage setAnimationImages:images];    [_birdImage setAnimationDuration:1.2f];    [_birdImage startAnimating];        // 定義手勢    UIPanGestureRecognizer *pan = [[UIPanGestureRecognizer alloc]initWithTarget:self action:@selector(dragBird:)];    [_birdImage addGestureRecognizer:pan];        // 設定燕子圖片允許使用者互動    [_birdImage setUserInteractionEnabled:YES];}複製代碼三、UIView動畫四、時鐘動畫（CADisplayLink）－是一種以螢幕重新整理螢幕觸發的時鐘機制，每秒鐘執行大約60次－倒入QuartzCore架構1⃣️使用方法－定義CADisplayLink並制定觸發調用方法－將顯示連結添加到主運行迴圈隊列2⃣️兩種判斷時間間隔的方法－以成員變數的方式判斷－以全域變數的方式判斷複製代碼@interface ViewController (){    // 遊戲時鐘    CADisplayLink *_gameTimer;        // 時鐘觸發的初始時間    CFTimeInterval _startTime;}@end@implementation ViewController #pragma mark - 使用指定時間處理CADisplayLink觸發時間的方法（1）- (void)updateTimer:(CADisplayLink *)sender{    // 如果_startTime=0，說明是第一次觸發時鐘，需要記錄時鐘的時鐘戳記    if (_startTime == 0) {        _startTime = sender.timestamp;    }        // 時鐘觸發的時間差值    CFTimeInterval deltaTime = sender.timestamp - _startTime;        if (deltaTime > 1.0) {        NSLog(@"時鐘觸發了 %f", sender.timestamp);                // 更新_startTime的數值，記錄本次執行任務的時間        _startTime = sender.timestamp;    }} #pragma mark - 使用指定時間處理CADisplayLink觸發時間的方法（2）- (void)step{    // 假定每隔一秒觸發一次方法    if (steps % (10 * 60 * 60) == 1) {        NSLog(@"時鐘觸發了！ %ld", steps);    }        steps++;} - (void)viewDidLoad{    [super viewDidLoad];    // Do any additional setup after loading the view, typically from a nib.        // 首先將啟動的時間點設定為0    _startTime = 0.0f;        // 將螢幕重新整理總次數設定為0    steps = 0;        // 初始化遊戲時鐘    _gameTimer = [CADisplayLink displayLinkWithTarget:self selector:@selector(step)];    // 初始化時鐘之後，有一個必須要做的，就是把遊戲時鐘，添加到主運行迴圈    [_gameTimer addToRunLoop:[NSRunLoop mainRunLoop] forMode:NSDefaultRunLoopMode];}複製代碼3⃣️使用步驟方法1:－初始化一個遊戲時鐘，並且加入主隊列中－自己制定時間間隔，去執行操作1.需要一個成員變數，記錄時鐘起始的“時間點”：CFTimeInterval _startTime;2.導出成員變數去與時鐘觸發時的時間差，如果大於制定的時間差，再去執行操作方法2:－定義一個全域的每秒中執行的次數－如果執行了這個次數，就執行要執行的操作 複製代碼steps = 0;    // 初始化雪花映像    _snowImage = [UIImage imageNamed:@"/images/素材/雪花"];        // 初始化時鐘    _gameTimer = [CADisplayLink displayLinkWithTarget:self selector:@selector(step)];    [_gameTimer addToRunLoop:[NSRunLoop mainRunLoop] forMode:NSDefaultRunLoopMode];複製代碼複製代碼#pragma mark - 時鐘處理方法- (void)step{    // 假設每秒鐘繪製6個雪花    if (steps % 10 == 0) {        // 繪製雪花        UIImageView *imageView = [[UIImageView alloc]initWithImage:_snowImage];                // 指定雪花出現的位置        CGPoint startPoint = CGPointMake(arc4random() % 320, -30.0);        // 指定雪花結束的位置        CGPoint endPoint = CGPointMake(arc4random() % 320, 490);        /**         新問題         1. 雪花太大         2. 雪花太亮，需要改一下透明度         3. 如果雪花會轉就更好了         */        CGFloat r = arc4random() % 5 + 10;        [imageView setFrame:CGRectMake(0, 0, r, r)];                // 設定起始點        [imageView setCenter:startPoint];                // 把雪花映像添加到視圖        [self.view addSubview:imageView];                [UIView animateWithDuration:6.0f delay:0.0f options:UIViewAnimationOptionCurveEaseIn animations:^{            [imageView setCenter:endPoint];            [imageView setAlpha:0.2f];            [imageView setTransform:CGAffineTransformMakeRotation(M_PI)];        } completion:^(BOOL finished) {            // 從父視圖刪除，這個千萬不要忘了            [imageView removeFromSuperview];        }];    }    }