我有下面的代碼(根據this答案)創建一個'形變'圓形方形<>。UIBezierPath:在iPad上創建的控制點多於iPhone?
它在iPhone上工作的偉大:
但不是那麼好上的iPad(運行iOS的相同版本 - 10):
代碼是:
-(UIBezierPath*)circlePathWithCenter:(CGPoint)center andRadius:(CGFloat)radius {
UIBezierPath *circlePath = [UIBezierPath bezierPath];
[circlePath addArcWithCenter:center radius:radius startAngle:-M_PI endAngle:-M_PI/2 clockwise:YES];
[circlePath addArcWithCenter:center radius:radius startAngle:-M_PI/2 endAngle:0 clockwise:YES];
[circlePath addArcWithCenter:center radius:radius startAngle:0 endAngle:M_PI/2 clockwise:YES];
[circlePath addArcWithCenter:center radius:radius startAngle:M_PI/2 endAngle:M_PI clockwise:YES];
[circlePath closePath];
NSLog(@"%@", [circlePath debugDescription]);
return circlePath;
}
- (UIBezierPath *)squarePathWithCenter:(CGPoint)center andSize:(CGFloat)size
{
CGFloat startX = center.x-size/2;
CGFloat startY = center.y-size/2;
UIBezierPath *squarePath = [UIBezierPath bezierPath];
[squarePath moveToPoint:CGPointMake(startX, startY)];
[squarePath addLineToPoint:squarePath.currentPoint];
[squarePath addLineToPoint:CGPointMake(startX+size, startY)];
[squarePath addLineToPoint:squarePath.currentPoint];
[squarePath addLineToPoint:CGPointMake(startX+size, startY+size)];
[squarePath addLineToPoint:squarePath.currentPoint];
[squarePath addLineToPoint:CGPointMake(startX, startY+size)];
[squarePath addLineToPoint:squarePath.currentPoint];
[squarePath closePath];
NSLog(@"%@", [squarePath debugDescription]);
return squarePath;
}
動畫c頌歌是:
CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"path"];
animation.duration = 0.5;
animation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
animation.fromValue = (__bridge id)(_innerShape.path);
animation.toValue = (__bridge id)(_innerSquare.CGPath);
_innerShape.path = _innerSquare.CGPath;
[_innerShape addAnimation:animation forKey:@"animatePath"];
在路徑的仔細檢查,我注意到有更多的「curveto」的iPad版點(運行相同的代碼)。從前一期的討論中,我認爲控制點的數量需要相同才能平穩過渡。
設備之間預期的點數是否不同?有一種更可靠的方法來達到形變的形狀嗎?
圈的iPad的調試:
<UIBezierPath: 0x6c4f0d0; <MoveTo {13.5, 45.000004}>,
<CurveTo {44.999996, 13.5} {13.499998, 27.603035} {27.603027, 13.500002}>,
<CurveTo {45, 13.5} {44.999996, 13.5} {45, 13.5}>,
<LineTo {45, 13.5}>,
<CurveTo {76.5, 45} {62.396969, 13.499999} {76.5, 27.603031}>,
<CurveTo {76.5, 45} {76.5, 45} {76.5, 45}>,
<LineTo {76.5, 45}>,
<CurveTo {45, 76.5} {76.5, 62.396969} {62.396969, 76.5}>,
<CurveTo {45, 76.5} {45, 76.5} {45, 76.5}>,
<LineTo {45, 76.5}>,
<CurveTo {13.5, 45} {27.603031, 76.5} {13.499999, 62.396969}>,
<CurveTo {13.5, 44.999996} {13.5, 45} {13.5, 44.999996}>,
<Close>
iPhone版本:
<UIBezierPath: 0x6180000b24e0; <MoveTo {13.5, 44.999999999999993}>,
<CurveTo {45, 13.5} {13.500000000000002, 27.603030380330004} {27.603030380330011, 13.499999999999998}>,
<LineTo {45, 13.5}>,
<CurveTo {76.5, 45} {62.396969619669989, 13.500000000000002} {76.5, 27.603030380330011}>,
<LineTo {76.5, 45}>,
<CurveTo {45, 76.5} {76.5, 62.396969619669989} {62.396969619669989, 76.5}>,
<LineTo {45, 76.5}>,
<CurveTo {13.5, 45.000000000000007} {27.603030380330011, 76.5} {13.500000000000002, 62.396969619669996}>,
<Close>
廣場兩個:
<UIBezierPath: 0x6000000b0f80; <MoveTo {29.25, 29.25}>,
<LineTo {29.25, 29.25}>,
<LineTo {60.75, 29.25}>,
<LineTo {60.75, 29.25}>,
<LineTo {60.75, 60.75}>,
<LineTo {60.75, 60.75}>,
<LineTo {29.25, 60.75}>,
<LineTo {29.25, 60.75}>,
<Close>
你爲什麼要做所有這些'[squarePath addLineToPoint:squarePath.currentPoint]'調用?如果兩條貝塞爾路徑具有不同數量的段,則在兩條不同的貝塞爾路徑之間進行動畫處理會導致怪異的中間形狀。那些使用'currentPoint'的'addLineToPoint'看起來好像會爲路徑添加不必要的點。另外,我會將這些圓弧值移動π/ 4,以便它們更好地與正方形的角部對齊。 – Rob
好問題!我提到的arcWithCenter鏈接的文章是增加兩段我認爲?所以最初的修復方法是增加更多的廣場。 – Paul