iOS 常見基礎(chǔ)動(dòng)畫

1: 轉(zhuǎn)場動(dòng)畫
  • 單個(gè)視圖過度:當(dāng)改變視圖的某些屬性需要加上動(dòng)畫效果時(shí)使用
    view.backgroundColor = [UIColor redColor];
    [UIView transitionWithView:view duration:1.0f options:UIViewAnimationOptionTransitionCurlDown | UIViewAnimationOptionCurveEaseOut animations:^{
        view.backgroundColor = [UIColor greenColor];
    } completion:^(BOOL finished) {
    }];
  • 多個(gè)視圖過度:當(dāng)我們需要實(shí)現(xiàn)類似隱藏 A 視圖顯示 B 視圖時(shí)使用
    [UIView transitionFromView:fromView toView:toView duration:1.0f options:UIViewAnimationOptionTransitionCurlDown | UIViewAnimationOptionCurveEaseOut completion:^(BOOL finished) {
        
    }];

options 參數(shù)指示動(dòng)畫的效果,常見可使用于轉(zhuǎn)場動(dòng)畫屬性,其中動(dòng)畫速度與轉(zhuǎn)場類型可使用 | 方法,兩種效果都有
UIViewAnimationOptions 是一個(gè) NS_OPTIONS 枚舉
其中 0 << 16,0 << 24是一個(gè)標(biāo)志位
我們可以通過 UIViewAnimationOptionsXXX & 0 << 16 來確定究竟是哪一個(gè)動(dòng)畫速度控制枚舉,UIViewAnimationOptionsXXX & 0 << 24 來確定究竟是哪一個(gè)動(dòng)畫轉(zhuǎn)場類型枚舉

    // 動(dòng)畫速度控制(可從其中選擇一個(gè)設(shè)置)時(shí)間函數(shù)曲線相關(guān)**時(shí)間曲線函數(shù)**
    // 0 << 16 開始
    UIViewAnimationOptionCurveEaseInOut:動(dòng)畫先緩慢,然后逐漸加速。
    UIViewAnimationOptionCurveEaseIn :動(dòng)畫逐漸變慢。
    UIViewAnimationOptionCurveEaseOut:動(dòng)畫逐漸加速。
    UIViewAnimationOptionCurveLinear :動(dòng)畫勻速執(zhí)行,默認(rèn)值。
    // 轉(zhuǎn)場類型(僅適用于轉(zhuǎn)場動(dòng)畫設(shè)置,可以從中選擇一個(gè)進(jìn)行設(shè)置,基本動(dòng)畫、關(guān)鍵幀動(dòng)畫不需要設(shè)置)**轉(zhuǎn)場動(dòng)畫相關(guān)的**
    // 0 << 20 開始
    UIViewAnimationOptionTransitionNone:沒有轉(zhuǎn)場動(dòng)畫效果。
    UIViewAnimationOptionTransitionFlipFromLeft :從左側(cè)翻轉(zhuǎn)效果。
    UIViewAnimationOptionTransitionFlipFromRight:從右側(cè)翻轉(zhuǎn)效果。
    UIViewAnimationOptionTransitionCurlUp:向后翻頁的動(dòng)畫過渡效果。
    UIViewAnimationOptionTransitionCurlDown :向前翻頁的動(dòng)畫過渡效果。
    UIViewAnimationOptionTransitionCrossDissolve:舊視圖溶解消失顯示下一個(gè)新視圖的效果。
    UIViewAnimationOptionTransitionFlipFromTop :從上方翻轉(zhuǎn)效果。    
    UIViewAnimationOptionTransitionFlipFromBottom:從底部翻轉(zhuǎn)效果。
2:彈簧動(dòng)畫

在 iOS 開發(fā)中有時(shí)我們需要展示視圖的位置變化但是僅僅是位置變化動(dòng)畫有些生硬,這時(shí)候可以加彈簧動(dòng)畫!類似于一個(gè)球掉在地上會(huì)彈一下的那種效果

        [UIView animateWithDuration:1.f     /* 動(dòng)畫時(shí)長 */
                              delay:0.f     /* 延時(shí) */
             usingSpringWithDamping:0.3f    /* 彈性 */
              initialSpringVelocity:0.3f    /* 初始速度 */
                            options:kNilOptions animations:^{
                                tap.view.frame = frame;
                            }
                         completion:^(BOOL finished) {
                             
                         }];
3:關(guān)鍵幀動(dòng)畫
  • 基礎(chǔ)變換動(dòng)畫
    分三種,縮放動(dòng)畫,旋轉(zhuǎn)動(dòng)畫,平移動(dòng)畫
- (void)doAnimation:(kRHAnimationType) type atView:(UIView *)view {
    CABasicAnimation *basicAnimation = [CABasicAnimation animation];
    
    switch (type) {
        case kRHAnimationTypeBounds:
            // 縮放動(dòng)畫
            basicAnimation.keyPath = @"bounds";
            basicAnimation.toValue = [NSValue valueWithCGRect:kEndFrame];
            break;
        case kRHAnimationTypeTransform:
            // 旋轉(zhuǎn)動(dòng)畫
            basicAnimation.keyPath = @"transform";
            basicAnimation.toValue = [NSValue valueWithCATransform3D:CATransform3DMakeRotation(M_PI, 1, 1, 0)];
            break;
        case kRHAnimationTypePosition:
            // 平移動(dòng)畫
            basicAnimation.keyPath = @"position";
            basicAnimation.toValue = [NSValue valueWithCGPoint:CGPointMake(200, 400)];
        default:
            break;
    }
    basicAnimation.duration = .8f;
    basicAnimation.removedOnCompletion = NO;
    basicAnimation.fillMode = kCAFillModeForwards;
    
    [view.layer addAnimation:basicAnimation forKey:nil];
}
  • CAAnimationGroup,動(dòng)畫組合,平移,縮放,旋轉(zhuǎn)組合動(dòng)畫!
