今天做一個簡單的動畫的小程序!
程序截圖如下:
1 這個程序,當點擊屏幕左下方4個方向按鍵的時候,上面的圖片就會跟著自動上下左右移動。
2 當點擊屏幕右邊變大和變小按鍵時候,上面的圖片就會跟著變大和變小。
二 功能就說到這里,下面開始界面和代碼說明。
2.1 首先還是先創建項目和設計界面,當然還要把相對應的圖片導入項目images.xcassets下。截圖如下:
2.2 界面圖片和方向鍵,在這里我都是用Button做的,當然,用別的也可以。
2.3 界面上所以可以點擊的按鍵,我都做了高亮顯示,這個就要修改按鍵的State Config=Highlighted;然后在這里再設置變成高就顯示的背景圖片,同時還要設置屬性Type=Custom,這樣當你點擊按鍵的時候才會有高亮顯示。設置屬性如下圖:
2.4 這個截圖左邊界面上我點到了右按鍵,然后右邊是對應的屬性,這個截圖可以清楚的看到,對應屬性的設置,所有的按鍵設置都同樣。
2.5 在這里我們還要設置下4個方向鍵的tag屬性時,其實這個就相當給每個按鍵設置一個唯一的ID,在asp.net中,每個控件都會自動生成一個唯一的ID。
但IOS中不會自動生成,所以要自己在屬性中設置,這樣方便我們在后臺代碼中,可以只寫一個事件方法來控制4個Button按鍵,如下圖:
2.6 這樣在后臺代碼中我們就可以通過Tag的值來判斷是點擊的哪個按鍵值,來做處理了。
2.7 界面設計完成后,下面開始寫后臺代碼了,代碼如下:
//// ViewController.m// 動畫-1//// Created by 徐周 on 15-5-27.// Copyright (c) 2015年 ___FULLUSERNAME___. All rights reserved.//#import "ViewController.h"@interface ViewController ()//定義一個點擊事件,這個事件同事連線界面上4個上下左右按鍵//就是說界面上4個方向鍵的點擊事件都用這一個方法來實現-(IBAction)top:(UIButton *)btn;//定義變大事件,關連變大按鍵-(IBAction)big;//定義變小事件,關連變小按鍵-(IBAction)small;//定義圖片屬性,做來控制圖片屬性@PRoperty(weak,nonatomic) IBOutlet UIButton *head;@end@implementation ViewController//方向點擊事件,傳入當前點擊按鍵的UIButton的值,來判斷點擊的是哪個方向鍵。-(IBAction)top:(UIButton *)btn{ //找到界面上圖片的frame,因為frame屬性是不能直接設置的 //只能先賦值給CGRect來保存 CGRect tempFrame=self.head.frame; //設置圖片要移動的距離,這里設置成10,就是每點一次方向鍵,變化10個點 int btns=10; // 判斷當前點擊的按鍵的tag的值就可以知道當前點擊的是哪個方向鍵 //10上,20左,30右,40,下 //tempFrame.origin.y,這里就是指的當前圖片Y坐標,國為在IOS中界面就是用Y和X來指名坐標的。 //這樣我們找到了當前圖片Y和X坐標后就好辦了,我們設置Y坐標-10,那么圖片就會向界面的上面移動10點了 //同理,上下左右都一樣了。 switch (btn.tag) { case 10: tempFrame.origin.y-=btns; break; case 20: tempFrame.origin.x-=btns; break; case 30: tempFrame.origin.x+=btns; break; case 40: tempFrame.origin.y+=btns; default: break; } // 設置完了圖片的坐標后,我們再把CGRect的變量empFrame賦值給圖片。這樣,圖片在界面的位置變了。 self.head.frame=tempFrame;}//變大按鍵-(IBAction)big{ //和上面同理,只能先賦值給CGRect來保存 CGRect temFrame=self.head.frame; //因為這里是變大,所以變是設置size.width和size.height屬性了, //我想做開發都應該知道這兩個屬性的作用 temFrame.size.width+=20; temFrame.size.height+=20; //同時我們還要設置下圖片的坐標,因為如果Y和X坐標不變動,程序運動起來就會一直向下和右變大 //這是因為我們圖片的Y和X坐標一直沒有動過,所以圖片只能向下和右變動,所以為了看起來好像,要同時設置下,當前屬性的Y和X坐標 temFrame.origin.x-=10; temFrame.origin.y-=10; self.head.frame=temFrame;}//變小按鍵,代碼同上,不用說明了-(IBAction)small{ CGRect temFrome=self.head.frame; temFrome.size.width-=20; temFrome.size.height-=20; temFrome.origin.x+=10; temFrome.origin.y+=10; self.head.frame=temFrome;}@end
三 當這些都做完之后,運行程序,然后上下左右都可以移動,點擊放大和放小按鍵可以變大和變小。
但有個問題就是變大和變小按鍵只能變化一次,就沒反映了。這個其實跟代碼沒有關系,這個是因為IOS自帶一個屬性Use Auto Layout來控制不讓界面的控件屬性Widtht和heigth自動變化。這個屬性是自動勾上的。我們把勾去掉就行了。如下圖:
3.1 現在Use Auto Layout 這個屬性的勾已經去掉了,再次運行程序,變大變小就沒問題了。OK,學習IOS很多小問題要注意,一步步來。
新聞熱點
疑難解答