神刀安全网

iOS-小Demo–简单篮球沿轨迹动画

iOS-小Demo--简单篮球沿轨迹动画
西北望乡何处是,东南见月几回圆。昨风一吹无人会,今夜清光似往年!><白海师>


来句废话吧,今天好像是中秋啊!想起打球的时候,于是写一个篮球运动的轨迹动画吧,很简单!

效果图:

iOS-小Demo--简单篮球沿轨迹动画
篮球轨迹运动.gif


实现思路:

补充:

  • CAShapeLayer: 是一个可以通过矢量图形绘制图层的(CALayer)子类,我们可以通过创建 CGPath自定义的绘制出我们需要的图形,然后设置它的相关属性(strokeColor(画线颜色)、fillColor(填充颜色)、lineWidth(线宽))进行自动渲染!绘制的形状不需要闭合,我们可以在同一个图层绘制多个不一样的形状。
  • CAKeyFramAnimation: 关键帧动画这个(CAAnimation)动画子类可以实现,某一属性按照一串的数值进行动画,就好像制作动画的时候一帧一帧的制作一样。
    • 两个关键的属性:
      • Path: 这是一个 CGPathRef 对象,默认是空的,当我们创建好CAKeyframeAnimation的实例的时候,可以通过制定一个自己定义的path来让 某一个物体按照这个路径进行动画。这个值默认是nil 当其被设定的时候 values 这个属性就被覆盖
      • Values: 一个数组,提供了一组关键帧的值, 当使用path的 时候 values的值自动被忽略。

上代码:

  • 第一步: 创建轨迹路径 Path (依据个人口味创建)

    UIBezierPath *path = [UIBezierPath bezierPath]; [path moveToPoint:CGPointMake(0, 400)]; // 起点 // 设置终点 和两个控制点(拐点) [path addCurveToPoint:CGPointMake(400, 200) controlPoint1:(CGPointMake(120, 10)) controlPoint2:(CGPointMake(300, 20))];
  • 第二步:绘制运动路径轨迹

    CAShapeLayer *pathLayer = [CAShapeLayer layer]; pathLayer.path = path.CGPath;// 绘制路径 pathLayer.strokeColor = [UIColor redColor].CGColor;// 轨迹颜色 pathLayer.fillColor = [UIColor clearColor].CGColor;// 填充颜色 pathLayer.lineWidth = 5.0f; // 线宽
  • 第三步:创建关键帧动画

    CAKeyframeAnimation *pathAnimation = [CAKeyframeAnimation animationWithKeyPath:@"position"]; //pathAnimation.calculationMode = kCAAnimationPaced;// 我理解为节奏 pathAnimation.fillMode = kCAFillModeForwards; pathAnimation.removedOnCompletion = NO;// 是否在动画完成后从 Layer 层上移除  回到最开始状态 pathAnimation.duration = 3.0f;// 动画时间 pathAnimation.repeatCount = 100;// 动画重复次数
  • 第四步: 创建需要动画的篮球

    UIImageView *basketball = [[UIImageView alloc] initWithFrame:(CGRectMake(0, 400, 80, 80))]; basketball.image = [UIImage imageNamed:@"basketball"];
  • 一曲终了,一一添加上!

    [self.view addSubview:basketball]; // 添加篮球 [basketball.layer addAnimation:pathAnimation forKey:nil ];// 添加动画 [self.view.layer addSublayer:pathLayer];// 绘制的轨迹

转载本站任何文章请注明:转载至神刀安全网,谢谢神刀安全网 » iOS-小Demo–简单篮球沿轨迹动画

分享到:更多 ()

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址