iOS 常见基础动画

1: 转场动画
  • 单个视图过度:当改变视图的某些属性需要加上动画效果时使用
    view.backgroundColor = [UIColor redColor];
    [UIView transitionWithView:view duration:1.0f options:UIViewAnimationOptionTransitionCurlDown | UIViewAnimationOptionCurveEaseOut animations:^{
        view.backgroundColor = [UIColor greenColor];
    } completion:^(BOOL finished) {
    }];
  • 多个视图过度:当我们需要实现类似隐藏 A 视图显示 B 视图时使用
    [UIView transitionFromView:fromView toView:toView duration:1.0f options:UIViewAnimationOptionTransitionCurlDown | UIViewAnimationOptionCurveEaseOut completion:^(BOOL finished) {
        
    }];

options 参数指示动画的效果,常见可使用于转场动画属性,其中动画速度与转场类型可使用 | 方法,两种效果都有
UIViewAnimationOptions 是一个 NS_OPTIONS 枚举
其中 0 << 16,0 << 24是一个标志位
我们可以通过 UIViewAnimationOptionsXXX & 0 << 16 来确定究竟是哪一个动画速度控制枚举,UIViewAnimationOptionsXXX & 0 << 24 来确定究竟是哪一个动画转场类型枚举

    // 动画速度控制(可从其中选择一个设置)时间函数曲线相关**时间曲线函数**
    // 0 << 16 开始
    UIViewAnimationOptionCurveEaseInOut:动画先缓慢,然后逐渐加速。
    UIViewAnimationOptionCurveEaseIn :动画逐渐变慢。
    UIViewAnimationOptionCurveEaseOut:动画逐渐加速。
    UIViewAnimationOptionCurveLinear :动画匀速执行,默认值。
    // 转场类型(仅适用于转场动画设置,可以从中选择一个进行设置,基本动画、关键帧动画不需要设置)**转场动画相关的**
    // 0 << 20 开始
    UIViewAnimationOptionTransitionNone:没有转场动画效果。
    UIViewAnimationOptionTransitionFlipFromLeft :从左侧翻转效果。
    UIViewAnimationOptionTransitionFlipFromRight:从右侧翻转效果。
    UIViewAnimationOptionTransitionCurlUp:向后翻页的动画过渡效果。
    UIViewAnimationOptionTransitionCurlDown :向前翻页的动画过渡效果。
    UIViewAnimationOptionTransitionCrossDissolve:旧视图溶解消失显示下一个新视图的效果。
    UIViewAnimationOptionTransitionFlipFromTop :从上方翻转效果。    
    UIViewAnimationOptionTransitionFlipFromBottom:从底部翻转效果。
2:弹簧动画

在 iOS 开发中有时我们需要展示视图的位置变化但是仅仅是位置变化动画有些生硬,这时候可以加弹簧动画!类似于一个球掉在地上会弹一下的那种效果

        [UIView animateWithDuration:1.f     /* 动画时长 */
                              delay:0.f     /* 延时 */
             usingSpringWithDamping:0.3f    /* 弹性 */
              initialSpringVelocity:0.3f    /* 初始速度 */
                            options:kNilOptions animations:^{
                                tap.view.frame = frame;
                            }
                         completion:^(BOOL finished) {
                             
                         }];
3:关键帧动画
  • 基础变换动画
    分三种,缩放动画,旋转动画,平移动画
- (void)doAnimation:(kRHAnimationType) type atView:(UIView *)view {
    CABasicAnimation *basicAnimation = [CABasicAnimation animation];
    
    switch (type) {
        case kRHAnimationTypeBounds:
            // 缩放动画
            basicAnimation.keyPath = @"bounds";
            basicAnimation.toValue = [NSValue valueWithCGRect:kEndFrame];
            break;
        case kRHAnimationTypeTransform:
            // 旋转动画
            basicAnimation.keyPath = @"transform";
            basicAnimation.toValue = [NSValue valueWithCATransform3D:CATransform3DMakeRotation(M_PI, 1, 1, 0)];
            break;
        case kRHAnimationTypePosition:
            // 平移动画
            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,动画组合,平移,缩放,旋转组合动画!
- (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; // 恢复原态
    animationGroup.removedOnCompletion = NO;
    [tap.view.layer addAnimation:animationGroup forKey:@"animationGroup"];
}

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

  • 按照轨迹变化动画
// 贝塞尔曲线轨迹运动
- (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;
    
    // 动画的执行节奏
    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];
}

// 按照点的 value 轨迹运动
- (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:一般动画

最常用的一般动画效果,设置视图的frame 或者其他变化,设置动画时间

    [UIView animateWithDuration:0.8f animations:^{
    }];
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 199,711评论 5 468
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 83,932评论 2 376
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 146,770评论 0 330
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 53,799评论 1 271
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 62,697评论 5 359
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,069评论 1 276
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,535评论 3 390
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,200评论 0 254
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,353评论 1 294
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,290评论 2 317
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,331评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,020评论 3 315
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,610评论 3 303
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,694评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,927评论 1 255
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,330评论 2 346
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 41,904评论 2 341

推荐阅读更多精彩内容

  • 先看看CAAnimation动画的继承结构 CAAnimation{ CAPropertyAnimation { ...
    时间不会倒着走阅读 1,633评论 0 1
  • 在iOS中随处都可以看到绚丽的动画效果,实现这些动画的过程并不复杂,今天将带大家一窥ios动画全貌。在这里你可以看...
    每天刷两次牙阅读 8,438评论 6 30
  • 在iOS中随处都可以看到绚丽的动画效果,实现这些动画的过程并不复杂,今天将带大家一窥iOS动画全貌。在这里你可以看...
    F麦子阅读 5,083评论 5 13
  • 动画的继承结构 CAAnimation{CAPropertyAnimation{CABasicAnimation{...
    早起的虫儿子被鸟吃阅读 867评论 0 1
  • 在iOS实际开发中常用的动画无非是以下四种:UIView动画,核心动画,帧动画,自定义转场动画。 1.UIView...
    请叫我周小帅阅读 3,069评论 1 23