iOS動畫篇之UIView動畫

UIKit直接將動畫集成到UIView類中，當內(nèi)部的一些屬性發(fā)生改變時，UIView將為這些改變提供動畫支持。

UIViewAnimationOptions參考

1.基本類型

UIViewAnimationOptionLayoutSubviews：動畫過程中保證子視圖跟隨運動。

UIViewAnimationOptionAllowUserInteraction：動畫過程中允許用戶交互。

UIViewAnimationOptionBeginFromCurrentState：所有視圖從當前狀態(tài)開始運行。

UIViewAnimationOptionRepeat：重復(fù)運行動畫。

UIViewAnimationOptionAutoreverse ：動畫運行到結(jié)束點后仍然以動畫方式回到初始點。

UIViewAnimationOptionOverrideInheritedDuration：忽略嵌套動畫時間設(shè)置。

UIViewAnimationOptionOverrideInheritedCurve：忽略嵌套動畫速度設(shè)置。

UIViewAnimationOptionAllowAnimatedContent：動畫過程中重繪視圖（注意僅僅適用于轉(zhuǎn)場動畫）。

UIViewAnimationOptionShowHideTransitionViews：視圖切換時直接隱藏舊視圖、顯示新視圖，而不是將舊視圖從父視圖移除（僅僅適用于轉(zhuǎn)場動畫）

UIViewAnimationOptionOverrideInheritedOptions ：不繼承父動畫設(shè)置或動畫類型。

2.動畫速度控制（可從其中選擇一個設(shè)置）

UIViewAnimationOptionCurveEaseInOut：動畫先緩慢，然后逐漸加速。

UIViewAnimationOptionCurveEaseIn ：動畫逐漸變慢。

UIViewAnimationOptionCurveEaseOut：動畫逐漸加速。

UIViewAnimationOptionCurveLinear ：動畫勻速執(zhí)行，默認值。

3.轉(zhuǎn)場類型（僅適用于轉(zhuǎn)場動畫設(shè)置，可以從中選擇一個進行設(shè)置，基本動畫、關(guān)鍵幀動畫不需要設(shè)置）

UIViewAnimationOptionTransitionNone：沒有轉(zhuǎn)場動畫效果。

UIViewAnimationOptionTransitionFlipFromLeft ：從左側(cè)翻轉(zhuǎn)效果。

UIViewAnimationOptionTransitionFlipFromRight：從右側(cè)翻轉(zhuǎn)效果。

UIViewAnimationOptionTransitionCurlUp：向后翻頁的動畫過渡效果。

UIViewAnimationOptionTransitionCurlDown ：向前翻頁的動畫過渡效果。

UIViewAnimationOptionTransitionCrossDissolve：舊視圖溶解消失顯示下一個新視圖的效果。

UIViewAnimationOptionTransitionFlipFromTop ：從上方翻轉(zhuǎn)效果。

UIViewAnimationOptionTransitionFlipFromBottom：從底部翻轉(zhuǎn)效果。

1. 基本動畫

+ (void)animateWithDuration:(NSTimeInterval)duration delay:(NSTimeInterval)delay options:(UIViewAnimationOptions)options animations:(void (^)(void))animations completion:(void (^ __nullable)(BOOL finished))completion

? 參數(shù)詳情:

duration? :? 持續(xù)時間

delay? ? ? :? 延遲執(zhí)行

options? ? :? 動畫選項(往復(fù)、循環(huán)等)

animations :? 動畫block

completion :? 完成后的block

? 可實現(xiàn)動畫的屬性

坐標尺寸類: bounds、frame、center

視圖顯示類: backgroundColor、alpha、hidden

形態(tài)變化類: transform

2.彈簧動畫