- (void)groupAnimationAction:(UITapGestureRecognizer *)tap {
    CAAnimationGroup *animationGroup = [CAAnimationGroup animation];
    
    animationGroup.animations = @[
                                  [self animation:kRHAnimationTypeBounds],
                                  [self animation:kRHAnimationTypePosition],
                                  [self animation:kRHAnimationTypeTransform]
                                  ];
    animationGroup.duration = 1;
    animationGroup.fillMode = kCAFillModeBackwards; // 恢復(fù)原態(tài)
    animationGroup.removedOnCompletion = NO;
    [tap.view.layer addAnimation:animationGroup forKey:@"animationGroup"];
}

- (CABasicAnimation *)animation:(kRHAnimationType) type {
    CABasicAnimation *basicAnimation = [CABasicAnimation animation];
    
    switch (type) {
        case kRHAnimationTypeBounds:
            // 縮放動(dòng)畫
            basicAnimation.keyPath = @"bounds";
            basicAnimation.toValue = [NSValue valueWithCGRect:kEndFrame];
            break;
        case kRHAnimationTypeTransform:
            // 旋轉(zhuǎn)動(dòng)畫
            basicAnimation.keyPath = @"transform";
            basicAnimation.toValue = [NSValue valueWithCATransform3D:CATransform3DMakeRotation(M_PI, 1, 1, 0)];
            break;
        case kRHAnimationTypePosition:
            // 平移動(dòng)畫
            basicAnimation.keyPath = @"position";
            basicAnimation.toValue = [NSValue valueWithCGPoint:CGPointMake(200, 400)];
        default:
            break;
    }
    basicAnimation.duration = .8f;
    basicAnimation.removedOnCompletion = NO;
    basicAnimation.fillMode = kCAFillModeForwards;
    
    return basicAnimation;
}

  • 按照軌跡變化動(dòng)畫
// 貝塞爾曲線軌跡運(yùn)動(dòng)
- (void)keyFrameAnimationAction:(UITapGestureRecognizer *)tap {
    CAKeyframeAnimation * anim = [CAKeyframeAnimation animation];
    
    anim.keyPath = @"position";

    UIBezierPath *bezierPath = [UIBezierPath bezierPath];
    [bezierPath moveToPoint:tap.view.center];
    [bezierPath addCurveToPoint:CGPointMake(130, 600) controlPoint1:CGPointMake(30, 300) controlPoint2:CGPointMake(500, 500)];
    anim.path = bezierPath.CGPath;
    
    // 動(dòng)畫的執(zhí)行節(jié)奏
    anim.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseIn];
    anim.duration = 2.0f;
    anim.removedOnCompletion = NO;
    anim.fillMode = kCAFillModeForwards;
    anim.delegate = self;
    [tap.view.layer addAnimation:anim forKey:nil];
}

// 按照點(diǎn)的 value 軌跡運(yùn)動(dòng)
- (void)keyFrameAnimationAction:(UITapGestureRecognizer *)tap {
    CAKeyframeAnimation * anim = [CAKeyframeAnimation animation];
    
    anim.keyPath = @"position";
    NSValue *v1 = [NSValue valueWithCGPoint:tap.view.center];
    NSValue *v2 = [NSValue valueWithCGPoint:CGPointMake(0, 0)];
    NSValue *v3 = [NSValue valueWithCGPoint:CGPointMake(100, 300)];
    NSValue *v4 = [NSValue valueWithCGPoint:tap.view.center];
    anim.values = @[v1,v2,v3,v4];
    
    anim.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseIn];
    anim.duration = 2.0f;
    anim.removedOnCompletion = NO;
    anim.fillMode = kCAFillModeForwards;
    anim.delegate = self;
    [tap.view.layer addAnimation:anim forKey:nil];
}

4:一般動(dòng)畫

最常用的一般動(dòng)畫效果,設(shè)置視圖的frame 或者其他變化,設(shè)置動(dòng)畫時(shí)間

    [UIView animateWithDuration:0.8f animations:^{
    }];
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

推薦閱讀更多精彩內(nèi)容

  • 先看看CAAnimation動(dòng)畫的繼承結(jié)構(gòu) CAAnimation{ CAPropertyAnimation { ...
    時(shí)間不會(huì)倒著走閱讀 1,683評論 0 1
  • 在iOS中隨處都可以看到絢麗的動(dòng)畫效果,實(shí)現(xiàn)這些動(dòng)畫的過程并不復(fù)雜,今天將帶大家一窺ios動(dòng)畫全貌。在這里你可以看...
    每天刷兩次牙閱讀 8,551評論 6 30
  • 在iOS中隨處都可以看到絢麗的動(dòng)畫效果,實(shí)現(xiàn)這些動(dòng)畫的過程并不復(fù)雜,今天將帶大家一窺iOS動(dòng)畫全貌。在這里你可以看...
    F麥子閱讀 5,141評論 5 13
  • 動(dòng)畫的繼承結(jié)構(gòu) CAAnimation{CAPropertyAnimation{CABasicAnimation{...
    早起的蟲兒子被鳥吃閱讀 902評論 0 1
  • 在iOS實(shí)際開發(fā)中常用的動(dòng)畫無非是以下四種:UIView動(dòng)畫,核心動(dòng)畫,幀動(dòng)畫,自定義轉(zhuǎn)場動(dòng)畫。 1.UIView...
    請叫我周小帥閱讀 3,142評論 1 23