美文网首页
实现一个沿着路径移动的动画并且旋转

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

作者: myk | 来源:发表于2017-06-15 17:22 被阅读652次

    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;
            }
        }];
    

    相关文章

      网友评论

          本文标题:实现一个沿着路径移动的动画并且旋转

          本文链接:https://www.haomeiwen.com/subject/holuqxtx.html