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

2020-01-21 02:22:32王旭

前言

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

一、显示效果

XLBallLoading,ios,加载动画,网络加载等待动画,加载等待动画

二、原理分析

1、拆解动画

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

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

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

XLBallLoading,ios,加载动画,网络加载等待动画,加载等待动画

屏蔽放大效果

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

XLBallLoading,ios,加载动画,网络加载等待动画,加载等待动画

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

2、圆弧运动

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

XLBallLoading,ios,加载动画,网络加载等待动画,加载等待动画

放慢后的效果图

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

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

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

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

XLBallLoading,ios,加载动画,网络加载等待动画,加载等待动画

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

XLBallLoading,ios,加载动画,网络加载等待动画,加载等待动画