脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 软件编程 → IOS → iOS圆球加载动画XLBallLoading实现

iOS动画解析之圆球加载动画XLBallLoading的实现

 更新时间：2017年11月04日 16:17:42   作者：孟宪亮  
加载动画对大家来说都不陌生，我们在平时都会遇见，开发中也必不可少，所以下面这篇文章主要给大家介绍了关于iOS动画解析之圆球加载动画XLBallLoading实现的相关资料，文中通过示例代码介绍的非常详细，需要的朋友可以参考借鉴，下面来一起看看吧。

前言

当网页的页面大小较大，用户加载可能需要较长的时间，在这些情况下，我们一般会用到（加载）loading动画，提示于用户页面在加载中，本文将详细给大家介绍关于iOS圆球加载动画XLBallLoading实现的相关内容，分享出来供大家参考学习，下面话不多说了，来一起看看详细的介绍吧。

一、显示效果

二、原理分析

1、拆解动画

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

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

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

屏蔽放大效果

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

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

2、圆弧运动

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

放慢后的效果图

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

  • 第一段：从左边缘逆时针运动180°到灰色球的右侧
  • 第二段：从灰色球右侧贴着灰色球逆时针运动180°到其左侧
  • 第三段：从灰色球左侧返回起始位置

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

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

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

第三段：从C点返回原点

三、实现代码

1、第一段运动：

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

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

2、第二段运动

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

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

3、第三段运动

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

4、位移动画

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

 //执行动画
 CAKeyframeAnimation *animation1 = [CAKeyframeAnimation animationWithKeyPath:@"position"];
 animation1.path = path1.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];
}

源码下载

github

本地下载

总结

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，如果有疑问大家可以留言交流，谢谢大家对脚本之家的支持。

您可能感兴趣的文章:

相关文章

  • iOS移动端软键盘弹起空白和滚动穿透问题解决方案

    iOS移动端软键盘弹起空白和滚动穿透问题解决方案

    这篇文章主要为大家介绍了iOS移动端软键盘弹起空白和滚动穿透问题解决方案，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2023-07-07
  • iOS实现启动引导页与指纹解锁的方法详解

    iOS实现启动引导页与指纹解锁的方法详解

    这篇文章主要给大家介绍了关于iOS实现启动引导页与指纹解锁的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧。
    2018-02-02
  • iOS中时间与时间戳的相互转化实例代码

    iOS中时间与时间戳的相互转化实例代码

    这篇文章主要介绍了iOS中时间与时间戳的相互转化实例代码,非常具有实用价值，需要的朋友可以参考下。
    2017-03-03
  • IOS给图片添加水印（两种方式）

    IOS给图片添加水印（两种方式）

    为了防止自己辛苦做的项目被别人盗走，采取把图片添加水印，在此表示图片的独一无二。加水印不是要在上面添加上几个Label，而是我们要把字画到图片上成为一个整体，下面这篇文章主要介绍IOS给图片添加水印，有需要的小伙伴可以来参考下
    2015-08-08
  • iOS中tableview实现编辑、全选及删除等功能的方法示例

    iOS中tableview实现编辑、全选及删除等功能的方法示例

    这篇文章主要给大家介绍了关于iOS中tableview实现编辑、全选及删除等功能的相关资料，文中通过示例代码介绍的非常详细，不仅是介绍实现的方法，将实现过程中遇到的问题也都分享出来了，需要的朋友们下面来一起看看吧。
    2017-07-07
  • iOS 16 CocoaAsyncSocket 崩溃修复详解

    iOS 16 CocoaAsyncSocket 崩溃修复详解

    这篇文章主要为大家介绍了iOS 16 CocoaAsyncSocket 崩溃修复详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2023-01-01
  • iOS自定义可展示、交互的scrollView滚动条

    iOS自定义可展示、交互的scrollView滚动条

    这篇文章主要为大家详细介绍了iOS自定义可展示、交互的scrollView滚动条，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2019-04-04
  • iOS如何优雅地消除应用角标详解

    iOS如何优雅地消除应用角标详解

    关于应用角标相信大家应该都有所了解吧，这篇文章主要给大家介绍了关于iOS如何优雅地消除应用角标的相关资料，文中通过示例代码介绍的非常详细，对各位iOS开发者们具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧。
    2017-12-12
  • Objective-C学习之ARC的实现方法

    Objective-C学习之ARC的实现方法

    自动引用计数(Automatic Reference Counting, ARC)把压在程序员们肩头的管理内存的重担卸除了不少，更不用说让跟踪内存泄漏那样的烦心事也少了很多。下面这篇文章主要给大家介绍了关于Objective-C学习之ARC的实现方法，需要的朋友可以参考借鉴下。
    2017-12-12
  • 谈谈为何iOS开发别用宏来定义常量

    谈谈为何iOS开发别用宏来定义常量

    最近在工程里看到很多不规范的使用，于是来写一篇博客来让不是很清楚的小朋友们，使用正确的规范开发ios，少埋点坑。
    2016-08-08

最新评论