iOS動畫之大雪紛飛

1.結果展示

美麗的雪花,勾起了多少騷年美好的回憶。^_^
這裏寫圖片描述

2.製作思路

其實創作這樣一個大學紛飛的場景是十分簡單的,簡單到你看了教程之後想不會都不行。OK,下面國際慣例,講解一下思路吧。

1.創建一個數組用來保存大量的雪花

    _imagesArray = [[NSMutableArray alloc] init];
    for (int i = 0; i < 1000; ++ i) {
        UIImageView *imageView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"snow"]];
        float x = IMAGE_WIDTH;
        imageView.frame = CGRectMake(IMAGE_X, -30, x, x);
        imageView.alpha = IMAGE_ALPHA;
        [self.view addSubview:imageView];
        [_imagesArray addObject:imageView];
    }

2.使用時鐘(CADisplayLink)來控制下雪,爲什麼不使用NSTimer呢。其實是可以的,只是(CADisplayLink)刷幀更快一些。

    //創建時鐘,並且添加到主循環中
    CADisplayLink *link = [CADisplayLink displayLinkWithTarget:self selector:@selector(makeSnow)];
    [link addToRunLoop:[NSRunLoop mainRunLoop] forMode:NSDefaultRunLoopMode];

3.下雪,就是把數組當做隊列來使用。

  1. 每次從數組頭部取出一個雪花並且刪除其在數組中的佔位。
  2. 讓雪花飄落,通過UIView動畫完成frame,transform等改變。
  3. 當動畫完成之後,將取出的雪花再次放進數組的尾部
- (void)makeSnow
{
    if (_imagesArray.count > 0) {
        UIImageView *imageView = _imagesArray[0];
        [_imagesArray removeObjectAtIndex:0];
        [self snowFall:imageView];
    }
}

- (void)snowFall:(UIImageView *)imageView
{
    [UIView animateWithDuration:10 animations:^{
        imageView.frame = CGRectMake(imageView.frame.origin.x, Main_Screen_Height, imageView.frame.size.width, imageView.frame.size.height);
        imageView.transform = CGAffineTransformMakeScale(0.3, 0.3);
        imageView.transform = CGAffineTransformRotate(imageView.transform, M_PI);
    } completion:^(BOOL finished) {
        float x = IMAGE_WIDTH;
        imageView.frame = CGRectMake(IMAGE_X, -30, x, x);
        [_imagesArray addObject:imageView];
    }];
}

3.有代碼有真相

#define IMAGE_X                arc4random()%(int)Main_Screen_Width
#define IMAGE_ALPHA            ((float)(arc4random()%10))/10
#define IMAGE_WIDTH            arc4random()%20 + 10
#define PLUS_HEIGHT            Main_Screen_Height/25

#define Main_Screen_Height      [[UIScreen mainScreen] bounds].size.height
#define Main_Screen_Width       [[UIScreen mainScreen] bounds].size.width

#import "ViewController.h"

@interface ViewController ()
@property (nonatomic ,strong) NSMutableArray *imagesArray;
@property (nonatomic , strong) UIImageView *imageView;
@end

@implementation ViewController

- (void)loadView
{
    UIImageView *imageView = [[UIImageView alloc]initWithFrame:[UIScreen mainScreen].bounds];
    imageView.image = [UIImage imageNamed:@"backgound.jpg"];
    imageView.contentMode  = UIViewContentModeScaleAspectFill;
    self.view = imageView;

}

- (void)viewDidLoad
{
    [super viewDidLoad];

    _imagesArray = [[NSMutableArray alloc] init];
    for (int i = 0; i < 1000; ++ i) {
        UIImageView *imageView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"snow"]];
        float x = IMAGE_WIDTH;
        imageView.frame = CGRectMake(IMAGE_X, -30, x, x);
        imageView.alpha = IMAGE_ALPHA;
        [self.view addSubview:imageView];
        [_imagesArray addObject:imageView];
    }

    //創建時鐘,並且添加到主循環中
    CADisplayLink *link = [CADisplayLink displayLinkWithTarget:self selector:@selector(makeSnow)];
    [link addToRunLoop:[NSRunLoop mainRunLoop] forMode:NSDefaultRunLoopMode];
}


- (void)makeSnow
{
    if (_imagesArray.count > 0) {
        UIImageView *imageView = _imagesArray[0];
        [_imagesArray removeObjectAtIndex:0];
        [self snowFall:imageView];
    }
}

- (void)snowFall:(UIImageView *)imageView
{
    [UIView animateWithDuration:10 animations:^{
        imageView.frame = CGRectMake(imageView.frame.origin.x, Main_Screen_Height, imageView.frame.size.width, imageView.frame.size.height);
        imageView.transform = CGAffineTransformMakeScale(0.3, 0.3);
        imageView.transform = CGAffineTransformRotate(imageView.transform, M_PI);
    } completion:^(BOOL finished) {
        float x = IMAGE_WIDTH;
        imageView.frame = CGRectMake(IMAGE_X, -30, x, x);
        [_imagesArray addObject:imageView];
    }];
}

4.Demo也不能少

https://github.com/Esdeath/snow/tree/master/SnowFlyTwo

發佈了190 篇原創文章 · 獲贊 12 · 訪問量 24萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章