使用單張影像來製作 Flipbook 動畫效果

 

所謂 Flipbook 動畫效果，就是利用多張圖片快速的置換，使眼睛產生圖片會動的錯覺，這種效果在遊戲中很常使用。在這裡只需要有一張影像（Map），而這張影像必須包含所有的分解動作，透過 Quartz 2D 指令來選擇在要呈現的分解動作達到 Flipbook 動畫效果，程式碼如下。（UIView subclass）

在製作動畫之前，我們先還原動畫最基本的元素—單張影像，從製作單張得影像的上、下、左、右動作開始，因為動畫也只是在每個單張影像上用 Timer 做切換罷了。

首先新增一個 UIView subclass 並建立程式進入點，程式進入點在產生 UIView subclass 時並不會自動產生。

//UIView subclass程式進入點
- (id)initWithCoder:(NSCoder *)coder {
    if (self = [super initWithCoder:coder]) {
        image = [[UIImage imageNamed:@"demo.png"] CGImage];

        //方向的參數，就是Map的Y軸
        direction = 0;
    }

    return self;
}
將 Map 讀入 Cache 之後，就可以開始繪圖，程式碼如下。

- (void)drawRect:(CGRect)rect {

    //呼叫自行定義的繪圖函式
    [self drawBody];
}
- (void)drawBody {

    //建立一個Graphic context並把狀態儲存起來
    context = UIGraphicsGetCurrentContext();
    CGContextSaveGState(context);

    //重新設定context的座標狀態
    CGAffineTransform t = CGContextGetCTM(context);
    t = CGAffineTransformInvert(t);
    t = CGAffineTransformTranslate(t, 300, 400);
    t = CGAffineTransformScale(t, 10.0, 10.0);
    CGContextConcatCTM(context, t);

    //設定切割影像的位置和範圍大小
    clipRect = CGRectMake(0, 0, 23.7, 31.5);

    //開始繪圖
    CGContextBeginPath(context);

    //切割影像
    CGContextAddRect(context, clipRect);
    CGContextClip(context);

    //將Map繪出
    CGContextDrawImage(context, CGRectMake(0, -direction, 72, 128), image);

    //畫面更新並呈現
    [self setNeedsDisplay];
}


最後，只要再加上按鈕事件來控制 Direction 變數的數值，就可以改變 Y 軸的位置呈現出不同的方向，而 Timer 則是用來改變 X 軸的位置，呈現在不同方向之下的不同動作。