說明:此文僅為筆記囤锉,是本人根據(jù)參考他人自己總結(jié)的一些東西,查閱原文請戳這里:
iOS動畫篇:UIView動畫
一护锤、簡介:
UIView 動畫實質(zhì)是對Core Animation的封裝官地,提供簡潔的動畫接口:
UIView動畫可以設置動畫的屬性有:
- 大小變化 (frame)
- 拉伸變化 (bounds)
- 中心位置 (center)
- 旋轉(zhuǎn) (transform)
- 透明度 (alpha)
- 背景色 (backgroundColor)
- 拉伸內(nèi)容 (contentStretch)
二:具體方法:
1.動畫開始和結(jié)束方法:
A.動畫開始標記:
// 第一個參數(shù): 動畫標識
// 第二個參數(shù): 附加參數(shù),在設置代理情況下,此參數(shù)將發(fā)送到setAnimationWillStartSelector和setAnimationDidStopSelector所指定的方法烙懦,大部分情況驱入,設置為nil.
[UIView beginAnimations:(nullable NSString *) context:(nullable void *)];
B.結(jié)束動畫標記:
[UIView commitAnimations];
####2.動畫參數(shù)的設置方法:
//動畫持續(xù)時間
[UIView setAnimationDuration:(NSTimeInterval)];
//動畫的代理對象
[UIView setAnimationDelegate:(nullable id)];
//設置動畫將開始時代理對象執(zhí)行的SEL
[UIView setAnimationWillStartSelector:(nullable SEL)];
//設置動畫延遲執(zhí)行的時間
[UIView setAnimationDelay:(NSTimeInterval)];
//設置動畫的重復次數(shù)
[UIView setAnimationRepeatCount:(float)];
//設置動畫的曲線
[UIView setAnimationCurve:(UIViewAnimationCurve)];
UIViewAnimationCurve的枚舉值如下:
UIViewAnimationCurveEaseInOut, // 慢進慢出(默認值)
UIViewAnimationCurveEaseIn, // 慢進
UIViewAnimationCurveEaseOut, // 慢出
UIViewAnimationCurveLinear // 勻速
//設置是否從當前狀態(tài)開始播放動畫
[UIView setAnimationBeginsFromCurrentState:YES];
假設上一個動畫正在播放,且尚未播放完畢氯析,我們將要進行一個新的動畫:
當為YES時:動畫將從上一個動畫所在的狀態(tài)開始播放
當為NO時:動畫將從上一個動畫所指定的最終狀態(tài)開始播放(此時上一個動畫馬上結(jié)束)
//設置動畫是否繼續(xù)執(zhí)行相反的動畫
[UIView setAnimationRepeatAutoreverses:(BOOL)];
//是否禁用動畫效果(對象屬性依然會被改變亏较,只是沒有動畫效果)
[UIView setAnimationsEnabled:(BOOL)];
//設置視圖的過渡效果
[UIView setAnimationTransition:(UIViewAnimationTransition) forView:(nonnull UIView *) cache:(BOOL)];
第一個參數(shù):UIViewAnimationTransition的枚舉值如下
UIViewAnimationTransitionNone, //不使用動畫
UIViewAnimationTransitionFlipFromLeft, //從左向右旋轉(zhuǎn)翻頁
UIViewAnimationTransitionFlipFromRight, //從右向左旋轉(zhuǎn)翻頁
UIViewAnimationTransitionCurlUp, //從下往上卷曲翻頁
UIViewAnimationTransitionCurlDown, //從上往下卷曲翻頁
第二個參數(shù):需要過渡效果的View
第三個參數(shù):是否使用視圖緩存,YES:視圖在開始和結(jié)束時渲染一次掩缓;NO:視圖在每一幀都渲染
####3.實例代碼:
A.初始化代碼:
#import "ViewController.h"
@interface ViewController ()
// 積分 view
@property (nonatomic, strong) UIImageView *integralView;
// 卡券 view
@property (nonatomic, strong) UIImageView *cartCenterView;
// 簽到 view
@property (nonatomic, strong) UIImageView *signInView;
@end
@implementation ViewController
#pragma mark --- life circle
- (void)viewDidLoad {
[super viewDidLoad];
[self.view addSubview:self.signInView];
[self.view addSubview:self.cartCenterView];
[self.view addSubview:self.integralView];
self.view.backgroundColor = [UIColor whiteColor];
}
#pragma mark --- getter and setter
// 簽到 view
- (UIImageView *)signInView {
if (!_signInView) {
CGFloat signInViewX = 60;
CGFloat signInViewY = 120;
CGFloat signInViewWidth = self.view.frame.size.width - (2 * signInViewX);
CGFloat signInViewHeight = 100.0f;
_signInView = [[UIImageView alloc] initWithFrame:CGRectMake(signInViewX, signInViewY, signInViewWidth, signInViewHeight)];
_signInView.clipsToBounds = YES;
_signInView.contentMode = UIViewContentModeScaleAspectFill;
_signInView.image = [UIImage imageNamed:@"default_user_icon.png"];
}
return _signInView;
}
// 卡券 view
- (UIImageView *)cartCenterView {
if (!_cartCenterView) {
CGFloat cartCenterViewX = CGRectGetMinX(self.signInView.frame);
CGFloat cartCenterViewY = CGRectGetMaxY(self.signInView.frame) + 10;
CGFloat cartCenterViewWidth = self.signInView.frame.size.width/2.0;
CGFloat cartCenterViewHeight = 60.0f;
_cartCenterView = [[UIImageView alloc] initWithFrame:CGRectMake(cartCenterViewX, cartCenterViewY, cartCenterViewWidth, cartCenterViewHeight)];
_cartCenterView.contentMode = UIViewContentModeScaleAspectFill;
_cartCenterView.clipsToBounds = YES;
_cartCenterView.image = [UIImage imageNamed:@"icon_gouwuche.png"];
}
return _cartCenterView;
}
// 積分
- (UIImageView *)integralView {
if (!_integralView) {
CGFloat integralViewX = CGRectGetMaxX(self.cartCenterView.frame);
CGFloat integralViewY = CGRectGetMinY(self.cartCenterView.frame);
CGFloat integralViewWidth = self.signInView.frame.size.width/2.0;
CGFloat integralViewHeight = self.cartCenterView.frame.size.height;
_integralView = [[UIImageView alloc] initWithFrame:CGRectMake(integralViewX, integralViewY, integralViewWidth, integralViewHeight)];
_integralView.clipsToBounds = YES;
_integralView.contentMode = UIViewContentModeScaleAspectFill;
_integralView.image = [UIImage imageNamed:@"home_dingdan.png"];
}
return _integralView;
}
B.屬性變化動畫(以frame變化為例子):
// 改變 frame
- (void)changeFrame {
[UIView beginAnimations:@"FrameAni" context:nil];
[UIView setAnimationDuration:1.0];
[UIView setAnimationDelegate:self];
[UIView setAnimationWillStartSelector:@selector(startAni:)];
[UIView setAnimationDidStopSelector:@selector(stopAni:)];
[UIView setAnimationRepeatCount:1.0];
[UIView setAnimationCurve:UIViewAnimationCurveEaseInOut];
self.cartCenterView.frame = self.signInView.frame;
[UIView commitAnimations];
}
// 開始 動畫
- (void)startAni:(NSString *)aniId {
NSLog(@"%@ start",aniId);
}
// 結(jié)束 動畫
- (void)stopAni:(NSString *)aniId {
NSLog(@"%@ stop",aniId);
}
效果圖:
C.轉(zhuǎn)場動畫效果(以Flip和curUp效果為例)
// 轉(zhuǎn)成動畫 (flip)
- (void)filpAnimation {
[UIView beginAnimations:@"FlipAnimation" context:nil];
[UIView setAnimationDuration:2.0];
[UIView setAnimationDelegate:self];
[UIView setAnimationWillStartSelector:@selector(startAni:)];
[UIView setAnimationDidStopSelector:@selector(stopAni:)];
[UIView setAnimationRepeatCount:1.0];
[UIView setAnimationCurve:UIViewAnimationCurveEaseInOut];
[UIView setAnimationTransition:UIViewAnimationTransitionFlipFromLeft forView:self.signInView cache:YES];
self.signInView.image = [UIImage imageNamed:@"serviceActivity.png"];
[UIView commitAnimations];
}
效果圖:
// 轉(zhuǎn)場動畫 (curUp) (self.view)
- (void)curUpControllerViewAnimation {
[UIView beginAnimations:@"FlipAnimation" context:nil];
[UIView setAnimationDuration:1.0];
[UIView setAnimationDelegate:self];
[UIView setAnimationWillStartSelector:@selector(startAni:)];
[UIView setAnimationDidStopSelector:@selector(stopAni:)];
[UIView setAnimationRepeatCount:1.0];
[UIView setAnimationCurve:UIViewAnimationCurveEaseInOut];
[UIView setAnimationTransition:UIViewAnimationTransitionCurlUp forView:self.view cache:YES];
self.signInView.image = [UIImage imageNamed:@"serviceActivity.png"];
[UIView commitAnimations];
}
效果圖:
三.UIView Block 動畫
iOS4.0以后增加了Block動畫塊雪情,提供了更簡潔的方式來實現(xiàn)動畫.
1.Block動畫方法
A.最簡潔的Block動畫:包含時間和動畫
[UIView animateWithDuration:(NSTimeInterval) //動畫持續(xù)時間
animations:^{
//執(zhí)行的動畫
}];
B.帶有動畫完成回調(diào)的Block動畫
[UIView animateWithDuration:(NSTimeInterval) //動畫持續(xù)時間
animations:^{
//執(zhí)行的動畫
} completion:^(BOOL finished) {
//動畫執(zhí)行完畢后的操作
}];
C.可以設置延時時間和過渡效果的Block動畫
[UIView animateWithDuration:(NSTimeInterval) //動畫持續(xù)時間
delay:(NSTimeInterval) //動畫延遲執(zhí)行的時間
options:(UIViewAnimationOptions) //動畫的過渡效果
animations:^{
//執(zhí)行的動畫
} completion:^(BOOL finished) {
//動畫執(zhí)行完畢后的操作
}];
UIViewAnimationOptions的枚舉值如下,可組合使用:
UIViewAnimationOptionLayoutSubviews //進行動畫時布局子控件
UIViewAnimationOptionAllowUserInteraction //進行動畫時允許用戶交互
UIViewAnimationOptionBeginFromCurrentState //從當前狀態(tài)開始動畫
UIViewAnimationOptionRepeat //無限重復執(zhí)行動畫
UIViewAnimationOptionAutoreverse //執(zhí)行動畫回路
UIViewAnimationOptionOverrideInheritedDuration //忽略嵌套動畫的執(zhí)行時間設置
UIViewAnimationOptionOverrideInheritedCurve //忽略嵌套動畫的曲線設置
UIViewAnimationOptionAllowAnimatedContent //轉(zhuǎn)場:進行動畫時重繪視圖
UIViewAnimationOptionShowHideTransitionViews //轉(zhuǎn)場:移除(添加和移除圖層的)動畫效果
UIViewAnimationOptionOverrideInheritedOptions //不繼承父動畫設置
UIViewAnimationOptionCurveEaseInOut //時間曲線,慢進慢出(默認值)
UIViewAnimationOptionCurveEaseIn //時間曲線你辣,慢進
UIViewAnimationOptionCurveEaseOut //時間曲線巡通,慢出
UIViewAnimationOptionCurveLinear //時間曲線尘执,勻速
UIViewAnimationOptionTransitionNone //轉(zhuǎn)場,不使用動畫
UIViewAnimationOptionTransitionFlipFromLeft //轉(zhuǎn)場扁达,從左向右旋轉(zhuǎn)翻頁
UIViewAnimationOptionTransitionFlipFromRight //轉(zhuǎn)場正卧,從右向左旋轉(zhuǎn)翻頁
UIViewAnimationOptionTransitionCurlUp //轉(zhuǎn)場,下往上卷曲翻頁
UIViewAnimationOptionTransitionCurlDown //轉(zhuǎn)場跪解,從上往下卷曲翻頁
UIViewAnimationOptionTransitionCrossDissolve //轉(zhuǎn)場炉旷,交叉消失和出現(xiàn)
UIViewAnimationOptionTransitionFlipFromTop //轉(zhuǎn)場,從上向下旋轉(zhuǎn)翻頁
UIViewAnimationOptionTransitionFlipFromBottom //轉(zhuǎn)場叉讥,從下向上旋轉(zhuǎn)翻頁
D.Spring動畫
iOS7.0以后新增了Spring動畫(iOS系統(tǒng)動畫大部分采用Spring Animation窘行, 適用所有可被添加動畫效果的屬性)
[UIView anima
teWithDuration:(NSTimeInterval)//動畫持續(xù)時間
delay:(NSTimeInterval)//動畫延遲執(zhí)行的時間
usingSpringWithDamping:(CGFloat)//震動效果,范圍0~1图仓,數(shù)值越小震動效果越明顯
initialSpringVelocity:(CGFloat)//初始速度罐盔,數(shù)值越大初始速度越快
options:(UIViewAnimationOptions)//動畫的過渡效果
animations:^{
//執(zhí)行的動畫
}
completion:^(BOOL finished) {
//動畫執(zhí)行完畢后的操作
}];
E.Keyframes動畫
IOS7.0后新增了關鍵幀動畫,支持屬性關鍵幀救崔,不支持路徑關鍵幀
[UIView animateKeyframesWithDuration:(NSTimeInterval)//動畫持續(xù)時間
delay:(NSTimeInterval)//動畫延遲執(zhí)行的時間
options:(UIViewKeyframeAnimationOptions)//動畫的過渡效果
animations:^{
//執(zhí)行的關鍵幀動畫
}
completion:^(BOOL finished) {
//動畫執(zhí)行完畢后的操作
}];
UIViewKeyframeAnimationOptions的枚舉值如下惶看,可組合使用:
UIViewAnimationOptionLayoutSubviews //進行動畫時布局子控件
UIViewAnimationOptionAllowUserInteraction //進行動畫時允許用戶交互
UIViewAnimationOptionBeginFromCurrentState //從當前狀態(tài)開始動畫
UIViewAnimationOptionRepeat //無限重復執(zhí)行動畫
UIViewAnimationOptionAutoreverse //執(zhí)行動畫回路
UIViewAnimationOptionOverrideInheritedDuration //忽略嵌套動畫的執(zhí)行時間設置
UIViewAnimationOptionOverrideInheritedOptions //不繼承父動畫設置
UIViewKeyframeAnimationOptionCalculationModeLinear //運算模式 :連續(xù)
UIViewKeyframeAnimationOptionCalculationModeDiscrete //運算模式 :離散
UIViewKeyframeAnimationOptionCalculationModePaced //運算模式 :均勻執(zhí)行
UIViewKeyframeAnimationOptionCalculationModeCubic //運算模式 :平滑
UIViewKeyframeAnimationOptionCalculationModeCubicPaced //運算模式 :平滑均勻
各種運算模式的直觀比較如下圖:
增加關鍵幀方法:
[UIView addKeyframeWithRelativeStartTime:(double)//動畫開始的時間(占總時間的比例)
relativeDuration:(double) //動畫持續(xù)時間(占總時間的比例)
animations:^{
//執(zhí)行的動畫
}];
F.轉(zhuǎn)場動畫:
a.從舊視圖到新視圖的動畫效果
[UIView transitionFromView:(nonnull UIView *)
toView:(nonnull UIView *)
duration:(NSTimeInterval)
options:(UIViewAnimationOptions)
completion:^(BOOL finished) {
//動畫執(zhí)行完畢后的操作
}];
在該動畫過程中,fromView 會從父視圖中移除六孵,并將 toView 添加到父視圖中纬黎,注意轉(zhuǎn)場動畫的作用對象是父視圖(過渡效果體現(xiàn)在父視圖上)。調(diào)用該方法相當于執(zhí)行下面兩句代碼:
[fromView.superview addSubview:toView];
[fromView removeFromSuperview];
b.單個視圖的過渡效果
[UIView transitionWithView:(nonnull UIView *)
duration:(NSTimeInterval)
options:(UIViewAnimationOptions)
animations:^{
//執(zhí)行的動畫
}
completion:^(BOOL finished) {
//動畫執(zhí)行完畢后的操作
}];
2.實例代碼:
A.最簡潔的Block動畫:包含時間和動畫:
// 改變 frame (時間和動畫)
- (void)blockChangeFrame {
[UIView animateWithDuration:1.0 animations:^{
self.cartCenterView.frame = self.signInView.frame;
}];
}
效果圖:
B.帶有動畫完成回調(diào)的Block動畫
// 改變 frame (時間劫窒、動畫本今、完成回調(diào))
- (void)blockChangeFrameWithComplete {
CGRect originalFrame = self.cartCenterView.frame;
[UIView animateWithDuration:1.0 animations:^{
self.cartCenterView.frame = self.signInView.frame;
}completion:^(BOOL finished) {
self.cartCenterView.frame = originalFrame;
}];
}
效果圖:
C.設置延時時間和過渡效果的Block動畫
// 改變 frame (時間、延遲時間主巍、過渡動畫冠息、完成回調(diào))
- (void)blockChangeFrameWithDelayTimeAndComplete {
CGRect originalFrame = self.cartCenterView.frame;
[UIView animateWithDuration:1.0 delay:1.0 options:UIViewAnimationOptionCurveEaseInOut animations:^{
self.cartCenterView.frame = self.signInView.frame;
} completion:^(BOOL finished) {
self.cartCenterView.frame = originalFrame;
}];
}
效果圖:
D..Spring動畫
// 彈簧動畫
- (void)blockChangeFrameWithSpringAnimation {
[UIView animateWithDuration:1.0 delay:0.5 usingSpringWithDamping:0.01 initialSpringVelocity:10.0f options:UIViewAnimationOptionCurveEaseInOut animations:^{
self.cartCenterView.frame = self.signInView.frame;
} completion:^(BOOL finished) {
self.cartCenterView.hidden = YES;
}];
}
效果圖:
E.Keyframes動畫
// 關鍵 幀 放大 動畫
- (void)blockAmplifyAnimation {
self.signInView.transform = CGAffineTransformIdentity;
self.signInView.image = [UIImage imageNamed:@"serviceActivity.png"];
[UIView animateKeyframesWithDuration:1.5 delay:0 options:UIViewKeyframeAnimationOptionCalculationModeLinear animations:^{
[UIView addKeyframeWithRelativeStartTime:0 relativeDuration:1/3.0 animations:^{
self.signInView.transform = CGAffineTransformMakeScale(1.5, 1.5);
}];
[UIView addKeyframeWithRelativeStartTime:1/3.0 relativeDuration:1/3.0 animations:^{
self.signInView.transform = CGAffineTransformMakeScale(0.8, 0.8);
}];
[UIView addKeyframeWithRelativeStartTime:2/3.0 relativeDuration:1/3.0 animations:^{
self.signInView.transform = CGAffineTransformMakeScale(1.0, 1.0);
}];
} completion:^(BOOL finished) {
NSLog(@"動畫結(jié)束");
}];
}
效果圖:
F.單個視圖的轉(zhuǎn)場動畫
// 轉(zhuǎn)場 動畫 單個 視圖 過渡 效果
- (void)blockTransitionWithSingleViewAnimation {
[UIView transitionWithView:self.signInView duration:1.0 options:UIViewAnimationOptionTransitionFlipFromLeft animations:^{
self.signInView.image = [UIImage imageNamed:@"serviceActivity.png"];
} completion:^(BOOL finished) {
NSLog(@"動畫結(jié)束");
self.view.backgroundColor = [UIColor lightGrayColor];
}];
}
效果圖:
G.從舊視圖到新視圖的轉(zhuǎn)場動畫
// 轉(zhuǎn)場 動畫 (舊視圖 到 新 視圖)
- (void)blockTransitionFromViewToViewAnimation {
UIImageView *tmpNewImageView = [[UIImageView alloc] initWithFrame:self.signInView.frame];
tmpNewImageView.image = [UIImage imageNamed:@"serviceActivity.png"];
[UIView transitionFromView:self.signInView toView:tmpNewImageView duration:1.0 options:UIViewAnimationOptionTransitionFlipFromLeft completion:^(BOOL finished) {
NSLog(@"動畫結(jié)束");
self.view.backgroundColor = [UIColor lightGrayColor];
}];
}
效果圖:
四.最后
送上一張喜歡的圖片:
這是gitHub鏈接地址:UIViewAnimation,大家有興趣可以看一下孕索,如果覺得不錯逛艰,麻煩給個喜歡或star,若發(fā)現(xiàn)問題請及時反饋,謝謝搞旭!