UIView 同時移動、旋轉、放大的作法

在orderGear裡有個我很喜歡的動畫效果，就是如果點選左手邊的菜色相片，它就會移動到畫面的中央並放大、轉正。

點選前：

點選後：

這裡來示範一下怎麼用setAnimation來實作這樣的效果。

先在.h宣告

IBOutlet UIView *photoframeView_4;


因為這張看似拍立得的相片中包含了相片、框、菜名、按揵等好幾個物件，所以設定為UIView來包含所有物件, 而不是用UIImageView, 如果只有一張圖的時侯還是可以用UIImageView。

然後在.m實作一個IBAction，就是當按下這張相片時的動作。

-(IBAction) showEnlargePhotoframe:(id)sender{

   CGPoint photoframe_4CurrentPOS = photoframeView_4.center;

photoframe_4CurrentPOS.x = 142; //移動前的x座標

photoframe_4CurrentPOS.y = 573; //移動前的y座標

photoframeView_4.center = photoframe_4CurrentPOS;

float angle_4  = -14*(PI/100); //原來旋轉的角度

CGAffineTransform transformRotate_4 = CGAffineTransformMakeRotation(angle_4);

CGAffineTransform transform_4 = CGAffineTransformScale(transformRotate_4, 0.36, 0.36); //原來的大小（原本尺寸縮到36%的大小)

[photoframeView_4 setTransform:transform_4];

[UIView beginAnimations:nil context:nil];

[UIView setAnimationDuration:0.5f];

[UIView setAnimationCurve:UIViewAnimationCurveEaseOut];

photoframeView_4.hidden = NO;

enlargeButton_4.hidden = YES; //隱藏放大的按鍵

normalButton_4.hidden = NO; //顯示放大後的按鍵

photoframe_4CurrentPOS.x = 512; //移動後的x座標

photoframe_4CurrentPOS.y = 374; //移動後的y座標

photoframeView_4.center = photoframe_4CurrentPOS;

angle_4  = 0*(PI/100); //旋轉UIView成正的

transformRotate_4 = CGAffineTransformMakeRotation(angle_4);

transform_4 = CGAffineTransformScale(transformRotate_4, 1, 1); //放大回原本大小

[photoframeView_4 setTransform:transform_4];

[UIView commitAnimations]; //執行動畫

}

所以，與其說是點選後開始變型(transform), 不如說是讓原本又小又歪的圖在點選後回復成原本的角度和大小。