在iOS開發(fā)中辜窑,制作動(dòng)畫效果是最讓開發(fā)者享受的環(huán)節(jié)之一。一個(gè)設(shè)計(jì)嚴(yán)謹(jǐn)、精細(xì)的動(dòng)畫效果能給用戶耳目一新的效果肋联,吸引他們的眼光 —— 這對(duì)于app而言是非常重要的。 那么在UIview動(dòng)畫的第一篇我們來簡(jiǎn)單看一下block動(dòng)畫
一刁俭、首先簡(jiǎn)單說明一下
+(void)animateWithDuration:(NSTimeInterval)duration animations:(void (^)(void))animations
參數(shù)解析:
duration:動(dòng)畫的持續(xù)時(shí)間
animations:將改變視圖屬性的代碼放在這個(gè)block中
+(void)animateWithDuration:(NSTimeInterval)duration delay:(NSTimeInterval)delay options:(UIViewAnimationOptions)options animations:(void (^)(void))animations completion:(void (^)(BOOL finished))completion
參數(shù)解析:
duration:動(dòng)畫的持續(xù)時(shí)間
delay:動(dòng)畫延遲delay秒后開始
options:動(dòng)畫的節(jié)奏控制
動(dòng)畫的節(jié)奏控制如下
UIViewAnimationOptionCurveEaseInOut //先加速后減速橄仍,默認(rèn)
UIViewAnimationOptionCurveEaseIn //由慢到快
UIViewAnimationOptionCurveEaseOut //由快到慢
UIViewAnimationOptionCurveLinear //勻速
animations:將改變視圖屬性的代碼放在這個(gè)block中
completion:動(dòng)畫結(jié)束后,會(huì)自動(dòng)調(diào)用這個(gè)block
+(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
duration:動(dòng)畫的持續(xù)時(shí)間
delay:動(dòng)畫延遲delay秒后開始
options:動(dòng)畫的節(jié)奏控制
dampingRatio:速度衰減比例牍戚。取值范圍0 ~ 1侮繁,值越低震動(dòng)越強(qiáng)
velocity:初始化速度,值越高則物品的速度越快
轉(zhuǎn)場(chǎng)動(dòng)畫
animations:將改變視圖屬性的代碼放在這個(gè)block中
completion:動(dòng)畫結(jié)束后如孝,會(huì)自動(dòng)調(diào)用這個(gè)block
+(void)transitionWithView:(UIView *)view duration:(NSTimeInterval)duration options:(UIViewAnimationOptions)options animations:(void (^)(void))animations completion:(void (^)(BOOL finished))completion
參數(shù)解析:
duration:動(dòng)畫的持續(xù)時(shí)間
view:需要進(jìn)行轉(zhuǎn)場(chǎng)動(dòng)畫的視圖
options:轉(zhuǎn)場(chǎng)動(dòng)畫的類型
animations:將改變視圖屬性的代碼放在這個(gè)block中
completion:動(dòng)畫結(jié)束后宪哩,會(huì)自動(dòng)調(diào)用這個(gè)block
+(void)transitionFromView:(UIView *)fromView toView:(UIView *)toView duration:(NSTimeInterval)duration options:(UIViewAnimationOptions)options completion:(void (^)(BOOL finished))completion
方法調(diào)用完畢后,相當(dāng)于執(zhí)行了下面兩句代碼:
// 添加toView到父視圖
[fromView.superview addSubview:toView];
// 把fromView從父視圖中移除
[fromView.superview removeFromSuperview];
參數(shù)解析:
duration:動(dòng)畫的持續(xù)時(shí)間
options:轉(zhuǎn)場(chǎng)動(dòng)畫的類型
animations:將改變視圖屬性的代碼放在這個(gè)block中
completion:動(dòng)畫結(jié)束后第晰,會(huì)自動(dòng)調(diào)用這個(gè)block
二锁孟、然后我們簡(jiǎn)單了解一下各種動(dòng)畫
1. 移動(dòng)
關(guān)于移動(dòng)我們有很多方式來移動(dòng)UIview,可以自己手動(dòng)計(jì)算坐標(biāo)如:
CGPoint labelorigin = _label.center;
labelorigin.x = labelorigin.x + 100;
labelorigin.y = labelorigin.y + 200;
[UIView animateWithDuration:3 animations:^{
_label.center = labelorigin;
}];
同樣可以使用ios提供給我們的方法茁瘦! 首先是
_label.transform = CGAffineTransformTranslate(_label.transform, 0, 10);
1
或者是
_label.transform = CGAffineTransformMakeTranslation(0, 10);
上面的CGAffineTransformTranslate是在上一位置得中心點(diǎn)為起始參照
CGAffineTransformMakeTranslation每次都是以最初位置的中心點(diǎn)為起始參照
demo如下:
[UIView animateWithDuration: 0.5 delay: 0.35 options: UIViewAnimationOptionCurveEaseIn animations: ^{
_label.transform = CGAffineTransformTranslate(_label.transform, 0, 10);
} completion: ^(BOOL finished) {
[UIView animateWithDuration: 0.2 animations: ^{
_label.alpha = 0;
}];
}];
2.旋轉(zhuǎn)
旋轉(zhuǎn)的處理方式有很多品抽,這里我們暫時(shí)只介紹一下iOS提供給我們的方法
CGAffineTransformRotate(_label.transform, -0.5*M_PI);
CGAffineTransformMakeRotation(M_PI);
區(qū)分方式與上一小節(jié)的移動(dòng)相似
這里有些地方需要我們注意一下!
(1)M_PI是π甜熔,iOS 提供給我們多個(gè)M_PI圆恤,M_PI_2,M_PI_4等腔稀,使用時(shí)需要根據(jù)需求進(jìn)行篩選盆昙;
(2)在使用CGAffineTransformRotate和CGAffineTransformMakeRotation的時(shí)候需要注意“-0.5M_PI”代表逆時(shí)針旋轉(zhuǎn)90°,當(dāng)“1.5M_PI”時(shí)也表示逆時(shí)針旋轉(zhuǎn)90°而不是順時(shí)針旋轉(zhuǎn)270°烧颖,當(dāng)使用“2*M_PI”時(shí)弱左,則不會(huì)進(jìn)行旋轉(zhuǎn),也就是說使用這兩個(gè)方法表明所有的旋轉(zhuǎn)都將在順時(shí)針或逆時(shí)針0~180°中進(jìn)行炕淮。也許有時(shí)候需要旋轉(zhuǎn)一周拆火,解決方法會(huì)在后續(xù)博客中更新。
3. 縮放
_label.transform = CGAffineTransformScale(_label.transform, 0.9, 0.9);
_label.transform = CGAffineTransformMakeScale(1.2, 1.2);
區(qū)分方式與上一小節(jié)的移動(dòng)相似
使用時(shí)注意CGAffineTransformMakeScale和CGAffineTransformScale的兩個(gè)參數(shù)分別是寬和高縮放的比例
三涂圆、然后我們了解一下不同的動(dòng)畫效果
UIViewAnimationOptionCurveEaseInOut //先加速后減速们镜,默認(rèn)
UIViewAnimationOptionCurveEaseIn //由慢到快
UIViewAnimationOptionCurveEaseOut //由快到慢
UIViewAnimationOptionCurveLinear //勻速
tap:在模擬器運(yùn)行狀態(tài)下,點(diǎn)擊上面的菜單欄 DEBUG -> Slow Animation 或者快捷鍵 command + T润歉,這會(huì)放慢我們app的動(dòng)畫運(yùn)行速度
大家可以通過實(shí)驗(yàn)來解決模狭。
然后是Transitioning 轉(zhuǎn)場(chǎng)動(dòng)畫的類型
除了上面提到的這些效果,在視圖踩衩、圖片切換的時(shí)候嚼鹉,我們還能通過傳入下面的這些參數(shù)來實(shí)現(xiàn)一些特殊的動(dòng)畫效果贩汉。
UIViewAnimationOptionTransitionNone //沒有效果,默認(rèn)
UIViewAnimationOptionTransitionFlipFromLeft //從左翻轉(zhuǎn)效果
UIViewAnimationOptionTransitionFlipFromRight //從右翻轉(zhuǎn)效果
UIViewAnimationOptionTransitionCurlUp //從上往下翻頁
UIViewAnimationOptionTransitionCurlDown //從下往上翻頁
UIViewAnimationOptionTransitionCrossDissolve //舊視圖溶解過渡到下一個(gè)視圖
UIViewAnimationOptionTransitionFlipFromTop //從上翻轉(zhuǎn)效果
UIViewAnimationOptionTransitionFlipFromBottom //從上翻轉(zhuǎn)效果```
##四锚赤、最后
給大家上一個(gè)動(dòng)圖
![image.png](http://upload-images.jianshu.io/upload_images/6148320-8f2311733800ac1d.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
在[iOS](http://lib.csdn.net/base/ios)開發(fā)中匹舞,制作動(dòng)畫效果是最讓開發(fā)者享受的環(huán)節(jié)之一。一個(gè)設(shè)計(jì)嚴(yán)謹(jǐn)线脚、精細(xì)的動(dòng)畫效果能給用戶耳目一新的效果赐稽,吸引他們的眼光 —— 這對(duì)于app而言是非常重要的。 那么在UIview動(dòng)畫的第一篇我們來簡(jiǎn)單看一下block動(dòng)畫
##一浑侥、首先簡(jiǎn)單說明一下
+(void)animateWithDuration:(NSTimeInterval)duration animations:(void (^)(void))animations
參數(shù)解析:
duration:動(dòng)畫的持續(xù)時(shí)間
animations:將改變視圖屬性的代碼放在這個(gè)block中
+(void)animateWithDuration:(NSTimeInterval)duration delay:(NSTimeInterval)delay options:(UIViewAnimationOptions)options animations:(void (^)(void))animations completion:(void (^)(BOOL finished))completion
參數(shù)解析:
duration:動(dòng)畫的持續(xù)時(shí)間
delay:動(dòng)畫延遲delay秒后開始
options:動(dòng)畫的節(jié)奏控制
動(dòng)畫的節(jié)奏控制如下
UIViewAnimationOptionCurveEaseInOut //先加速后減速姊舵,默認(rèn)
UIViewAnimationOptionCurveEaseIn //由慢到快
UIViewAnimationOptionCurveEaseOut //由快到慢
UIViewAnimationOptionCurveLinear //勻速
animations:將改變視圖屬性的代碼放在這個(gè)block中
completion:動(dòng)畫結(jié)束后,會(huì)自動(dòng)調(diào)用這個(gè)block
+(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
duration:動(dòng)畫的持續(xù)時(shí)間
delay:動(dòng)畫延遲delay秒后開始
options:動(dòng)畫的節(jié)奏控制
dampingRatio:速度衰減比例寓落。取值范圍0 ~ 1括丁,值越低震動(dòng)越強(qiáng)
velocity:初始化速度,值越高則物品的速度越快
轉(zhuǎn)場(chǎng)動(dòng)畫
animations:將改變視圖屬性的代碼放在這個(gè)block中
completion:動(dòng)畫結(jié)束后零如,會(huì)自動(dòng)調(diào)用這個(gè)block
+(void)transitionWithView:(UIView *)view duration:(NSTimeInterval)duration options:(UIViewAnimationOptions)options animations:(void (^)(void))animations completion:(void (^)(BOOL finished))completion
參數(shù)解析:
duration:動(dòng)畫的持續(xù)時(shí)間
view:需要進(jìn)行轉(zhuǎn)場(chǎng)動(dòng)畫的視圖
options:轉(zhuǎn)場(chǎng)動(dòng)畫的類型
animations:將改變視圖屬性的代碼放在這個(gè)block中
completion:動(dòng)畫結(jié)束后躏将,會(huì)自動(dòng)調(diào)用這個(gè)block
+(void)transitionFromView:(UIView *)fromView toView:(UIView *)toView duration:(NSTimeInterval)duration options:(UIViewAnimationOptions)options completion:(void (^)(BOOL finished))completion
方法調(diào)用完畢后,相當(dāng)于執(zhí)行了下面兩句代碼:
// 添加toView到父視圖
[fromView.superview addSubview:toView];
// 把fromView從父視圖中移除
[fromView.superview removeFromSuperview];
參數(shù)解析:
duration:動(dòng)畫的持續(xù)時(shí)間
options:轉(zhuǎn)場(chǎng)動(dòng)畫的類型
animations:將改變視圖屬性的代碼放在這個(gè)block中
completion:動(dòng)畫結(jié)束后考蕾,會(huì)自動(dòng)調(diào)用這個(gè)block
##二祸憋、然后我們簡(jiǎn)單了解一下各種動(dòng)畫
###1. 移動(dòng)
關(guān)于移動(dòng)我們有很多方式來移動(dòng)UIview,可以自己手動(dòng)計(jì)算坐標(biāo)如:
CGPoint labelorigin = _label.center;
labelorigin.x = labelorigin.x + 100;
labelorigin.y = labelorigin.y + 200;
[UIView animateWithDuration:3 animations:^{
_label.center = labelorigin;
}];
同樣可以使用[ios](http://lib.csdn.net/base/ios)提供給我們的方法肖卧! 首先是
_label.transform = CGAffineTransformTranslate(_label.transform, 0, 10);
1
或者是
_label.transform = CGAffineTransformMakeTranslation(0, 10);
上面的CGAffineTransformTranslate是在上一位置得中心點(diǎn)為起始參照
CGAffineTransformMakeTranslation每次都是以最初位置的中心點(diǎn)為起始參照
demo如下:
[UIView animateWithDuration: 0.5 delay: 0.35 options: UIViewAnimationOptionCurveEaseIn animations: ^{
_label.transform = CGAffineTransformTranslate(_label.transform, 0, 10);
} completion: ^(BOOL finished) {
[UIView animateWithDuration: 0.2 animations: ^{
_label.alpha = 0;
}];
}];
###2.旋轉(zhuǎn)
旋轉(zhuǎn)的處理方式有很多蚯窥,這里我們暫時(shí)只介紹一下iOS提供給我們的方法
CGAffineTransformRotate(_label.transform, -0.5*M_PI);
CGAffineTransformMakeRotation(M_PI);
區(qū)分方式與上一小節(jié)的移動(dòng)相似
這里有些地方需要我們注意一下!
(1)M_PI是π塞帐,iOS 提供給我們多個(gè)M_PI拦赠,M_PI_2,M_PI_4等葵姥,使用時(shí)需要根據(jù)需求進(jìn)行篩選荷鼠;
(2)在使用CGAffineTransformRotate和CGAffineTransformMakeRotation的時(shí)候需要注意“-0.5*M_PI”代表逆時(shí)針旋轉(zhuǎn)90°,當(dāng)“1.5*M_PI”時(shí)也表示逆時(shí)針旋轉(zhuǎn)90°而不是順時(shí)針旋轉(zhuǎn)270°榔幸,當(dāng)使用“2*M_PI”時(shí)允乐,則不會(huì)進(jìn)行旋轉(zhuǎn),也就是說使用這兩個(gè)方法表明所有的旋轉(zhuǎn)都將在順時(shí)針或逆時(shí)針0~180°中進(jìn)行削咆。也許有時(shí)候需要旋轉(zhuǎn)一周牍疏,解決方法會(huì)在后續(xù)博客中更新。
###3. 縮放
_label.transform = CGAffineTransformScale(_label.transform, 0.9, 0.9);
_label.transform = CGAffineTransformMakeScale(1.2, 1.2);
區(qū)分方式與上一小節(jié)的移動(dòng)相似
使用時(shí)注意CGAffineTransformMakeScale和CGAffineTransformScale的兩個(gè)參數(shù)分別是寬和高縮放的比例
##三拨齐、然后我們了解一下不同的動(dòng)畫效果
UIViewAnimationOptionCurveEaseInOut //先加速后減速鳞陨,默認(rèn)
UIViewAnimationOptionCurveEaseIn //由慢到快
UIViewAnimationOptionCurveEaseOut //由快到慢
UIViewAnimationOptionCurveLinear //勻速
tap:在模擬器運(yùn)行狀態(tài)下,點(diǎn)擊上面的菜單欄 DEBUG -> Slow Animation 或者快捷鍵 command + T瞻惋,這會(huì)放慢我們app的動(dòng)畫運(yùn)行速度
大家可以通過實(shí)驗(yàn)來解決厦滤。
然后是Transitioning 轉(zhuǎn)場(chǎng)動(dòng)畫的類型
除了上面提到的這些效果援岩,在視圖、圖片切換的時(shí)候掏导,我們還能通過傳入下面的這些參數(shù)來實(shí)現(xiàn)一些特殊的動(dòng)畫效果窄俏。
UIViewAnimationOptionTransitionNone //沒有效果,默認(rèn)
UIViewAnimationOptionTransitionFlipFromLeft //從左翻轉(zhuǎn)效果
UIViewAnimationOptionTransitionFlipFromRight //從右翻轉(zhuǎn)效果
UIViewAnimationOptionTransitionCurlUp //從上往下翻頁
UIViewAnimationOptionTransitionCurlDown //從下往上翻頁
UIViewAnimationOptionTransitionCrossDissolve //舊視圖溶解過渡到下一個(gè)視圖
UIViewAnimationOptionTransitionFlipFromTop //從上翻轉(zhuǎn)效果
UIViewAnimationOptionTransitionFlipFromBottom //從上翻轉(zhuǎn)效果```
四碘菜、最后
給大家上一個(gè)動(dòng)圖
這些也只是動(dòng)畫之路的開端,后續(xù)我會(huì)為大家更新更多的動(dòng)畫知識(shí)限寞!
這些也只是動(dòng)畫之路的開端忍啸,后續(xù)我會(huì)為大家更新更多的動(dòng)畫知識(shí)!