实现一个沿着路径移动的动画并且旋转

1.通过CAKeyframeAnimation(关键帧动画)来实现沿着沿着路径移动的动画
2.通过CABaseAnimation实现旋转
3.在CAAnimationGroup中添加这两个动画

如何使用CAKeyframeAnimation来实现沿着路径的移动

  使用CGMutablePathRef来绘制路径利用关键帧动画实现移动也可以使用UIBezierPath来绘制贝塞尔曲线路径(code)
   CGPoint startPoint = self.leafImg.center;
   CGMutablePathRef path = CGPathCreateMutable();
    CGPathMoveToPoint(path, nil, startPoint.x, startPoint.y);
    CGPathAddQuadCurveToPoint(path, nil, 50, self.view.frame.size.height-100, startPoint.x + 360, startPoint.y + 550);///添加一个控制点和结束点
    CAKeyframeAnimation *animation = [CAKeyframeAnimation animationWithKeyPath:@"position"];
    animation.path = path;
使用CABaseAnimation实现旋转操作(code)
CABasicAnimation *aniBase = [CABasicAnimation animationWithKeyPath:@"transform.rotation.z"];
    aniBase.fromValue = @0;
    aniBase.toValue = @M_PI;
添加到CAAnimationGroup中,然后把动画组加到layer中
CAAnimationGroup *group = [CAAnimationGroup animation];
    group.duration = 4.f;
    group.animations = @[aniBase,animation];
    [self.leafImg.layer addAnimation:group forKey:nil];

二.使用CAKeyframeAnimation实现

[UIView animateKeyframesWithDuration:4 delay:0 options:UIViewKeyframeAnimationOptionCalculationModeCubic animations:^{
        CGPoint center = self.leafImg.center;
        [UIView addKeyframeWithRelativeStartTime:0 relativeDuration:0.1 animations:^{
            self.leafImg.center = (CGPoint){(center.x + 15), (center.y + 80)};
        }];
        ///相对于4s的时间 0.1*4=0.4s的时候开始
        [UIView addKeyframeWithRelativeStartTime:0.1 relativeDuration:0.15 animations:^{
            self.leafImg.center = (CGPoint){center.x + 45, center.y + 185};
        }];
        [UIView addKeyframeWithRelativeStartTime:0.25 relativeDuration:0.3 animations:^{
            self.leafImg.center = (CGPoint){center.x + 90, center.y + 295};
        }];
        [UIView addKeyframeWithRelativeStartTime:0.55 relativeDuration:.3 animations:^{
            self.leafImg.center = (CGPoint){center.x + 180, center.y + 375};
        }];
        [UIView addKeyframeWithRelativeStartTime:0.85 relativeDuration:.15 animations:^{
            self.leafImg.center = (CGPoint){center.x + 360, center.y + 435};
        }];
        [UIView addKeyframeWithRelativeStartTime:0 relativeDuration:1 animations:^{
            self.leafImg.transform = CGAffineTransformMakeRotation(M_PI);
        }];
    } completion:^(BOOL finished) {
       /// if (self.timer) {
           /// [self.timer invalidate];
            ///self.timer = nil;
        }
    }];
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 在iOS中随处都可以看到绚丽的动画效果,实现这些动画的过程并不复杂,今天将带大家一窥ios动画全貌。在这里你可以看...
    每天刷两次牙阅读 8,573评论 6 30
  • 在iOS中随处都可以看到绚丽的动画效果,实现这些动画的过程并不复杂,今天将带大家一窥iOS动画全貌。在这里你可以看...
    F麦子阅读 5,147评论 5 13
  • 显式动画 显式动画,它能够对一些属性做指定的自定义动画,或者创建非线性动画,比如沿着任意一条曲线移动。 属性动画 ...
    清风沐沐阅读 1,981评论 1 5
  • 在iOS实际开发中常用的动画无非是以下四种:UIView动画,核心动画,帧动画,自定义转场动画。 1.UIView...
    请叫我周小帅阅读 3,169评论 1 23
  • 大家都知道在iOS中实现一个动画相当简单,只要调用UIView的块代码即可实现一个动画效果,这在其他系统开发中基本...
    Kasign阅读 964评论 0 2