IOS開發(fā)筆記-基礎(chǔ)UI（4）按鈕的使用（transform屬性）和學(xué)習(xí)案例

2019-11-14 19:30:04

字體：大中小

供稿：網(wǎng)友

利用transform屬性可以修改控件的位移（位置）、縮放、旋轉(zhuǎn)。經(jīng)常用在動(dòng)畫里，比如旋轉(zhuǎn)角度，動(dòng)畫縮放，平移等

先學(xué)幾個(gè) xcode 開發(fā)的小技巧：

故事板的viewcontroll，可以直接拖拽復(fù)制，且不同項(xiàng)目里的圖片素材也可以相互拖拽復(fù)制使用，但是圖片的拖拽復(fù)制要按option 健進(jìn)行，否則就是剪切了。那么我們?cè)陂_發(fā)到類似的一些項(xiàng)目的時(shí)候，不用每次都重寫弄界面，那么可以直接拖拽拷貝故事板，圖片拖拽要按住 option 鍵同時(shí)拽到 images.xcassets 目錄下即可正常顯式，且拖拽到新的項(xiàng)目中的故事板，默認(rèn)是 autolayout 的，還要注意原來的連線！最好徹底退出模擬器和 xcode，再重新打開。

在開發(fā)中，如果需要對(duì)控件位置，大小，旋轉(zhuǎn)進(jìn)行改變，最好使用 transform，可以省去很大的麻煩，比如在遇到 autolayout 的時(shí)候，frame 就不行，但是 transform 可以改變，且 transform屬性修改控件的位置，大小，旋轉(zhuǎn)，不需要計(jì)算形變之后的結(jié)果，它是一個(gè)相對(duì)自己的累加過程，不需要知道初試的位置和結(jié)束的位置，簡(jiǎn)化了很多的計(jì)算量。

遇到新的屬性和方法，學(xué)會(huì)查看頭文件

創(chuàng)建一個(gè)transform屬性

CGAffineTransform CGAffineTransformMakeTranslation(CGFloat tx,  CGFloat ty) ;

AffineTransform類表示 2D 仿射變換，它執(zhí)行從 2D 坐標(biāo)到其他 2D 坐標(biāo)的線性映射

MakeTranslation（名詞的 translation）作用是：基于對(duì)象的初始的位置做的形變！不是累加的形變。如：

- (IBAction)move:(UIButton *)button{    self.headImage.transform = CGAffineTransformMakeTranslation(0, -100);}


點(diǎn)擊方向鍵，只向上移動(dòng)100之后不再變化，點(diǎn)擊多次，只是第一次的時(shí)候y變化-100。
如圖所示

CGAffineTransform CGAffineTransformMakeScale(CGFloat sx, CGFloat sy);

形變，縮放功能，sx，和 sy 分別管理的橫向和豎向的縮放，也就是拉長(zhǎng)，還是拉寬的管理，且1.0不變化，小玉1.0小，大于1.0變大。

CGAffineTransform CGAffineTransformMakeRotation(CGFloat angle)

名詞的 rotation，就要家 make，做變化，蘋果和體貼的設(shè)計(jì)。同理，這樣的設(shè)置，只變化一次。累計(jì)變化需要三個(gè)參數(shù)的動(dòng)詞方法。

(注意：angle是弧度制，也就是π，并不是角度制，且類似縮放，弧度是正數(shù)是順時(shí)針旋轉(zhuǎn)，負(fù)數(shù)是逆時(shí)針旋轉(zhuǎn))

在某個(gè)transform的基礎(chǔ)上進(jìn)行疊加（可以對(duì)上述方法進(jìn)行改變，變成累加的）

CGAffineTransform CGAffineTransformTranslate(CGAffineTransform t, CGFloat tx, CGFloat ty);

動(dòng)詞的 translate，不用帶 make，多一個(gè)參數(shù)，下面的也是如此。

作用是在某個(gè) transform參數(shù)的基礎(chǔ)之上做的形變，實(shí)際效果就是一個(gè)位移的累加過程。

CGAffineTransform CGAffineTransformScale(CGAffineTransform t, CGFloat sx, CGFloat sy);

此時(shí)也多了第一個(gè) 參數(shù)，少了 make，直接做動(dòng)詞。那么就是可以一直變化，不再是相對(duì)初試對(duì)象位置的改變。

CGAffineTransform CGAffineTransformRotate(CGAffineTransform t, CGFloat angle);

同理，rotate 是動(dòng)詞，去掉 make，那么后面肯定多了一個(gè)參數(shù)，相對(duì)某個(gè) transform 參數(shù)的基礎(chǔ)來變。

清空之前設(shè)置的transform屬性

view.transform = CGAffineTransformIdentity;

熟悉蘋果開發(fā)的規(guī)律！以及一些命名原則和方法的參數(shù)設(shè)置的習(xí)慣。

- (IBAction)zoom:(UIButton *)button {    //加上首尾式動(dòng)畫    [UIView beginAnimations:nil context:nil];    [UIView setAnimationDuration:2.0];    //縮小按鈕    if (0 == button.tag) {        self.headImage.transform = CGAffineTransformScale(self.headImage.transform, 0.5, 0.5);    }    else    {        //放大按鈕        self.headImage.transform = CGAffineTransformScale(self.headImage.transform, 1.5, 1.5);    }        [UIView commitAnimations];}- (IBAction)rotate:(UIButton *)button {    [UIView beginAnimations:nil context:nil];    [UIView setAnimationDuration:2.0];    //順時(shí)針180度，右旋轉(zhuǎn)按鈕    if (1 == button.tag) {       self.headImage.transform = CGAffineTransformRotate(self.headImage.transform, M_PI_2);    }    else    {        //逆時(shí)針180度，左旋轉(zhuǎn)按鈕        self.headImage.transform = CGAffineTransformRotate(self.headImage.transform, -M_PI_2);    }        [UIView commitAnimations];}