在自定义UIView中动画UIBezierPath不起作用

时间:2015-07-08 08:51:35

标签: ios cocoa-touch animation uiview uibezierpath

我试图在用户触摸我的视图时触摸我的自定义UIView中的UIBezierPath(从一个路径到另一个路径)动画(touchesEnded。

我的绘图代码:

- (void)drawRect:(CGRect)rect {
// Drawing code
[self createStartPath];
[self createEndPath];

CGContextRef currentContext = UIGraphicsGetCurrentContext();
CGContextAddPath(currentContext, _startPath.CGPath);
CGContextDrawPath(currentContext, kCGPathStroke);

}

- (void) createStartPath
{
_startPath = UIBezierPath.bezierPath;
[_startPath moveToPoint: CGPointMake(18, 22.5)];
[_startPath addCurveToPoint: CGPointMake(18.38, 22.32) controlPoint1: CGPointMake(18.14, 22.5) controlPoint2: CGPointMake(18.29, 22.44)];
[_startPath addCurveToPoint: CGPointMake(18.32, 21.62) controlPoint1: CGPointMake(18.56, 22.11) controlPoint2: CGPointMake(18.53, 21.79)];
[_startPath addLineToPoint: CGPointMake(6.78, 12)];
[_startPath addLineToPoint: CGPointMake(18.32, 2.38)];
[_startPath addCurveToPoint: CGPointMake(18.38, 1.68) controlPoint1: CGPointMake(18.53, 2.21) controlPoint2: CGPointMake(18.56, 1.89)];
[_startPath addCurveToPoint: CGPointMake(17.68, 1.62) controlPoint1: CGPointMake(18.21, 1.47) controlPoint2: CGPointMake(17.89, 1.44)];
[_startPath addLineToPoint: CGPointMake(5.68, 11.62)];
[_startPath addCurveToPoint: CGPointMake(5.5, 12) controlPoint1: CGPointMake(5.56, 11.71) controlPoint2: CGPointMake(5.5, 11.85)];
[_startPath addCurveToPoint: CGPointMake(5.68, 12.38) controlPoint1: CGPointMake(5.5, 12.15) controlPoint2: CGPointMake(5.56, 12.29)];
[_startPath addLineToPoint: CGPointMake(17.68, 22.38)];
[_startPath addCurveToPoint: CGPointMake(18, 22.5) controlPoint1: CGPointMake(17.77, 22.46) controlPoint2: CGPointMake(17.89, 22.5)];
[_startPath closePath];

[self.fillColor setFill];

[_startPath fill];
}

- (void) createEndPath
{

_endPath = UIBezierPath.bezierPath;
[_endPath moveToPoint: CGPointMake(6, 22.5)];
[_endPath addCurveToPoint: CGPointMake(5.62, 22.32) controlPoint1: CGPointMake(5.86, 22.5) controlPoint2: CGPointMake(5.71, 22.44)];
[_endPath addCurveToPoint: CGPointMake(5.68, 21.62) controlPoint1: CGPointMake(5.44, 22.11) controlPoint2: CGPointMake(5.47, 21.79)];
[_endPath addLineToPoint: CGPointMake(17.22, 12)];
[_endPath addLineToPoint: CGPointMake(5.68, 2.38)];
[_endPath addCurveToPoint: CGPointMake(5.62, 1.68) controlPoint1: CGPointMake(5.47, 2.21) controlPoint2: CGPointMake(5.44, 1.89)];
[_endPath addCurveToPoint: CGPointMake(6.32, 1.62) controlPoint1: CGPointMake(5.79, 1.47) controlPoint2: CGPointMake(6.11, 1.44)];
[_endPath addLineToPoint: CGPointMake(18.32, 11.62)];
[_endPath addCurveToPoint: CGPointMake(18.5, 12) controlPoint1: CGPointMake(18.44, 11.71) controlPoint2: CGPointMake(18.5, 11.85)];
[_endPath addCurveToPoint: CGPointMake(18.32, 12.38) controlPoint1: CGPointMake(18.5, 12.15) controlPoint2: CGPointMake(18.44, 12.29)];
[_endPath addLineToPoint: CGPointMake(6.32, 22.38)];
[_endPath addCurveToPoint: CGPointMake(6, 22.5) controlPoint1: CGPointMake(6.23, 22.46) controlPoint2: CGPointMake(6.11, 22.5)];
[_endPath closePath];

[self.fillColor setFill];

//[_endPath fill];
}

我在这里开始动画(想要“变形”一条路径到另一条路径):

- (void)touchesEnded:(NSSet *)touches withEvent:(UIEvent *)event
 {
    [super touchesEnded:touches withEvent:event];

    CAShapeLayer * myLineShapeLayer = [[CAShapeLayer alloc] init];

    CABasicAnimation * pathAnimation = [CABasicAnimation animationWithKeyPath:@"path"];
    pathAnimation.fromValue = (__bridge id)[_startPath CGPath];
    pathAnimation.toValue = (__bridge id)[_endPath CGPath];
    pathAnimation.duration = 3.0f;
    [myLineShapeLayer addAnimation:pathAnimation forKey:@"animationKey"];
}

我看到startPath和我的touchesEnded被调用,但没有任何动画,也没有显示endPath。

1 个答案:

答案 0 :(得分:1)

要让您的动画发挥作用,请将myLineShapeLayer添加为视图layer的子图层:

例如,在viewDidLoad

[self.view.layer addSublayer:myLineShapeLayer];

为了能够在动画后看到屏幕上仍然持续显示endPath,我们可以先将endPath分配给{{1}的path属性}}:

CAShapeLayer

因此我们在没有myLineShapeLayer.path = [endPath CGPath]; 的情况下制作动画:

toValue

动画结束后,动画的最终效果将保留在屏幕上。