鋼鐵人的HUD實作

從我開始寫APP的第一天開始，我就夢想著有一天可以做出像是關鍵報告或是鋼鐵人那種充滿未來性、科技感的操作界面，但是說實在的，也不是這麼難，這裡就來示範一下怎麼做實作出這麼酷的UI。

首先，先要把這基本的HUD（抬頭顯示器？）畫出來，在這裡有教學網頁教怎麼用photoshop畫出類似的風格。我是沒照著那裡教的畫，直接看著上面這張電影裡的截圖畫了幾個圈示意一下。

雖然在那個教學網站裡，教你畫出這一堆圓圈後，他的工作就完成了，但是，對我們來說，不是只是要“看”起來像鋼鐵人的畫面，我們是要讓他“用”起來像鋼鐵人用的才酷。

所以，先把剛才畫的一堆圈圈拆成個別的一個一個的圈圈，我是拆成5個圈圈，分別存成5個PNG檔（如下圖）。分別命名為circle1Image到circle5Image。實作方式請看下列程式說明。

先在.h宣告如下：

//4個圈圈的UIImageView

    IBOutlet UIImageView *circle1Image;

    IBOutlet UIImageView *circle2Image;

    IBOutlet UIImageView *circle3Image;

    IBOutlet UIImageView *circle5Image;

//4個圈圈的CGAffineTransform

    CGAffineTransform circle1Transform;

    CGAffineTransform circle2Transform;

    CGAffineTransform circle3Transform;

    CGAffineTransform circle5Transform;

然後在.m實作

在initWithNibName裡先宣告一個NSTimer可以讓圈圈自已轉起來

//每0.03秒執行一次selfMoveCircle這個程序

timer =[NSTimer scheduledTimerWithTimeInterval:0.03f 

target:self

                              selector:@selector(selfMoveCircle)

      userInfo:nil

       repeats:YES];

//在這個selfMoveCircle裡只讓3個圈圈自已會一直轉，另外2個圈圈是要聽令於我們的指揮，當作操作控制的轉盤。

-(void)selfMoveCircle{

    circle5Transform = circle5Image.transform;

    circle3Transform = circle3Image.transform;

    circle2Transform = circle2Image.transform;
    //把3個圈轉動的速度設成不同，感覺比較不會這麼死板

    circle5Image.transform = CGAffineTransformRotate(circle5Transform, 0.02);

    circle3Image.transform = CGAffineTransformRotate(circle3Transform, 0.02);

    circle2Image.transform = CGAffineTransformRotate(circle2Transform, 0.04);

}

//當我們轉動轉盤的時侯，最外圍的圈circle1Image, 跟著我們轉動的方向反方向轉動。

- (void)controlCircleMove:(NSInteger)wheelCV{

    if (wheelCV >0) {

        circle1Transform = circle1Image.transform;

        circle1Image.transform = CGAffineTransformRotate(circle1Transform, -0.6);

    }else {

        circle1Transform = circle1Image.transform;

        circle1Image.transform = CGAffineTransformRotate(circle1Transform, 0.6);

    }

}

耶...怎麼沒宣告和實作到circle4Image呢？因為circle4Image是我們主要的操控盤，也就是我們手指怎麼轉，它就跟著怎麼轉，所以它是要另外再宣告在一個wheelView.h，並實作在wheelView.m負責控管我們手指的轉動方向，並把轉動的值傳回到這裡來告訴circle1Image要怎麼轉。但是實作轉輪又是一個大工程，另外再寫一篇怎麼實作好了。