沿弧形动画UIView [英] Animate a UIView along an arc
问题描述
我希望沿着圆弧设置动画,如图像从位置1到位置2所示。
I wish to animate a view along an arc as shown in the image from position 1 to position 2.
实际发生的是视图动画描述的是整圆而不是圆弧。我的问题是:
What actually happens is that the view animation describes a full circle instead of an arc. My questions are:
- 我应该使用 CGPathAddArc 还是 CGPathAddArcToPoint ?
- 我是否需要使用 CGPathMoveToPoint 来描述视图的初始位置?
- Should I be using CGPathAddArc or CGPathAddArcToPoint ?
- Do I need to use CGPathMoveToPoint to describe the initial location of the view or not?
当我单步执行代码时,CGPoints值与我预期的一样,角度也是如此。
When I step through the code the CGPoints values are as I expect them to be, as are the angles.
我使用以下函数来获取圆圈上的CGPoints
I use the following function to get CGPoints on a circle
CGPoint pointOnCircle(CGPoint centre, float radius, float angle)
{
float x = centre.x + radius * cosf(angle);
float y = centre.y + radius * sinf(angle);
return CGPointMake(x, y);
}
我正在使用以下代码及其变体但是我还没有管理破解它。
I am using the following code and variants thereof but as yet I have not managed to crack it.
CAKeyframeAnimation *pathAnimation = [CAKeyframeAnimation animationWithKeyPath:@"position"];
pathAnimation.calculationMode = kCAAnimationPaced;
pathAnimation.fillMode = kCAFillModeForwards;
pathAnimation.removedOnCompletion = NO;
pathAnimation.duration = duration;
pathAnimation.repeatCount = 1;
CGPoint viewCenter = dynamicView.objectCenter;
CGMutablePathRef arcPath = CGPathCreateMutable();
// CGPathMoveToPoint(arcPath, NULL, viewCenter.x, viewCenter.y);
//work out the half way point
float halfwayAngle = dynamicView.angle + (0.5f * self.angleIncrement);
float fullwayAngle = dynamicView.angle + self.angleIncrement;
CGPoint halfwayPoint = pointOnCircle(self.center, self.radius, halfwayAngle);
CGPoint fullwayPoint = pointOnCircle(self.center, self.radius, fullwayAngle);
CGPathAddArc(arcPath, NULL, halfwayPoint.x, halfwayPoint.y, self.radius, dynamicView.angle, fullwayAngle, clockwise);
// CGPathAddArcToPoint(arcPath, NULL, viewCenter.x, viewCenter.y, fullwayPoint.x, fullwayPoint.y, self.radius);
pathAnimation.path = arcPath;
CGPathRelease(arcPath);
[dynamicView.layer addAnimation:pathAnimation forKey:@"arc"];
推荐答案
我编写了一个快速示例,希望能够全部完成一起。我从单一视图应用程序模板开始,并将此操作添加到视图控制器以及触发操作的按钮。
I coded up a quick example that hopefully puts it all together. I started from the "single view" application template and added this action to the view controller along with a button to trigger the action.
- (IBAction)animateArc:(id)sender
{
// Create the arc
CGPoint arcStart = CGPointMake(0.2 * self.view.bounds.size.width, 0.5 * self.view.bounds.size.height);
CGPoint arcCenter = CGPointMake(0.5 * self.view.bounds.size.width, 0.5 * self.view.bounds.size.height);
CGFloat arcRadius = 0.3 * MIN(self.view.bounds.size.width, self.view.bounds.size.height);
CGMutablePathRef arcPath = CGPathCreateMutable();
CGPathMoveToPoint(arcPath, NULL, arcStart.x, arcStart.y);
CGPathAddArc(arcPath, NULL, arcCenter.x, arcCenter.y, arcRadius, M_PI, 0, NO);
// The layer we're going to animate (a 50x50pt red box)
UIView* dynamicView = [[UIView alloc] initWithFrame: CGRectMake(0, 0, 50, 50)];
dynamicView.layer.backgroundColor = [[UIColor redColor] CGColor];
[self.view addSubview: dynamicView];
dynamicView.center = arcStart;
// An additional view that shows the arc.
BOOL showArc = NO;
UIView* drawArcView = nil;
if (showArc)
{
drawArcView = [[UIView alloc] initWithFrame: self.view.bounds];
CAShapeLayer* showArcLayer = [[CAShapeLayer alloc] init];
showArcLayer.frame = drawArcView.layer.bounds;
showArcLayer.path = arcPath;
showArcLayer.strokeColor = [[UIColor blackColor] CGColor];
showArcLayer.fillColor = nil;
showArcLayer.lineWidth = 3.0;
[drawArcView.layer addSublayer: showArcLayer];
[self.view insertSubview: drawArcView belowSubview: dynamicView];
}
// The animation
CAKeyframeAnimation *pathAnimation = [CAKeyframeAnimation animationWithKeyPath:@"position"];
pathAnimation.calculationMode = kCAAnimationPaced;
pathAnimation.duration = 5.0;
pathAnimation.path = arcPath;
CGPathRelease(arcPath);
// Add the animation and reset the state so we can run again.
[CATransaction begin];
[CATransaction setCompletionBlock:^{
[drawArcView removeFromSuperview];
[dynamicView removeFromSuperview];
}];
[dynamicView.layer addAnimation:pathAnimation forKey:@"arc"];
[CATransaction commit];
}
这篇关于沿弧形动画UIView的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!