• Objective-C 使用核心动画CAAnimation实现动画


    先来看看效果吧

    动画效果.gif

    整个核心动画就不多做介绍了,随便一搜就能有很多很详细的解释,主要使用以下四种

    CABasicAnimation          //经典动画
    CAKeyframeAnimation       //关键帧动画
    CATransition              //转场动画
    CAAnimationGroup          //组动画
    

    分析下本次demo的动画构成

    主要动画是对音频控制面板的操作。

    • 分解
      • 看做两个view 一个是播放面板的小圆 一个是整个控制面板
      • 播放面板的曲线运动 使用核心动画中的 CAKeyframeAnimation
      • 播放面板的变大缩小、控制面板消失出现 使用CABasicAnimation并加入组动画序列CAAnimationGroup
      • 歌曲信息面板的消失和出现

    bounds动画
    对播放面板进行变大和变小,下面是变小,变大同理。

    //startView变小
    - (void)startViewChangeSmaller {
    
        //设置一组动画
        //变小
        CABasicAnimation *animation1 = [[CABasicAnimation alloc] init];
        animation1.keyPath = @"bounds";
        animation1.toValue = [NSValue valueWithCGRect:CGRectMake(0, 0, kStartRadius*2, kStartRadius*2)];
        //变圆
        CABasicAnimation *animation2 = [[CABasicAnimation alloc] init];
        animation2.keyPath = @"cornerRadius";
        animation2.toValue = [NSNumber numberWithFloat:kStartRadius];
        //加入组动画
        CAAnimationGroup *group = [[CAAnimationGroup alloc] init];
        group.animations = @[animation1,animation2];
        group.removedOnCompletion = NO;
        group.fillMode = kCAFillModeForwards;
        group.duration = kAnimationDuration;
        group.delegate = self;
        [self.startView.layer addAnimation:group forKey:nil];
        self.layer.masksToBounds = YES;
        
        [self performSelector:@selector(startViewBackAnimation) withObject:nil afterDelay:kAnimationDuration];
    }
    

    曲线动画
    这里我们使用的是贝塞尔曲线 先说代码

    //通过曲线路径将startView移到中间
    - (void)startViewToCenter {
        
        //设置贝塞尔曲线路径动画
        UIBezierPath *path = [UIBezierPath bezierPath];
        [path moveToPoint:self.startView.center];
        [path addCurveToPoint:CGPointMake(self.frame.size.width/2, self.frame.size.height/2 ) controlPoint1:CGPointMake(self.frame.size.width - kStartRadius, 0 ) controlPoint2:CGPointMake(self.frame.size.width * 1.3, self.frame.size.height/2)];
        CAKeyframeAnimation *anmiation0 = [CAKeyframeAnimation animationWithKeyPath:@"position"];
        anmiation0.path = path.CGPath;
        anmiation0.duration = kAnimationDuration;
        anmiation0.removedOnCompletion = NO;
        anmiation0.fillMode = kCAFillModeForwards;
        [self.startView.layer addAnimation:anmiation0 forKey:nil];
        [self performSelector:@selector(startViewChangeAnimation) withObject:nil afterDelay:1];
    }
    

    这里就要提到贝塞尔曲线的控制点了,这里有个简单的方法去定义曲线。

    • 打开PS 或者其他制图软件
    • 使用钢笔画一条线,通过拖动控制点(锚点)就能更改成曲线的样子
    • 二阶的贝塞尔曲线是有2个控制点
      二阶贝塞尔曲线控制点.png
    • 切换钢笔工具为锚点选择工具,我们来拖动锚点,让曲线变成你想要的样子
      选择锚点工具拖动锚点变换曲线.png
    • 知道控制点的大概位置这样我们就能定义控制点坐标了。

    最后的小贴士:view超出superview的范围了怎么办?

    很简单给当前view添加一个响应函数

    //响应超出view的事件
    - (BOOL)pointInside:(CGPoint)point withEvent:(UIEvent *)event {
        return YES;
    }
    

    再试试看 超出部分的button也可以点击了!

    Demo地址

    https://github.com/gongxiaokai/CAAnimationDemo

  • 相关阅读:
    NOIP模拟 10
    无聊的 邮递员 插头dp
    类实例化对象可以访问静态(static)方法,但是不能访问静态属性。
    PHP——抽象类与接口的区别
    工厂模式
    win10 专业版 git bash 闪退问题终极解决方案
    git基本的使用原理
    排序算法-插入排序
    如何进行CodeReview
    php中的各种http报错的报错的状态码的分析
  • 原文地址:https://www.cnblogs.com/gongxiaokai/p/7123817.html
Copyright © 2020-2023  润新知