如何为曲线设置动画答案

【问题标题】：How to animate a curve如何为曲线设置动画
【发布时间】：2014-08-26 05:47:48
【问题描述】：

我想改变曲线的 Y 位置，它的作用类似于带有动画的 UISlider。

我有一个方法 drawCurve 可以绘制一个 quadCurve，但我想为它制作动画。我不太确定如何将其与CABasicAnimation 关联起来。

//draw line path
    -(void)drawCurve
    {
        //ensure the drag up or down just in the middle
        if (controlPoint.x <= halfWidth || controlPoint.x >= halfWidth)  {controlPoint.x = halfWidth;}

        if (controlPoint.y <= 0 )  {controlPoint.y = 0;}
        if (controlPoint.y >= self.frame.size.height)  {controlPoint.y = self.frame.size.height;}
        CGContextRef ctx = UIGraphicsGetCurrentContext();
        curvePath = CGPathCreateMutable();

        CGPathMoveToPoint(curvePath, NULL, startingDrawPointX, startingDrawPointY);
        CGPathAddQuadCurveToPoint(curvePath, NULL, controlPoint.x, controlPoint.y, endingDrawPointX, endingDrawPointY);
        CGContextAddPath(ctx, curvePath);
        CGContextSetStrokeColorWithColor(ctx,kDBrownTextColor.CGColor);
        CGContextSetLineWidth(ctx, 2.0);//thickness
        CGContextStrokePath(ctx);
        CGPathRelease(curvePath);
    }


-(void)startAnimation
{
    CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"path"];
    animation.duration = 1;
    animation.repeatCount = 5;
    animation.autoreverses = NO;
    animation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
    animation.fromValue = (__bridge id)currentCurvePath;
    animation.toValue = (__bridge id)ToPath;
    [self.layer.superlayer addAnimation:animation forKey:@"animatePath"];
}

【问题讨论】：

标签： ios iphone core-animation cabasicanimation

【解决方案1】：

这是我认为您尝试使用 CAShapeLayer 完成的示例。

+(Class) layerClass {
    return [CAShapeLayer class];
}
//draw line path
-(void)drawCurve
{
    //ensure the drag up or down just in the middle
    if (controlPoint.x <= halfWidth || controlPoint.x >= halfWidth)  {controlPoint.x = halfWidth;}
    if (controlPoint.y <= 0 )  {controlPoint.y = 0;}
    if (controlPoint.y >= self.frame.size.height)  {controlPoint.y = self.frame.size.height;}

    //create the path
    curvePath = CGPathCreateMutable();
    CGPathMoveToPoint(curvePath, NULL, startingDrawPointX, startingDrawPointY);
    CGPathAddQuadCurveToPoint(curvePath, NULL, controlPoint.x, controlPoint.y, endingDrawPointX, endingDrawPointY);

    //add the path to the background layer
    CAShapeLayer *layer = (CAShapeLayer *)self.layer;
    layer.path = curvePath;
    layer.strokeColor = [UIColor brownColor].CGColor;
    layer.lineWidth = 2.0;

    //release the path
    CGPathRelease(curvePath);
}


-(void)startAnimation {
    [CATransaction begin];

    CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"path"];
    animation.duration = 1;
    animation.repeatCount = 5;
    animation.autoreverses = NO;
    animation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
    animation.fromValue = (__bridge id)curvePath;
    animation.toValue = (__bridge id)ToPath;
    [self.layer addAnimation:animation forKey:@"animatePath"];

    [CATransaction commit];
}

【讨论】：