UIView動畫UIView Animation總結
阿新 • • 發佈：2018-11-05
今天總結一下UIView動畫就是 UiView動畫是基於高層API封裝進行封裝的,對UIView的屬性進行修改時候所產生的動畫.
基本動畫
下面兩種方法是最常用的兩種.
+ (void)animateWithDuration:(NSTimeInterval)duration animations:(void (^)(void))animations
animations 修改View屬性的Block 下面是支援修改的屬性
@property frame @property bounds @property center @property transform @property alpha @property backgroundColor @property contentStretch
+ (void)animateWithDuration:(NSTimeInterval)duration animations:(void (^)(void))animations completion:(void (^ __nullable)(BOOL finished))completion
completion 動畫完成block
BOOL finished 表示動畫是否完成
繼續
+ (void)animateWithDuration:(NSTimeInterval)duration delay:(NSTimeInterval)delay options:(UIViewAnimationOptions)options animations:(void (^)(void))animations completion:(void (^ __nullable)(BOOL finished))completion
delay 延遲執行時間
options 動畫效果列舉 ,下面是全部列舉的說明
動畫效果相關
UIViewAnimationOptionLayoutSubviews //提交動畫的時候佈局子控制元件，表示子控制元件將和父控制元件一同動畫。 UIViewAnimationOptionAllowUserInteraction //動畫時允許使用者交流，比如觸控 UIViewAnimationOptionBeginFromCurrentState //從當前狀態開始動畫 UIViewAnimationOptionRepeat //動畫無限重複 UIViewAnimationOptionAutoreverse //執行動畫迴路,前提是設定動畫無限重複 UIViewAnimationOptionOverrideInheritedDuration //忽略外層動畫巢狀的執行時間 UIViewAnimationOptionOverrideInheritedCurve //忽略外層動畫巢狀的時間變化曲線 UIViewAnimationOptionAllowAnimatedContent //通過改變屬性和重繪實現動畫效果，如果key沒有提交動畫將使用快照 UIViewAnimationOptionShowHideTransitionViews //用顯隱的方式替代新增移除圖層的動畫效果 UIViewAnimationOptionOverrideInheritedOptions //忽略巢狀繼承的選項
時間函式曲線相關
UIViewAnimationOptionCurveEaseInOut //時間曲線函式，由慢到快 UIViewAnimationOptionCurveEaseIn //時間曲線函式，由慢到特別快 UIViewAnimationOptionCurveEaseOut //時間曲線函式，由快到慢 UIViewAnimationOptionCurveLinear //時間曲線函式，勻速
轉場動畫相關的
UIViewAnimationOptionTransitionNone //無轉場動畫 UIViewAnimationOptionTransitionFlipFromLeft //轉場從左翻轉 UIViewAnimationOptionTransitionFlipFromRight //轉場從右翻轉 UIViewAnimationOptionTransitionCurlUp //上卷轉場 UIViewAnimationOptionTransitionCurlDown //下卷轉場 UIViewAnimationOptionTransitionCrossDissolve //轉場交叉消失 UIViewAnimationOptionTransitionFlipFromTop //轉場從上翻轉 UIViewAnimationOptionTransitionFlipFromBottom //轉場從下翻轉
彈簧動畫
+ (void)animateWithDuration:(NSTimeInterval)duration delay:(NSTimeInterval)delay usingSpringWithDamping:(CGFloat)dampingRatio initialSpringVelocity:(CGFloat)velocity options:(UIViewAnimationOptions)options animations:(void (^)(void))animations completion:(void (^ __nullable)(BOOL finished))completion
dampingRatio 彈簧的阻尼 如果為1動畫則平穩減速動畫沒有振盪。 這裡值為 0~1
velocity 彈簧的速率。數值越小，動力越小，彈簧的拉伸幅度就越小。反之相反。比如：總共的動畫執行距離是200 pt，你希望每秒 100pt 時，值為 0.5；
例子
[UIView animateWithDuration:2
delay:2
usingSpringWithDamping:.5
initialSpringVelocity:.5
options:UIViewAnimationOptionRepeat
animations:^{
view.center = self.view.center;
} completion:^(BOOL finished) {
}];
過渡動畫
+ (void)transitionWithView:(UIView *)view duration:(NSTimeInterval)duration options:(UIViewAnimationOptions)options animations:(void (^ __nullable)(void))animations completion:(void (^ __nullable)(BOOL finished))completion
view 參與轉換的檢視
例子
UIView *view = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 100, 100)];
[self.view addSubview:view];
view.center = self.view.center;
view.backgroundColor = [UIColor redColor];
UIView *view_1 = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 50, 50)];
view_1.backgroundColor = [UIColor yellowColor];
[UIView transitionWithView:view
duration:3
options:UIViewAnimationOptionTransitionCurlUp
animations:^{
[view addSubview:view_1];
} completion:^(BOOL finished) {
}];
繼續
+ (void)transitionFromView:(UIView *)fromView toView:(UIView *)toView duration:(NSTimeInterval)duration options:(UIViewAnimationOptions)options completion:(void (^ __nullable)(BOOL finished))completion
fromView 一開始的檢視
toView 轉換後的檢視
例子
UIView *baseView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 100, 100)];
[self.view addSubview:baseView];
baseView.center = self.view.center;
UIView *view = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 100, 100)];
[baseView addSubview:view];
view.backgroundColor = [UIColor redColor];
UIView *view_1 = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 100, 100)];
view_1.backgroundColor = [UIColor yellowColor];
[UIView transitionFromView:view
toView:view_1
duration:2
options:UIViewAnimationOptionTransitionFlipFromLeft completion:^(BOOL finished) {
}];
關鍵幀動畫
+ (void)animateKeyframesWithDuration:(NSTimeInterval)duration delay:(NSTimeInterval)delay options:(UIViewKeyframeAnimationOptions)options animations:(void (^)(void))animations completion:(void (^ __nullable)(BOOL finished))completion + (void)addKeyframeWithRelativeStartTime:(double)frameStartTime relativeDuration:(double)frameDuration animations:(void (^)(void))animations
duration 總持續時間
UIViewKeyframeAnimationOptions options 列舉 下面說明
frameStartTime 相對開始時間
frameDuration 相對持續時間
例子
UIView *view = [[UIView alloc] initWithFrame:CGRectMake(20, 20, 50, 50)];
view.backgroundColor = [UIColor orangeColor];
[self.view addSubview:view];
[UIView animateKeyframesWithDuration:3 delay:3 options:UIViewKeyframeAnimationOptionRepeat animations:^{
[UIView addKeyframeWithRelativeStartTime:0 relativeDuration:.3 animations:^{
view.frame = CGRectMake(20, 100, 100, 100);
}];
[UIView addKeyframeWithRelativeStartTime:.3 relativeDuration:.6 animations:^{
view.frame = CGRectMake(60, 100, 80, 80);
}];
[UIView addKeyframeWithRelativeStartTime:.6 relativeDuration:1 animations:^{
view.frame = CGRectMake(20, 20, 50, 50);
}];
} completion:^(BOOL finished) {
}];
UIViewKeyframeAnimationOptions
UIViewKeyframeAnimationOptionLayoutSubviews //提交動畫的時候佈局子控制元件，表示子控制元件將和父控制元件一同動畫。 UIViewKeyframeAnimationOptionAllowUserInteraction //動畫時允許使用者交流，比如觸控 UIViewKeyframeAnimationOptionBeginFromCurrentState //從當前狀態開始動畫 UIViewKeyframeAnimationOptionRepeat //動畫無限重複 UIViewKeyframeAnimationOptionAutoreverse //執行動畫迴路,前提是設定動畫無限重複 UIViewKeyframeAnimationOptionOverrideInheritedDuration //忽略外層動畫巢狀的執行時間 UIViewKeyframeAnimationOptionOverrideInheritedOptions //忽略巢狀繼承的選項
關鍵幀動畫獨有
UIViewKeyframeAnimationOptionCalculationModeLinear //選擇使用一個簡單的線性插值計算的時候關鍵幀之間的值。 UIViewKeyframeAnimationOptionCalculationModeDiscrete //選擇不插入關鍵幀之間的值,而是直接跳到每個新的關鍵幀的值。 UIViewKeyframeAnimationOptionCalculationModePaced //選擇計算中間幀數值演算法使用一個簡單的節奏。這個選項的結果在一個均勻的動畫。 UIViewKeyframeAnimationOptionCalculationModeCubic //選擇計算中間幀使用預設卡特莫爾羅花鍵,通過關鍵幀的值。你不能調整該演算法的引數。 這個動畫好像會更圓滑一些.. UIViewKeyframeAnimationOptionCalculationModeCubicPaced //選擇計算中間幀使用立方計劃而忽略的時間屬性動畫。相反,時間引數計算隱式地給動畫一個恆定的速度。
剩下兩個操作
+ (void)performSystemAnimation:(UISystemAnimation)animation onViews:(NSArray *)views options:(UIViewAnimationOptions)options animations:(void (^ __nullable)(void))parallelAnimations completion:(void (^ __nullable)(BOOL finished))completion + (void)performWithoutAnimation:(void (NS_NOESCAPE ^)(void))actionsWithoutAnimation
1.刪除檢視上的子檢視 animation這個列舉只有一個刪除值...
views操作的view 這會讓那個檢視變模糊、收縮和褪色, 之後再給它傳送 removeFromSuperview 方法。
2.在動畫block中不執行動畫的程式碼.
例子
UIView *view = [[UIView alloc] initWithFrame:CGRectMake(20, 20, 50, 50)];
view.backgroundColor = [UIColor orangeColor];
UIView *view_1 = [[UIView alloc] initWithFrame:CGRectMake(10, 10, 20, 20)];
[view addSubview:view_1];
view_1.backgroundColor = [UIColor redColor];
[self.view addSubview:view];
[UIView animateKeyframesWithDuration:3 delay:3 options:UIViewKeyframeAnimationOptionRepeat|UIViewKeyframeAnimationOptionAutoreverse animations:^{
view.frame = CGRectMake(100, 100, 50, 50);
[UIView performWithoutAnimation:^{
view.backgroundColor = [UIColor blueColor];
}];
} completion:^(BOOL finished) {
}];
[UIView performSystemAnimation:UISystemAnimationDelete
onViews:@[view_1]
options:0
animations:^{
view_1.alpha = 0;
} completion:^(BOOL finished) {
}];
