iOS 動(dòng)畫--UIView動(dòng)畫

首先看一下官方文檔對(duì)UIView動(dòng)畫的一些說(shuō)明

Changes to several view properties can be animated—that is, changing the property creates an animation starting at the current value and ending at the new value that you specify. The following properties of the UIView class are animatable:

  • frame
  • bounds
  • center
  • alpha
  • backgroundColor

改變view的一些屬性可以產(chǎn)生動(dòng)畫效果,也就是說(shuō),這種動(dòng)畫是從屬性的初始值開始,到給定的新值為止。以下幾個(gè)屬性是可動(dòng)畫屬性:frame、bounds、center、alpha、backgroundColor

我們可以使用系統(tǒng)提供的UIView的類方法實(shí)現(xiàn)動(dòng)畫效果,通過(guò)方法中的參數(shù)來(lái)設(shè)置時(shí)長(zhǎng)、延遲等值

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

+ (void)animateWithDuration:(NSTimeInterval)duration animations:(void (^)(void))animations completion:(void (^ __nullable)(BOOL finished))completion NS_AVAILABLE_IOS(4_0); // delay = 0.0, options = 0

+ (void)animateWithDuration:(NSTimeInterval)duration animations:(void (^)(void))animations NS_AVAILABLE_IOS(4_0); // delay = 0.0, options = 0, completion = NULL

duration:動(dòng)畫時(shí)長(zhǎng)
delay:延遲時(shí)間
options:動(dòng)畫的展示方式
animation:需要進(jìn)行怎樣的動(dòng)畫
completion:動(dòng)畫完成后執(zhí)行
另外在iOS7之后,又提供了兩個(gè)關(guān)鍵幀動(dòng)畫方法:

+ (void)animateKeyframesWithDuration:(NSTimeInterval)duration delay:(NSTimeInterval)delay options:(UIViewKeyframeAnimationOptions)options animations:(void (^)(void))animations completion:(void (^ __nullable)(BOOL finished))completion NS_AVAILABLE_IOS(7_0);
+ (void)addKeyframeWithRelativeStartTime:(double)frameStartTime relativeDuration:(double)frameDuration animations:(void (^)(void))animations NS_AVAILABLE_IOS(7_0); 

以及一些轉(zhuǎn)場(chǎng)動(dòng)畫的方法

參數(shù)

這些方法,傳入不同參數(shù),會(huì)得出不同的動(dòng)畫效果:

option
  • Repeating
    UIViewAnimationOptionRepeat:動(dòng)畫循環(huán)執(zhí)行
    UIViewAnimationOptionAutoreverse:動(dòng)畫執(zhí)行完之后會(huì)反向再執(zhí)行一次
    如果選擇了動(dòng)畫循環(huán)執(zhí)行這一option,則程序不會(huì)執(zhí)行后續(xù)的completion block代碼塊

  • Easing
    這一組option給出了動(dòng)畫加速或減速的規(guī)則:
    UIViewAnimationOptionCurveEaseInOut先加速后減速,默認(rèn)情況
    UIViewAnimationOptionCurveEaseIn由慢到快
    UIViewAnimationOptionCurveEaseOut由快到慢
    UIViewAnimationOptionCurveLinear勻速
    如圖所示,修改view的frame,動(dòng)畫執(zhí)行時(shí)間都是3秒,選擇了不同的option,效果不同:

    Ease.gif

    同樣,修改alpha時(shí)(如圖是alpha值從1到0.2),效果也類似:
    Ease_alpha.gif

  • Transitioning
    UIViewAnimationOptionTransitionNone 沒(méi)有效果,默認(rèn)
    UIViewAnimationOptionTransitionFlipFromLeft 從左翻轉(zhuǎn)效果
    UIViewAnimationOptionTransitionFlipFromRight 從右翻轉(zhuǎn)效果
    UIViewAnimationOptionTransitionCurlUp 從上往下翻頁(yè)
    UIViewAnimationOptionTransitionCurlDown 從下往上翻頁(yè)
    UIViewAnimationOptionTransitionCrossDissolve 舊視圖溶解過(guò)渡到下一個(gè)視圖
    UIViewAnimationOptionTransitionFlipFromTop 從上翻轉(zhuǎn)效果
    UIViewAnimationOptionTransitionFlipFromBottom 從上翻轉(zhuǎn)效果
    這些參數(shù)只能在視圖切換的時(shí)候使用,比如為一個(gè)UIImageView切換圖片,移動(dòng)view時(shí)不能使用。所以應(yīng)該使用transition開頭的方法

NSArray *optionArray  = @[@(UIViewAnimationOptionTransitionNone),
                              @(UIViewAnimationOptionTransitionFlipFromLeft),
                              @(UIViewAnimationOptionTransitionFlipFromRight),
                              @(UIViewAnimationOptionTransitionCurlUp),
                              @(UIViewAnimationOptionTransitionCurlDown),
                              @(UIViewAnimationOptionTransitionCrossDissolve),
                              @(UIViewAnimationOptionTransitionFlipFromTop),
                              @(UIViewAnimationOptionTransitionFlipFromBottom)];
    for (int i = 0;i < TransitionCount;i ++) {
        UIImageView *subBall = self.imgArray[i];
        [UIView transitionWithView:subBall duration:3 options:[optionArray[i] integerValue] animations:^{
            subBall.image = [UIImage imageNamed:@"leilei1"];
        } completion:nil];
    }

以上代碼可以實(shí)現(xiàn)如圖效果,圖片從有小哥哥的一面翻到?jīng)]有的一面,動(dòng)畫時(shí)長(zhǎng)3秒:


transition.gif

可以看出,切換圖片的時(shí)候,原來(lái)的圖片會(huì)以view中心為軸翻轉(zhuǎn),而且系統(tǒng)還自動(dòng)加上了陰影效果

  • 彈簧效果
    這是個(gè)比較有意思的api,可以制作出類似彈簧效果的動(dòng)畫:
+ (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ù):

  1. dampingRatio:衰減比例,取值范圍為0 -1,因?yàn)槭撬p比例,所以該值越低震動(dòng)越強(qiáng)
  2. velocity:初始化速度。值越高速度越快
    如圖所示是在velocity不變的情況下,不同dampingRatio的效果:


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

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

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