使用 bezierPathWithArcCenter 为 UIView 设置动画

Question

我正在为贝塞尔路径上的两个 UView 设置动画：

UIBezierPath *path1 = [UIBezierPath bezierPathWithArcCenter:centerPoint radius:160 startAngle:5.008935 endAngle:0.217025 clockwise:YES];
UIBezierPath *path2 = [UIBezierPath bezierPathWithArcCenter:centerPoint radius:160 startAngle:5.008935 endAngle:0.588981 clockwise:YES];

5.008935 rad = 286.990814 degrees
0.217025 rad = 12.434639 degrees
0.588981 rad = 33.746109 degrees

- (CAAnimationGroup *)animationForItem:(QuadCurveMenuItem *)item
{
CGFloat startAngle = DEGREES_2_RADIANS([Utilities pointPairToBearingDegrees:item.centerPoint secondPoint:item.startPoint]);
CGFloat endAngle = DEGREES_2_RADIANS([Utilities pointPairToBearingDegrees:item.centerPoint secondPoint:item.endPoint]);

UIBezierPath *bezierPath = [UIBezierPath bezierPathWithArcCenter:item.mainPoint radius:kQuadCurveMenuDefaultEndRadius startAngle:startAngle endAngle:endAngle clockwise:YES];

CAKeyframeAnimation *positionAnimation = [CAKeyframeAnimation animationWithKeyPath:@"position"];
positionAnimation.duration = self.duration;
positionAnimation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionLinear];
[positionAnimation setFillMode:kCAFillModeForwards];
CGMutablePathRef path = CGPathCreateMutable();
positionAnimation.path = bezierPath.CGPath;
CGPathRelease(path);

CAAnimationGroup *animationgroup = [CAAnimationGroup animation];
animationgroup.animations = [NSArray arrayWithObjects:positionAnimation, nil];
animationgroup.duration = self.duration;
[animationgroup setFillMode:kCAFillModeForwards];
animationgroup.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionLinear];
animationgroup.removedOnCompletion = NO;

return animationgroup;
}

- (void)performExpandMenuAnimated:(BOOL)animated duration:(float)duration
{

    NSArray *itemToBeAnimated = [self allMenuItemsBeingDisplayed];

    id<QuadCurveAnimation> animation = self.noAnimation;
    if (animated) { animation = self.expandItemAnimation; }

    [animation setDuration:duration];

    for (int x = 0; x < [itemToBeAnimated count]; x++) {
        QuadCurveMenuItem *item = [itemToBeAnimated objectAtIndex:x];
        NSDictionary *dictionary = [NSDictionary dictionaryWithObjectsAndKeys:item,@"menuItem",animation,@"animation", nil];

        [self performSelector:@selector(animateMenuItemToEndPoint:) withObject:dictionary afterDelay:0];
    }
}

- (void)animateMenuItemToEndPoint:(NSDictionary *)itemAndAnimation {
    id<QuadCurveAnimation> animation = [itemAndAnimation objectForKey:@"animation"];
    QuadCurveMenuItem *item = [itemAndAnimation objectForKey:@"menuItem"];

    CAAnimationGroup *expandAnimation = [animation animationForItem:item];

    [item.layer addAnimation:expandAnimation forKey:[animation animationName]];
    item.center = item.endPoint;
}

所有视图都有相同的动画。唯一不同的是终点角度（endAngle）。

在 path2 上查看动画的速度比在 path1 上查看快。为什么会这样？

我注意到只有在 endAngle 和 startAngle 之间的差异大于 90 度时才会发生这种情况（本例中的案例视图 2）。

查看视频：https://dl.dropboxusercontent.com/u/24732347/video.mov

Answer 1

查看bezierPathWithArcCenter:radius:startAngle:endAngle:clockwise: 文档中的图 1：对于右上角的“饼图”，您必须使用参数

startAngle:degreesToRadians(-90) endAngle:0 顺时针:YES （原因是iOS默认的坐标系x轴向右，y轴向下）

希望这些信息对您有所帮助。

Answer 2

您需要对您正在做的事情提供更完整的描述。我猜您正在使用 2 条路径作为动画的路径属性创建 CAKeyframeAnimation？

您是说当您使用这些路径为 2 个不同的视图设置动画时，使用 path2 设置动画的视图比使用 path1 设置动画的视图以更多点/秒的速度移动？

在动画持续时间内，两个动画是否都在其弧线的整个长度上移动？

按道理，沿较长路径的动画将比沿较短弧线的动画移动得更快（以点/秒为单位），因为它必须在同一时间内移动更远的距离。