整個動圖
UIView動畫是在我們的工程中比較常用的動畫,比如當我們不喜歡系統(tǒng)的彈窗而自定義彈窗的時候,如果不用UIView動畫,那么視圖的彈出會很突然,用戶體驗會很不好.而且即便是沒有用到自定義視圖,在我們的工程中加入一些動畫效果也是很炫酷的,所以UIView動畫還是比較重要的.那么,就讓我們學好它吧 >_<
使用UIView動畫有兩種方式,基本方式和代碼塊的方式,我們先從基本方式開始
// 開始動畫
[UIView beginAnimations:nil context:nil];
//這里需要注意一下,所有的動畫代碼都必須放在Begin和Commit之間
//在這里我們就可以改變控件的尺寸和位置,例如:
CGPoint point = _imageView.center;
point.y += 150;
[_imageView setCenter:point];
//其他的一些方法及屬性的設置
// 設置動畫曲線,默認是勻速進行:
+ (void)setAnimationCurve:(UIViewAnimationCurve)curve;
// 設置動畫時長:
+ (void)setAnimationDuration:(NSTimeInterval)duration;
// 默認為YES梗劫。為NO時跳過動畫效果,直接跳到執(zhí)行后的狀態(tài)嘱么。
+ (void)setAnimationsEnabled:(BOOL)enabled;
// 設置動畫延遲執(zhí)行(delay:秒為單位):
+ (void)setAnimationDelay:(NSTimeInterval)delay;
// 動畫的重復播放次數(shù)
+ (void)setAnimationRepeatCount:(float)repeatCount;
// 如果為YES纺且,逆向(相反)動畫效果难述,結束后返回動畫逆向前的狀態(tài); 默認為NO:
+ (void)setAnimationRepeatAutoreverses:(BOOL)repeatAutoreverses;
// 設置動畫代理:
+ (void)setAnimationDelegate:(id)delegate;
// 動畫將要開始時執(zhí)行方法××(必須要先設置動畫代理):
+ (void)setAnimationWillStartSelector:(SEL)selector;
// 動畫已結束時執(zhí)行方法××(必須要先設置動畫代理):
+ (void)setAnimationDidStopSelector:(SEL)selector;
/**
* 設置動畫過渡效果
*
* @param transition 動畫的過渡效果
* @param view 過渡效果作用視圖
* @param cache 如果為YES,開始和結束視圖分別渲染一次并在動畫中創(chuàng)建幀胀茵;否則社露,視圖將會渲染每一幀。例如琼娘,你不需要在視圖轉變中不停的更新峭弟,你只需要等到轉換完成再去更新視圖。
*/
+ (void)setAnimationTransition:(UIViewAnimationTransition)transition forView:(UIView *)view cache:(BOOL)cache;
// 刪除所有動畫層
// 注意:層指的是layout脱拼,例:[_imageView.layer removeAllAnimations];
- (void)removeAllAnimations;
// 提交動畫
[UIView commitAnimations];
需要說明的是瞒瘸,UIViewAnimationCurve 表示動畫的變化規(guī)律:
UIViewAnimationCurveEaseInOut: 開始和結束時較慢
UIViewAnimationCurveEase: 開始時較慢
UIViewAnimationCurveEaseOut: 結束時較慢
UIViewAnimationCurveLinear: 整個過程勻速進行
具體效果可參考下圖:
參考圖
使用UIView的動畫塊代碼:
方法一:
[UIView animateWithDuration:4.0 // 動畫時長
animations:^{
// code
}];
方法二:
[UIView animateWithDuration:4.0 // 動畫時長
animations:^{
// code...
}
completion:^(BOOL finished) {
// 動畫完成后執(zhí)行
// code...
}];
方法三:
[UIView animateWithDuration:4.0 // 動畫時長
delay:2.0 // 動畫延遲
options:UIViewAnimationOptionCurveEaseIn // 動畫過渡效果
animations:^{
// code...
}
completion:^(BOOL finished) {
// 動畫完成后執(zhí)行
// code...
}];
方法四,Spring Animationring Animation:
在IOS7開始熄浓,系統(tǒng)動畫效果廣泛應用Spring Animation :
[UIView animateWithDuration:4.0 // 動畫時長
delay:0.0 // 動畫延遲
usingSpringWithDamping:1.0 // 類似彈簧振動效果 0~1
initialSpringVelocity:5.0 // 初始速度 options:UIViewAnimationOptionCurveEaseInOut // 動畫過渡效果
animations:^{
// code...
CGPoint point = _imageView.center;
point.y += 150;
[_imageView setCenter:point];
} completion:^(BOOL finished) {
// 動畫完成后執(zhí)行
// code...
[_imageView setAlpha:1];
}];
這里需要注意一下usingSpringWithDamping:它的范圍為 0.0f 到 1.0f 挨务,數(shù)值越小「彈簧」的振動效果越明顯。
initialSpringVelocity:初始的速度玉组,數(shù)值越大一開始移動越快。但是丁侄,初始速度取值較高而時間較短時惯雳,也會出現(xiàn)反彈情況。
Spring Animation 是線性動畫或 ease-out 動畫的理想替代品鸿摇。由于 iOS 本身大量使用的就是 Spring Animation石景,用戶已經(jīng)習慣了這種動畫效果,因此使用它能使 App 讓人感覺更加自然拙吉,用 Apple 的話說就是「instantly familiar」潮孽。此外,Spring Animation 不只能對位置使用筷黔,它適用于所有可被添加動畫效果的屬性往史。
方法五,關鍵幀動畫:
UIView動畫已經(jīng)具備高級的方法來創(chuàng)建動畫佛舱,而且可以更好地理解和構建動畫椎例。IOS7以后蘋果新加了一個animateKeyframesWithDuration的方法,我們可以使用它來創(chuàng)建更多更復雜更酷炫的動畫效果请祖,而不需要去使用到核心動畫(CoreAnimatino)订歪。
創(chuàng)建關鍵幀方法:
/**
* 添加關鍵幀方法
*
* @param duration 動畫時長
* @param delay 動畫延遲
* @param options 動畫效果選項
* @param animations 動畫執(zhí)行代碼
* @param completion 動畫結束執(zhí)行代碼
*/
+ (void)animateKeyframesWithDuration:(NSTimeInterval)duration
delay:(NSTimeInterval)delay
options:(UIViewKeyframeAnimationOptions)options
animations:(void (^)(void))animations
completion:(void (^)(BOOL finished))completion;
添加關鍵幀方法:
/**
* 添加關鍵幀
*
* @param frameStartTime 動畫相對開始時間
* @param frameDuration 動畫相對持續(xù)時間
* @param animations 動畫執(zhí)行代碼
*/
+ (void)addKeyframeWithRelativeStartTime:(double)frameStartTime
relativeDuration:(double)frameDuration
animations:(void (^)(void))animations;
以上說的相對時間,也就是說:“它們自身會根據(jù)動畫總持續(xù)時長自動匹配其運行時長”肆捕。
下面用一個簡單的示例作解答刷晋,彩虹變化視圖:
void (^keyFrameBlock)() = ^(){
// 創(chuàng)建顏色數(shù)組
NSArray *arrayColors = @[[UIColor orangeColor],
[UIColor yellowColor],
[UIColor greenColor],
[UIColor blueColor],
[UIColor purpleColor],
[UIColor redColor]];
NSUInteger colorCount = [arrayColors count];
// 循環(huán)添加關鍵幀
for (NSUInteger i = 0; i < colorCount; i++) {
[UIView addKeyframeWithRelativeStartTime:i / (CGFloat)colorCount
relativeDuration:1 / (CGFloat)colorCount
animations:^{
[_graduallyView setBackgroundColor:arrayColors[i]];
}];
}
};
[UIView animateKeyframesWithDuration:4.0
delay:0.0
options:UIViewKeyframeAnimationOptionCalculationModeCubic | UIViewAnimationOptionCurveLinear
animations:keyFrameBlock
completion:^(BOOL finished) {
// 動畫完成后執(zhí)行
// code...
}];
那么UIViewKeyframeAnimationOptions里面的屬性都有哪些呢?接下來解釋一下
UIViewAnimationOptionLayoutSubviews //進行動畫時布局子控件
UIViewAnimationOptionAllowUserInteraction //進行動畫時允許用戶交互
UIViewAnimationOptionBeginFromCurrentState //從當前狀態(tài)開始動畫
UIViewAnimationOptionRepeat //無限重復執(zhí)行動畫
UIViewAnimationOptionAutoreverse //執(zhí)行動畫回路
UIViewAnimationOptionOverrideInheritedDuration //忽略嵌套動畫的執(zhí)行時間設置
UIViewAnimationOptionOverrideInheritedOptions //不繼承父動畫設置
UIViewKeyframeAnimationOptionCalculationModeLinear //運算模式 :連續(xù)
UIViewKeyframeAnimationOptionCalculationModeDiscrete //運算模式 :離散
UIViewKeyframeAnimationOptionCalculationModePaced //運算模式 :均勻執(zhí)行
UIViewKeyframeAnimationOptionCalculationModeCubic //運算模式 :平滑
UIViewKeyframeAnimationOptionCalculationModeCubicPaced //運算模式 :平滑均勻
方法六,transitionWithView動畫
-(void)transitionAnimation{
[UIView transitionWithView:self.anView duration:1.0 options:UIViewAnimationOptionTransitionFlipFromLeft animations:^{
//self.anView.backgroundColor = [UIColor blueColor];
} completion:^(BOOL finished) {
[UIView transitionWithView:self.anView duration:1.0 options:UIViewAnimationOptionTransitionFlipFromRight animations:^{
//self.anView.backgroundColor = [UIColor greenColor];
} completion:^(BOOL finished) {
}];
}];
}
這里還要解釋下UIViewAnimationOptions中包含的屬性各是什么意思:
UIViewAnimationOptionLayoutSubviews //進行動畫時布局子控件
UIViewAnimationOptionAllowUserInteraction //進行動畫時允許用戶交互
UIViewAnimationOptionBeginFromCurrentState //從當前狀態(tài)開始動畫
UIViewAnimationOptionRepeat //無限重復執(zhí)行動畫
UIViewAnimationOptionAutoreverse //執(zhí)行動畫回路
UIViewAnimationOptionOverrideInheritedDuration //忽略嵌套動畫的執(zhí)行時間設置
UIViewAnimationOptionOverrideInheritedCurve //忽略嵌套動畫的曲線設置
UIViewAnimationOptionAllowAnimatedContent //轉場:進行動畫時重繪視圖
UIViewAnimationOptionShowHideTransitionViews //轉場:移除(添加和移除圖層的)動畫效果
UIViewAnimationOptionOverrideInheritedOptions //不繼承父動畫設置
UIViewAnimationOptionCurveEaseInOut //時間曲線,慢進慢出(默認值)
UIViewAnimationOptionCurveEaseIn //時間曲線,慢進
UIViewAnimationOptionCurveEaseOut //時間曲線眼虱,慢出
UIViewAnimationOptionCurveLinear //時間曲線喻奥,勻速
UIViewAnimationOptionTransitionNone //轉場,不使用動畫
UIViewAnimationOptionTransitionFlipFromLeft //轉場蒙幻,從左向右旋轉翻頁
UIViewAnimationOptionTransitionFlipFromRight //轉場映凳,從右向左旋轉翻頁
UIViewAnimationOptionTransitionCurlUp //轉場,下往上卷曲翻頁
UIViewAnimationOptionTransitionCurlDown //轉場邮破,從上往下卷曲翻頁
UIViewAnimationOptionTransitionCrossDissolve //轉場诈豌,交叉消失和出現(xiàn)
UIViewAnimationOptionTransitionFlipFromTop //轉場,從上向下旋轉翻頁
UIViewAnimationOptionTransitionFlipFromBottom //轉場抒和,從下向上旋轉翻頁
transitionWithView動畫