iOS如何实现圆球加载动画XLBallLoading

发布时间:2021-08-06 14:14:44 作者:小新
来源:亿速云 阅读:151

这篇文章主要为大家展示了“iOS如何实现圆球加载动画XLBallLoading”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“iOS如何实现圆球加载动画XLBallLoading”这篇文章吧。

一、显示效果

iOS如何实现圆球加载动画XLBallLoading

二、原理分析

1、拆解动画

从效果图来看,动画可拆解成两部分:放大动画、位移动画

放大动画 比较简单,这里主要来分析一下位移动画

(1)、先去掉缩放效果:

iOS如何实现圆球加载动画XLBallLoading

屏蔽放大效果

(2)、去掉其中的一个圆球

iOS如何实现圆球加载动画XLBallLoading

现在基本可以看出主要原理就是让其中一个圆球绕另一个球做圆弧运动,只要确定一个圆球的运动轨迹,另一个圆球和它左相对运动即可。下面咱们重点说一下这个圆弧运动的原理。

2、圆弧运动

为了方便观察我们先放慢一下这个动画,然后添加辅助线:

iOS如何实现圆球加载动画XLBallLoading

放慢后的效果图

从图中可以看出,蓝色球主要经过了三段轨迹

既然分析出了运动轨迹,下面实现起来就方便了

第一段:蓝色球以A为起点,沿圆心O逆时针运动到B点

iOS如何实现圆球加载动画XLBallLoading

第二段:蓝色球以B为起点绕圆心P运动到C点

iOS如何实现圆球加载动画XLBallLoading

第三段:从C点返回原点

iOS如何实现圆球加载动画XLBallLoading

三、实现代码

1、第一段运动:

确定起始点、圆心、半径,让蓝色小球绕大圆

 //动画容器的宽度
 CGFloat width = _ballContainer.bounds.size.width;
 //小圆半径
 CGFloat r = (_ball1.bounds.size.width)*ballScale/2.0f;
 //大圆半径
 CGFloat R = (width/2 + r)/2.0;
 UIBezierPath *path2 = [UIBezierPath bezierPath];
 //设置起始位置
 [path2 moveToPoint:_ball1.center];
 //画大圆(第一段的运动轨迹)
 [path2 addArcWithCenter:CGPointMake(R + r, width/2) radius:R startAngle:M_PI endAngle:M_PI*2 clockwise:NO];

2、第二段运动

以灰色小球中心为圆心,以其直径为半径绕小圆,并拼接两段曲线

//画小圆
 UIBezierPath *path2_1 = [UIBezierPath bezierPath];
 //圆心为灰色小球的中心 半径为灰色小球的半径
 [path2_1 addArcWithCenter:CGPointMake(width/2, width/2) radius:r*2 startAngle:M_PI*2 endAngle:M_PI clockwise:NO];
 [path2 appendPath:path2_1];

3、第三段运动

//回到原处
 [path2 addLineToPoint:_ball1.center];

4、位移动画

利用关键帧动画实现小球沿设置好的贝塞尔曲线移动

 //执行动画
 CAKeyframeAnimation *animation1 = [CAKeyframeAnimation animationWithKeyPath:@"position"];
 animation1.path = path2.CGPath;
 animation1.removedOnCompletion = YES;
 animation1.duration = [self animationDuration];
 animation1.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
 [_ball1.layer addAnimation:animation1 forKey:@"animation1"];

5、缩放动画

在每次位移动画开始时执行缩放动画

-(void)animationDidStart:(CAAnimation *)anim{

 CGFloat delay = 0.3f;
 CGFloat duration = [self animationDuration]/2 - delay;

 [UIView animateWithDuration:duration delay:delay options:UIViewAnimationOptionCurveEaseOut| UIViewAnimationOptionBeginFromCurrentState animations:^{
  _ball1.transform = CGAffineTransformMakeScale(ballScale, ballScale);
  _ball2.transform = CGAffineTransformMakeScale(ballScale, ballScale);
  _ball3.transform = CGAffineTransformMakeScale(ballScale, ballScale);
 } completion:^(BOOL finished) {
  [UIView animateWithDuration:duration delay:delay options:UIViewAnimationOptionCurveEaseInOut| UIViewAnimationOptionBeginFromCurrentState animations:^{
   _ball1.transform = CGAffineTransformIdentity;
   _ball2.transform = CGAffineTransformIdentity;
   _ball3.transform = CGAffineTransformIdentity;
  } completion:nil];
 }];
}

6、动画循环

在每次动画结束时从新执行动画

-(void)animationDidStop:(CAAnimation *)anim finished:(BOOL)flag{
 if (_stopAnimationByUser) {return;}
 [self startPathAnimate];
}

以上是“iOS如何实现圆球加载动画XLBallLoading”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注亿速云行业资讯频道!

推荐阅读:
  1. iOS仿抖音视频加载动画效果的实现方法
  2. ios基于MJRefresh如何实现上拉刷新和下拉加载动画效果

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

ios

上一篇:MyGeneration中怎么连接MySql数据库

下一篇:如何解决某些HTML字符打不出来的问题

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》