+ (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

? 參數(shù)詳情:

usingSpringWithDamping? :? 0.0 ~ 1.0 阻尼比例，數(shù)值越小「彈簧」的振動效果越明顯

initialSpringVelocity? ? :? 初始的速度，數(shù)值越大一開始移動越快

3.過渡動畫

+ (void)transitionWithView:(UIView *)view duration:(NSTimeInterval)duration options:(UIViewAnimationOptions)options animations:(void (^ __nullable)(void))animations completion:(void (^ __nullable)(BOOL finished))completion

? 參數(shù)詳情:

view? ? ? :? 需要進行轉(zhuǎn)場動畫的視圖

options? ? :? 轉(zhuǎn)場動畫的類型

+ (void)transitionFromView:(UIView *)fromView toView:(UIView *)toView duration:(NSTimeInterval)duration options:(UIViewAnimationOptions)options completion:(void (^ __nullable)(BOOL finished))completion

? 參數(shù)詳情:

方法調(diào)用完畢后，相當于執(zhí)行了下面兩句代碼：

// 添加toView到父視圖

[fromView.superview addSubview:toView];

// 把fromView從父視圖中移除

[fromView removeFromSuperview];

4. keyframe動畫

+ (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

? 參數(shù)詳情:

RelativeStartTime : 關(guān)鍵幀動畫開始時間的比例值

RelativeDuration? : 關(guān)鍵幀動畫持續(xù)實踐的比例值

? 用法示例:

[UIView animateKeyframesWithDuration:8 delay:0 options:UIViewKeyframeAnimationOptionCalculationModeLinear animations:^{

[UIView addKeyframeWithRelativeStartTime:0 relativeDuration:0.25 animations:^{

self.imgV.center = (CGPoint){center.x + 200 ,center.y + 150};

}];

[UIView addKeyframeWithRelativeStartTime:0.25 relativeDuration:0.25 animations:^{

self.imgV.center = (CGPoint){center.x ,center.y + 300};

}];

[UIView addKeyframeWithRelativeStartTime:0.5 relativeDuration:0.25 animations:^{

self.imgV.center = (CGPoint){center.x + 200,center.y + 450};

}];

[UIView addKeyframeWithRelativeStartTime:0.75 relativeDuration:0.25 animations:^{

self.imgV.center = (CGPoint){center.x + 0,center.y + 600 };

}];

} completion:nil];

5. transform變換

CGAffineTransform

? 變換原理

struct CGAffineTransform {

CGFloat a;

CGFloat b;

CGFloat c;

CGFloat d;

CGFloat tx;

CGFloat ty;

};

結(jié)構(gòu)體矩陣圖為：

因為最后一列總是是(0,0,1)，所以有用的信息就是前面兩列

對一個view進行仿射變化就相當于對view上的每個點做一個乘法

結(jié)果就是：

相當于：

(x, y, 1 ) –> (ax + cy + tx, bx + dy + ty, 1)

如果不看c和b的話

a表示x水平方向的縮放，tx表示x水平方向的偏移

d表示y垂直方向的縮放，ty表示y垂直方向的偏移

如果b和c不為零的話，那么視圖肯定發(fā)生了旋轉(zhuǎn)

常量

CGAffineTransformIdentity

CGAffineTransform

CGAffineTransformIdentity;

這個就是沒有變化的最初的樣子

? 常用函數(shù)

/// 用來連接兩個變換效果并返回。返回的t = t1 * t2

CGAffineTransformConcat(CGAffineTransform t1, CGAffineTransform t2)

/// 矩陣初始值。[ 1 0 0 1 0 0 ]

CGAffineTransformIdentity

/// 自定義矩陣變換，需要掌握矩陣變換的知識才知道怎么用。參照(x, y, 1 ) --> (ax + cy + tx, bx + dy + ty, 1)

CGAffineTransformMake(CGFloat a, CGFloat b, CGFloat c, CGFloat d, CGFloat tx, CGFloat ty)

/// 旋轉(zhuǎn)視圖。傳入?yún)?shù)為 角度 * (M_PI / 180)。等同于 CGAffineTransformRotate(self.transform, angle)

CGAffineTransformMakeRotation(CGFloat angle)

CGAffineTransformRotate(CGAffineTransform t, CGFloat angle)

/// 縮放視圖。等同于CGAffineTransformScale(self.transform, sx, sy)

CGAffineTransformMakeScale(CGFloat sx, CGFloat sy)

CGAffineTransformScale(CGAffineTransform t, CGFloat sx, CGFloat sy)

/// 縮放視圖。等同于CGAffineTransformTranslate(self.transform, tx, ty)

CGAffineTransformMakeTranslation(CGFloat tx, CGFloat ty)

CGAffineTransformTranslate(CGAffineTransform t, CGFloat tx, CGFloat ty)

? 常用函數(shù)

- (void)viewDidAppear:(BOOL)animated {

CGFloat offset = self.label1.frame.size.height * 0.5;

self.label1.transform = CGAffineTransformConcat(

CGAffineTransformMakeScale(1, 0),

CGAffineTransformMakeTranslation(0, -offset));

self.label1.alpha = 0;

[UIView animateWithDuration:3.0 animations:^{

self.label1.transform = CGAffineTransformIdentity;

self.label1.alpha = 1;

self.label2.transform = CGAffineTransformConcat(

CGAffineTransformMakeScale(1, 0.1),

CGAffineTransformMakeTranslation(0, offset));

self.label2.alpha = 0;

}];

}

6.UIView動畫（首尾方式）

UIKit直接將動畫集成到UIView類中，當內(nèi)部的一些屬性發(fā)生改變時，UIView將為這些改變提供動畫支持

執(zhí)行動畫所需要的工作由UIView類自動完成，但仍要在希望執(zhí)行動畫時通知視圖，為此需要將改變屬性的代碼放在[UIView beginAnimations:nil context:nil]和[UIView commitAnimations]之間

常見方法解析:

+ (void)setAnimationDelegate:(id)delegate 設(shè)置動畫代理對象，當動畫開始或者結(jié)束時會發(fā)消息給代理對象

+ (void)setAnimationWillStartSelector:(SEL)selector 當動畫即將開始時，執(zhí)行delegate對象的selector，并且把beginAnimations:context:中傳入的參數(shù)傳進selector

+ (void)setAnimationDidStopSelector:(SEL)selector 當動畫結(jié)束時，執(zhí)行delegate對象的selector，并且把beginAnimations:context:中傳入的參數(shù)傳進selector

+ (void)setAnimationDuration:(NSTimeInterval)duration 動畫的持續(xù)時間，秒為單位

+ (void)setAnimationDelay:(NSTimeInterval)delay 動畫延遲delay秒后再開始

+ (void)setAnimationStartDate:(NSDate *)startDate 動畫的開始時間，默認為now

+ (void)setAnimationCurve:(UIViewAnimationCurve)curve 動畫的節(jié)奏控制

+ (void)setAnimationRepeatCount:(float)repeatCount 動畫的重復(fù)次數(shù)

+ (void)setAnimationRepeatAutoreverses:(BOOL)repeatAutoreverses 如果設(shè)置為YES,代表動畫每次重復(fù)執(zhí)行的效果會跟上一次相反

+ (void)setAnimationTransition:(UIViewAnimationTransition)transition forView:(UIView *)view cache:(BOOL)cache 設(shè)置視圖view的過渡效果, transition指定過渡類型, cache設(shè)置YES代表使用視圖緩存，性能較好

代碼示例:

@interface ViewController ()

@property (weak, nonatomic) IBOutlet UIView *customView;

@end

@implementation YYViewController

- (void)viewDidLoad

{

[super viewDidLoad];

}

-(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event

{

//打印動畫塊的位置

NSLog(@"動畫執(zhí)行之前的位置：%@",NSStringFromCGPoint(self.customView.center));

//首尾式動畫

[UIView beginAnimations:nil context:nil];

//執(zhí)行動畫

//設(shè)置動畫執(zhí)行時間

[UIView setAnimationDuration:2.0];

//設(shè)置代理

[UIView setAnimationDelegate:self];

//設(shè)置動畫執(zhí)行完畢調(diào)用的事件

[UIView setAnimationDidStopSelector:@selector(didStopAnimation)];

self.customView.center=CGPointMake(200, 300);

[UIView commitAnimations];

}

-(void)didStopAnimation

{

NSLog(@"動畫執(zhí)行完畢");

//打印動畫塊的位置

NSLog(@"動畫執(zhí)行之后的位置：%@",NSStringFromCGPoint(self.customView.center));

}

@end

說明:

使用UIView和CALayer都能實現(xiàn)動畫效果，但是在真實的開發(fā)中，一般還是主要使用UIView封裝的動畫，而很少使用CALayer的動畫。

CALayer核心動畫與UIView動畫的區(qū)別：

UIView封裝的動畫執(zhí)行完畢之后不會反彈。即如果是通過CALayer核心動畫改變layer的位置狀態(tài)，表面上看雖然已經(jīng)改變了，但是實際上它的位置是沒有改變的。

7.補充

UIImageView的幀動畫

UIImageView可以讓一系列的圖片在特定的時間內(nèi)按順序顯示

相關(guān)屬性解析:

animationImages：要顯示的圖片(一個裝著UIImage的NSArray)

animationDuration：完整地顯示一次animationImages中的所有圖片所需的時間

animationRepeatCount：動畫的執(zhí)行次數(shù)(默認為0，代表無限循環(huán))

相關(guān)方法解析:

- (void)startAnimating; 開始動畫

- (void)stopAnimating; 停止動畫

- (BOOL)isAnimating; 是否正在運行動畫

UIActivityIndicatorView

是一個旋轉(zhuǎn)進度輪，可以用來告知用戶有一個操作正在進行中，一般用initWithActivityIndicatorStyle初始化

相關(guān)方法解析:

- (void)startAnimating; 開始動畫

- (void)stopAnimating; 停止動畫

- (BOOL)isAnimating; 是否正在運行動畫

UIActivityIndicatorViewStyle有3個值可供選擇：

UIActivityIndicatorViewStyleWhiteLarge //大型白色指示器

UIActivityIndicatorViewStyleWhite //標準尺寸白色指示器

UIActivityIndicatorViewStyleGray //灰色指示器，用于白色背景

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容