ios - 如何为曲线制作动画

Question

我想更改曲线的 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"];
}

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