UIView動畫UIView Animation總結 原文地址
基本動畫
最常用的幾種方式
//duration動畫持續時間, animations想要完成動畫block, UIView動畫完成時的最終狀態
+ (void)animateWithDuration:(NSTimeInterval)duration
animations:(void (^)(void))animations
//completion 動畫完成block, BOOL finished 表示動畫是否完成
+ (void)animateWithDuration:(NSTimeInterval)duration
animations:(void (^)(void))animations
completion:(void (^ __nullable)(BOOL finished))completion
//delay 延遲執行時間, options 動畫效果枚舉
+ (void)animateWithDuration:(NSTimeInterval)duration
delay:(NSTimeInterval)delay
options:(UIViewAnimationOptions)options
animations:(void (^)(void))animations
completion:(void (^ __nullable)(BOOL finished))completion
animations 修改View屬性的Block 下面是支持修改的屬性
@property frame
@property bounds
@property center
@property transform
@property alpha
@property backgroundColor
@property contentStretch
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；
PS:
[UIView animateWithDuration:2
delay:2
usingSpringWithDamping:.5
initialSpringVelocity:.5
options:UIViewAnimationOptionRepeat
animations:^{
view.center = self.view.center;
} completion:^(BOOL finished) {
}];
彈簧動畫
過渡動畫
//view 參與轉換的視圖
+ (void)transitionWithView:(UIView *)view
duration:(NSTimeInterval)duration
options:(UIViewAnimationOptions)options
animations:(void (^ __nullable)(void))animations
completion:(void (^ __nullable)(BOOL finished))completion
PS:
UIView *view = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 100, 100)];
view.center = self.view.center;
view.backgroundColor = [UIColor redColor];
[self.view addSubview:view];
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) {
}];
過渡動畫1
//fromView 一開始的視圖, toView 轉換后的視圖
+ (void)transitionFromView:(UIView *)fromView
toView:(UIView *)toView
duration:(NSTimeInterval)duration
options:(UIViewAnimationOptions)options
completion:(void (^ __nullable)(BOOL finished))completion
PS:
UIView *baseView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 100, 100)];
baseView.center = self.view.center;
[self.view addSubview:baseView];
UIView *view = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 100, 100)];
view.backgroundColor = [UIColor redColor];
[baseView addSubview:view];
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) {
}];
過渡動畫2
關鍵幀動畫
/**
* @param duration 總持續時間
* @param UIViewKeyframeAnimationOptions options 枚舉 下面說明
* @param frameStartTime 相對開始時間
* @param frameDuration 相對持續時間
*/
+ (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
PS:
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中不執行動畫的代碼.
PS:
UIView *view = [[UIView alloc] initWithFrame:CGRectMake(20, 20, 50, 50)];
view.backgroundColor = [UIColor orangeColor];
[self.view addSubview:view];
UIView *view_1 = [[UIView alloc] initWithFrame:CGRectMake(10, 10, 20, 20)];
view_1.backgroundColor = [UIColor redColor];
[view addSubview:view_1];
[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) {
}];
image
