三个球的旋转的动画

最新推荐文章于 2023-06-25 20:51:27 发布

Micheader

最新推荐文章于 2023-06-25 20:51:27 发布

阅读量692

点赞数

分类专栏：动画文章标签：动画

动画专栏收录该内容

1 篇文章 0 订阅

订阅专栏

创建三个半径大小，颜色大小一样的圆。这里我们用到了layer的cornerRadius属性，在正方形中，我们只要设置cornerRadius的值等于height/2，就能轻易的画出一个圆形，代码如下:

UIView *ball_1 = [[UIView alloc] initWithFrame:CGRectMake(centerPoint.x - BALL_RADIUS, centerPoint.y, BALL_RADIUS, BALL_RADIUS)];
ball_1.layer.cornerRadius = BALL_RADIUS / 2; // 成为圆形
ball_1.backgroundColor = self.ballColor;
我们根据圆的x值不同，创建三个并排放着，大小、形状一致的圆形,接下来我们来分析一下三个圆各自的x值

QQ20151008-0@2x.png
CGFloat centerPointY = HEIGHT / 2 - BALL_RADIUS * 0.5;
CGFloat centerPointX = WIDTH / 2;
CGPoint centerPoint = CGPointMake(centerPointX, centerPointY);
UIView *ball_1 = [[UIView alloc] initWithFrame:CGRectMake(centerPoint.x - BALL_RADIUS, centerPoint.y, BALL_RADIUS, BALL_RADIUS)];
ball_1.layer.cornerRadius = BALL_RADIUS / 2; // 成为圆形
ball_1.backgroundColor = self.ballColor;
[self addSubview:ball_1];
self.ball_1 = ball_1;

UIView ball_2 = [[UIView alloc] initWithFrame:CGRectMake(centerPoint.x - BALL_RADIUS 0.5, centerPoint.y, BALL_RADIUS, BALL_RADIUS)];
ball_2.layer.cornerRadius = BALL_RADIUS / 2; // 成为圆形
ball_2.backgroundColor = self.ballColor;
[self addSubview:ball_2];
self.ball_2 = ball_2;

UIView ball_3 = [[UIView alloc] initWithFrame:CGRectMake(centerPoint.x + BALL_RADIUS 0.5, centerPoint.y, BALL_RADIUS, BALL_RADIUS)];
ball_3.layer.cornerRadius = BALL_RADIUS / 2; // 成为圆形
ball_3.backgroundColor = self.ballColor;
[self addSubview:ball_3];
self.ball_3 = ball_3;
3.在git图中，我们可以看到圆是绕着一定的半径，做着一个旋转的运动，在这里我们用贝塞尔曲线创作圆，在这里我们要从180度到360度，和0度到180画两端圆弧，组成一个圆形，让球1跟着这个曲线做位移运动。

QQ20151008-1@2x.png
// 2.1 第一个圆的曲线
UIBezierPath *path_ball_1 = [UIBezierPath bezierPath];
[path_ball_1 moveToPoint:centerBall_1];

[path_ball_1 addArcWithCenter:centerPoint radius:BALL_RADIUS startAngle:M_PI endAngle:2*M_PI clockwise:NO];
UIBezierPath *path_ball_1_1 = [UIBezierPath bezierPath];
[path_ball_1_1 addArcWithCenter:centerPoint radius:BALL_RADIUS startAngle:0 endAngle:M_PI clockwise:NO];
[path_ball_1 appendPath:path_ball_1_1]; // 把两段圆弧组合起来

我们用核心动画，让球1绕着轨迹运动：

// 2.2 第一个圆的动画
CAKeyframeAnimation *animation_ball_1=[CAKeyframeAnimation animationWithKeyPath:@"position"];
animation_ball_1.path = path_ball_1.CGPath;
animation_ball_1.removedOnCompletion = NO;
animation_ball_1.fillMode = kCAFillModeForwards;
animation_ball_1.calculationMode = kCAAnimationCubic;
animation_ball_1.repeatCount = 1;
animation_ball_1.duration = 1.4;
animation_ball_1.delegate = self;
animation_ball_1.autoreverses = NO;
animation_ball_1.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
[self.ball_1.layer addAnimation:animation_ball_1 forKey:@"animation"];

这样我们就完成了球1的动画，我们按着这个步骤完成球3的动画

4.球3首先是从0度到180度、180度到360度两段弧构成，在这里我们要注意一个点是在创建核心动画的时候，我们不用再成为球3的核心动画的代理，因为我们在球1中已经成为了动画的代理，这里不做代理，防止重复出现动画代理事件的触发

QQ20151008-2@2x.png
// 2.3 第3个圆的曲线
UIBezierPath *path_ball_3 = [UIBezierPath bezierPath];
[path_ball_3 moveToPoint:centerBall_2];
[path_ball_3 addArcWithCenter:centerPoint radius:BALL_RADIUS startAngle:0 endAngle:M_PI clockwise:NO];
UIBezierPath *path_ball_3_1 = [UIBezierPath bezierPath];
[path_ball_3_1 addArcWithCenter:centerPoint radius:BALL_RADIUS startAngle:M_PI endAngle:M_PI*2 clockwise:NO];
[path_ball_3 appendPath:path_ball_3_1];

// 2.4 第3个圆的动画
CAKeyframeAnimation *animation_ball_3 = [CAKeyframeAnimation animationWithKeyPath:@"position"];
animation_ball_3.path = path_ball_3.CGPath;
animation_ball_3.removedOnCompletion = NO;
animation_ball_3.fillMode = kCAFillModeForwards;
animation_ball_3.calculationMode = kCAAnimationCubic;
animation_ball_3.repeatCount = 1;
animation_ball_3.duration = 1.4;
animation_ball_3.autoreverses = NO;
animation_ball_3.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];

[self.ball_3.layer addAnimation:animation_ball_3 forKey:@"rotation"];