[英]Animating UIBezierPath in custom UIView doesn't work
當用戶觸摸我的視圖 (touchesEnded) 時,我試圖在我的自定義UIView
為UIBezierPath
(從一個路徑到另一個路徑)設置動畫。
我的繪圖代碼:
- (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
。
為了讓動畫正常工作,請將myLineShapeLayer
添加為視圖layer
的子layer
:
例如,在viewDidLoad
:
[self.view.layer addSublayer:myLineShapeLayer];
為了能夠看到endPath
仍在持續看到動畫后,在屏幕上,我們可以先分配endPath
到path
的財產CAShapeLayer
:
myLineShapeLayer.path = [endPath CGPath];
因此,我們在沒有toValue
情況下進行動畫處理:
CABasicAnimation * pathAnimation = [CABasicAnimation animationWithKeyPath:@"path"];
pathAnimation.fromValue = (__bridge id)[_startPath CGPath];
pathAnimation.duration = 3.0f;
[myLineShapeLayer addAnimation:pathAnimation forKey:@"animationKey"];
動畫的最終效果將在動畫結束后保留在屏幕上。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.