2012年2月23日 星期四

鋼鐵人的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要怎麼轉。但是實作轉輪又是一個大工程,另外再寫一篇怎麼實作好了。

3 則留言:

  1. 哇!太棒了!終於找到了!
    我也是夢想要做這種UI,請問我是作網頁程式的,我該怎麼做?用photoshop畫完之後,要怎麼控制它?用flash?javascript?還是應該用其他的工具,如silverlight?有沒有範例可以看?
    哇!請您一定要指點我,我找好久了,不得其門而入,就算知道要用photoshop、flash寫,找得到的資料也都是沒有辦法直接從中找到適用的資料。
    拜託您了

    回覆刪除
    回覆
    1. 已回覆到您信箱,如有任何疑問,歡迎討論

      刪除
  2. 請問他在PS裡面做要怎麼做?有範例可以看嗎?

    回覆刪除