iOS核心动画CoreAnimation系统进阶(转场动画&组动画)

最新推荐文章于 2022-08-24 10:19:00 发布

原创最新推荐文章于 2022-08-24 10:19:00 发布 · 306 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#iOS #CAAnimationGroup

iOS进阶同时被 2 个专栏收录

94 篇文章

订阅专栏

iOS核心动画

12 篇文章

订阅专栏

本文详细介绍了如何使用Core Animation中的CATransition进行转场动画，包括设置动画类型、进度等，并演示了如何创建复杂的动画组合，如贝塞尔曲线动画、关键帧动画和颜色变化动画。此外，还展示了如何利用动画组简化动画代码。

CATransition

这里写图片描述

核心代码

//转场动画:默认淡入淡出
    CATransition *anim =[CATransition animation];
    anim.type =@"suckEffect";//从父视图的左上角收缩
    anim.startProgress =.5;//从动画进程的一半开始
    anim.startProgress =.8;//从动画进程的百分之八十结束
    [_imgView.layer addAnimation:anim forKey:nil];

动画组

在不使用动画组的情况下

//绘制贝塞尔曲线
    UIBezierPath *path =[UIBezierPath bezierPath];
    [path moveToPoint:CGPointMake(50, 500)];
    [path addCurveToPoint:CGPointMake(350, 500) controlPoint1:CGPointMake(170, 400) controlPoint2:CGPointMake(220, 300) ];
    //添加到layer
    CAShapeLayer * shapeLayer =[CAShapeLayer layer];
    shapeLayer.path = path.CGPath;
    shapeLayer.fillColor = nil;
    shapeLayer.strokeColor =[UIColor orangeColor].CGColor;
    [self.view.layer addSublayer:shapeLayer];

    //添加灰色方块
    CALayer * colorLayer =[CALayer layer];
    colorLayer.frame = CGRectMake(0, 0, 30, 30);
    colorLayer.position = CGPointMake(50, 500);
    colorLayer.backgroundColor =[UIColor grayColor].CGColor;
    [self.view.layer addSublayer:colorLayer];

    //添加关键帧动画
    CAKeyframeAnimation * anim=[CAKeyframeAnimation animation];
    anim.path = path.CGPath;
    anim.keyPath =@"position";
    anim.duration = 3;
    [colorLayer addAnimation:anim forKey:nil];

    //添加基础动画-动态改变颜色
    CGFloat red =arc4random() /(CGFloat)INT_MAX;
    CGFloat green =arc4random() /(CGFloat)INT_MAX;
    CGFloat blue =arc4random() /(CGFloat)INT_MAX;
    CABasicAnimation * basicAnim =[CABasicAnimation animation];
    UIColor * color =[UIColor colorWithRed:red green:green blue:blue alpha:1];
    basicAnim.keyPath =@"backgroundColor";
    basicAnim.toValue = (id)color.CGColor;
    basicAnim.duration = 3;
    [colorLayer addAnimation:basicAnim forKey:nil];

    //改变大小
    CABasicAnimation * anim1 =[CABasicAnimation animation];
    anim1.keyPath = @"transform.scale";
    anim1.toValue =@.2;
    anim1.duration = 3;
    [colorLayer addAnimation:anim1 forKey:nil];

使用动画组

CAAnimationGroup * group =[CAAnimationGroup animation];
    group.animations = @[anim1,anim,basicAnim];
    group.duration = 3;
    [colorLayer addAnimation:group forKey:nil];

优点是我们没必要写一些重复的属性.

效果图
这里写图片描述