使用贝塞尔曲线实现关键帧动画

最新推荐文章于 2021-05-11 11:32:56 发布

weixin_34186950

最新推荐文章于 2021-05-11 11:32:56 发布

阅读量388

点赞数

贝塞尔曲线，可以通过三个点，来确定一条平滑的曲线。在计算机图形学应该有讲。是图形开发中的重要工具。

实现的是一个图形做圆周运动。不过不是简单的关键帧动画那样，是计算出了很多点，当然还是用的关键帧动画，即使用CAKeyframeAnimation。有了贝塞尔曲线的支持，可以赋值给CAKeyframeAnimation 贝塞尔曲线的Path引用。

用贝塞尔曲线画圆，是一种特殊情况，我的做法是通过贝塞尔曲线得到4个半圆的曲线，它们合成的路径就是整个圆。

以下是动画部分的代码：

- (void) doAnimation {
    CAKeyframeAnimation *animation=[CAKeyframeAnimation animationWithKeyPath:@"position"];
    animation.duration=10.5f;
    animation.removedOnCompletion = NO;
    animation.fillMode = kCAFillModeForwards;
    animation.repeatCount=HUGE_VALF;// repeat forever
    animation.calculationMode = kCAAnimationCubicPaced;

    CGMutablePathRef curvedPath = CGPathCreateMutable();
    CGPathMoveToPoint(curvedPath, NULL, 512, 184);
    CGPathAddQuadCurveToPoint(curvedPath, NULL, 312, 184, 312, 384);
    CGPathAddQuadCurveToPoint(curvedPath, NULL, 310, 584, 512, 584);
    CGPathAddQuadCurveToPoint(curvedPath, NULL, 712, 584, 712, 384);
    CGPathAddQuadCurveToPoint(curvedPath, NULL, 712, 184, 512, 184);

    animation.path=curvedPath;

    [flyStarLayer addAnimation:animation forKey:nil];
}

quartZ中有CGMutablePathRef，就是为为动画设置移动路径的
比如先设个动画变量

CAKeyframeAnimation *bounceAnimation = [CAKeyframeAnimation animationWithKeyPath @"position"];
然后设置一个路径：

CGMutablePathRef thePath = CGPathCreateMutable();

CGPathMoveToPoint(thePath, NULL, startPoint.x, startPoint.y);

CGPathAddQuadCurveToPoint(thePath, NULL, 150, 30, endPoint.x, endPoint.y);
注：startPoint是起点，endPoint是终点，150，30是x,y轴的控制点，自行调整数值可以出现理想弧度效果

把路径给动画变量，设置个动画时间

bounceAnimation.path = thePath;

bounceAnimation.duration = 0.7;
最后把这个动画添加给view的layer

[self.layer addAnimation:bounceAnimation forKey @"move"];
大致这样就OK了