因為項目需求,需要如下這樣一個簡單的動畫效果:

---

####單個控件 這個動畫效果,如果對控件使用UIView的block動畫,設置控件的Frame值,是可以實現的.

比如下面這個效果:

我們可以代碼來簡單實現上面的效果:

-?(void)viewDidLoad?{
????[super?viewDidLoad];
????
????
????self.btn?=?[[UIButton?alloc]?initWithFrame:CGRectMake(100,?100,?200,?200)];
????[self.btn?setImage:[UIImage?imageNamed:@"1"]?forState:UIControlStateNormal];
????[self.view?addSubview:self.btn];
????
}

-?(void)touchesBegan:(NSSet<UITouch?*>?*)touches?withEvent:(UIEvent?*)event
{
????[UIView?animateWithDuration:1.0?animations:^{
????????self.btn.frame?=?CGRectMake(100,?300,?200,?0);
????}];
}
復制代碼

---

####如果是多個控件呢? 我們比葫蘆畫瓢,把btn放到一個View當中,我們再對View使用一個UIView的block動畫. 首先看下代碼:

-?(void)viewDidLoad?{
????[super?viewDidLoad];
????
????self.outView?=?[[UIView?alloc]?initWithFrame:CGRectMake(0,?0,?[UIScreen?mainScreen].bounds.size.width,?[UIScreen?mainScreen].bounds.size.height-44)];
????self.outView.backgroundColor?=?[UIColor?redColor];
????
????self.btn?=?[[UIButton?alloc]?initWithFrame:CGRectMake(100,?100,?200,?200)];
????[self.btn?setImage:[UIImage?imageNamed:@"1"]?forState:UIControlStateNormal];
????
????[self.outView?addSubview:self.btn];
????[self.view?addSubview:self.outView];
????
}

-?(void)touchesBegan:(NSSet<UITouch?*>?*)touches?withEvent:(UIEvent?*)event
{
????[UIView?animateWithDuration:1.0?animations:^{
????????self.outView.frame?=?CGRectMake(0,?[UIScreen?mainScreen].bounds.size.height-44,?[UIScreen?mainScreen].bounds.size.width,?0);
????}];
}
復制代碼

然后我們看下效果:

紅色的View發生了形變,但是里面的控件并沒有跟著縮放. 看來這個方案不行. 我想,應該可以用CGAffineTransform來進行一個動畫縮放. 然后把上面 self.outView.frame = CGRectMake(0, [UIScreen mainScreen].bounds.size.height-44, [UIScreen mainScreen].bounds.size.width, 0); 替換成 self.outView.layer.affineTransform = CGAffineTransformScale(self.outView.layer.affineTransform, 1.0, 0.001);(這里的sy如果為0的話,會直接消失.)然后動畫效果是下面這樣的: 很明顯不符合我們的要求,我想要控件的底部不動,從上面開始進行壓縮下來.

---

####anchorPoint, position, CGAffineTransform 是的,通過這三個東西,來實現,首先我們上代碼和實現圖,然后再進行分析.

-?(void)viewDidLoad?{
????[super?viewDidLoad];
????
????self.outView?=?[[UIView?alloc]?initWithFrame:CGRectMake(0,?0,?[UIScreen?mainScreen].bounds.size.width,?[UIScreen?mainScreen].bounds.size.height-44)];
????self.outView.backgroundColor?=?[UIColor?redColor];
????
????self.btn?=?[[UIButton?alloc]?initWithFrame:CGRectMake(100,?100,?200,?200)];
????[self.btn?setImage:[UIImage?imageNamed:@"1"]?forState:UIControlStateNormal];
????
????[self.outView?addSubview:self.btn];
????[self.view?addSubview:self.outView];
????
}

-?(void)touchesBegan:(NSSet<UITouch?*>?*)touches?withEvent:(UIEvent?*)event
{
????//注意這里不能使用self.outView.frame因為Frame會隨著控件的變化而變化.
????//這樣就導致了layer的position的位置不準確了.
????CGFloat?positionX?=?0.5*self.outView.bounds.size.width;
????CGFloat?positionY?=?1.0*self.outView.bounds.size.height;
????self.outView.layer.anchorPoint?=?CGPointMake(0.5,?1);
????self.outView.layer.position?=?CGPointMake(positionX,?positionY);
????
????[UIView?animateWithDuration:1.0?animations:^{
????????self.outView.layer.affineTransform?=?CGAffineTransformScale(self.outView.layer.affineTransform,?1,?0.001);
????}];
}
復制代碼

效果:

這下就完美了,紅色的View和它里面的子控件一起進行了縮放. 關鍵點就那兩行代碼,設置了 outView 的anchor和position. 關于anchor和position的文章,網上有很多介紹的.我這里就不再進行贅述. position的x = view.bounds.size.width * anchorPoint.x; x = view.bounds.size.height * anchorPoint.y; 當你改變anchorPoint的值的時候,要確保position的值也進行了相應的改變,否則會產生View的位置不正確.

轉載于:https://juejin.im/post/5a376c5451882560b6526ac6

總結

以上是生活随笔為你收集整理的iOS压缩动画 CGAffineTransform的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。