zoukankan      html  css  js  c++  java
  • 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

  • 相关阅读:
    Quicksum -SilverN
    uva 140 bandwidth (好题) ——yhx
    uva 129 krypton factors ——yhx
    uva 524 prime ring problem——yhx
    uva 10976 fractions again(水题)——yhx
    uva 11059 maximum product(水题)——yhx
    uva 725 division(水题)——yhx
    uva 11853 paintball(好题)——yhx
    uva 1599 ideal path(好题)——yhx
    uva 1572 self-assembly ——yhx
  • 原文地址:https://www.cnblogs.com/gongxiaokai/p/7123817.html
Copyright © 2011-2022 走看看