UIView Animation
簡單動畫
對于 UIView 上簡單的動畫,iOS 提供了很方便的函數:
+ animateWithDuration:animations:
第一個參數是動畫的持續(xù)時間毅人,第二個參數是一個 block勺馆,在 animations block 中對 UIView 的屬性進行調整,設置 UIView 動畫結束后最終的效果乏梁,iOS 就會自動補充中間幀芝囤,形成動畫似炎。
可以更改的屬性有:
- frame
- bounds
- center
- transform
- alpha
- backgroundColor
- contentStretch
這些屬性大都是 View 的基本屬性,下面是一個例子悯姊,這個例子中的動畫會同時改變 View
的 frame
羡藐,backgroundColor
和 alpha
:
[UIView animateWithDuration:2.0 animations:^{
myView.frame = CGRectMake(50, 200, 200, 200);
myView.backgroundColor = [UIColor blueColor];
myView.alpha = 0.7;
}];
其中有一個比較特殊的 transform 屬性,它的類型是 CGAffineTransform悯许,即 2D 仿射變換仆嗦,這是個數學中的概念,用一個三維矩陣來表述 2D 圖形的矢量變換岸晦。用 transform 屬性對 View 進行:
- 旋轉
- 縮放
- 其他自定義 2D 變換
iOS 提供了下面的函數可以創(chuàng)建簡單的 2D 變換:
- CGAffineTransformMakeScale
- CGAffineTransformMakeRotation
- CGAffineTransformMakeTranslation
例如下面的代碼會將 View 縮小至原來的 1/4 大信菲 :
[UIView animateWithDuration:2.0 animations:^{
myView.transform = CGAffineTransformMakeScale(0.5, 0.5);
}];
調節(jié)參數
完整版的 animate 函數其實是這樣的:
+ animateWithDuration:delay:options:animations:completion:
可以通過 delay
參數調節(jié)讓動畫延遲產生,同時還一個 options
選項可以調節(jié)動畫進行的方式启上⌒纤恚可用的 options
可分為兩類:
控制過程
例如 UIViewAnimationOptionRepeat
可以讓動畫反復進行, UIViewAnimationOptionAllowUserInteraction
可以讓允許用戶對動畫進行過程中同 View 進行交互(默認是不允許的)
控制速度
動畫的進行速度可以用速度曲線來表示冈在,提供的選項例如:
UIViewAnimationOptionCurveEaseIn
是先慢后快倒慧,UIViewAnimationOptionCurveEaseOut
是先快后慢。
不同的選項直接可以通過“與”操作進行合并包券,同時使用纫谅,例如:
UIViewAnimationOptionRepeat | UIViewAnimationOptionAllowUserInteraction
關鍵幀動畫
上面介紹的動畫中,我們只能控制開始和結束時的效果溅固,然后由系統(tǒng)補全中間的過程付秕,有些時候我們需要自己設定若干關鍵幀,實現更復雜的動畫效果侍郭,這時候就需要關鍵幀動畫的支持了询吴。下面是一個示例:
[UIView animateKeyframesWithDuration:2.0 delay:0.0 options:UIViewKeyframeAnimationOptionRepeat | UIViewKeyframeAnimationOptionAutoreverse animations:^{
[UIView addKeyframeWithRelativeStartTime:0.0 relativeDuration:0.5 animations:^{
self.myView.frame = CGRectMake(10, 50, 100, 100);
}];
[UIView addKeyframeWithRelativeStartTime: 0.5 relativeDuration:0.3 animations:^{
self.myView.frame = CGRectMake(20, 100, 100, 100);
}];
[UIView addKeyframeWithRelativeStartTime:0.8 relativeDuration:0.2 animations:^{
self.myView.transform = CGAffineTransformMakeScale(0.5, 0.5);
}];
} completion:nil];
這個例子添加了三個關鍵幀,在外面的 animateKeyframesWithDuration 中我們設置了持續(xù)時間為 2.0 秒亮元,這是真實意義上的時間猛计,里面的 startTime 和 relativeDuration 都是相對時間。以第一個為例爆捞,startTime 為 0.0奉瘤,relativeTime 為 0.5,這個動畫會直接開始煮甥,持續(xù)時間為 2.0 X 0.5 = 1.0 秒盗温,下面第二個的開始時間是 0.5,正好承接上一個結束成肘,第三個同理肌访,這樣三個動畫就變成連續(xù)的動畫了。
View 的轉換
iOS 還提供了兩個函數艇劫,用于進行兩個 View 之間通過動畫換場:
+ transitionWithView:duration:options:animations:completion:
+ transitionFromView:toView:duration:options:completion:
需要注意的是吼驶,換場動畫會在這兩個 View 共同的父 View 上進行,在寫動畫之前店煞,先要設計好 View 的繼承結構蟹演。
同樣,View 之間的轉換也有很多選項可選顷蟀,例如 UIViewAnimationOptionTransitionFlipFromLeft
從左邊翻轉酒请,UIViewAnimationOptionTransitionCrossDissolve
漸變等等。
參考:https://zhuanlan.zhihu.com/p/20031427?columnSlug=cheerfox#!