美文网首页
iOS 常见基础动画

iOS 常见基础动画

作者: 一只代码狗 | 来源:发表于2017-11-21 18:39 被阅读35次
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:^{
    }];

相关文章

网友评论

      本文标题:iOS 常见基础动画

      本文链接:https://www.haomeiwen.com/subject/kdvwvxtx.html