正在加载之8个圆球动画旋转

显示8个圆球围成一个圆形的动画加载效果,类似一个实心球带着拖尾旋转只需要绘制8个实心圆球外加8个无限动画触发圆球的透明度alpha和scale的变化,且每个动画之间保持一定的延迟

圆球如何绘制

先在绘制区域中,8个小实心圆围成一个大圆,透明度范围在0到255,缩放范围在0到1.0排列方式为上下左右位置,以及他们的中间位置,正好8个位置,8个圆心位置不变

1:圆球半径radius设置为整个View的Region正方形长度的十分之一

2:计算出每个圆球圆心的坐标(x,y)

3:设置每个圆球当前的透明度以及缩放的比例

4:Canvas移到圆心坐标处translate进行绘制

每个圆球的缩放比例区间是0到1.0,1时代表正常状态,圆球的缩放依赖Canvas的scale,将Canvas的scale缩放至对应的比例,绘制当前圆球的时候实现其缩放并Canvas的原点到translate圆心位置,每个圆球当前的scale不同,绘制时,Canvas需要save与restore保存和恢复状态


圆心(x,y)坐标如何确定

圆球的圆心都在正方形View的内切大圆的内部圆环上,距离其内切大圆有一个半径的距离,角度分别是0-360度均分

每一个点到大圆的圆心的距离是1/2的正方形半宽减去小圆球的半径,计算得到每个小圆心点的对应角度的正切和余切,即得到以正方形View中心为坐标远点的x,y值,转换为相对于原点的圆心坐标(再加上正方形半宽即是)

第一个球圆心坐标相对View的中心是0度,第二个是顺时针旋转45度...依次


动画及其延迟

在1000毫秒内,scale的值设置为1到0.4f再到1,alpha的值设置为255到77再到255

二者并不是同比例,但是是线性改变,为每个圆球设置2个动画,如果同比例,可设置一个,动画的持续时间可设置为1000毫秒,每个动画之间的延迟大约在120毫秒。从第一个圆球开始动画,第8个开始动画的时间是840毫秒后,按照这个速度960毫秒后第一个动画开始下一轮动画,但第一个动画还未持续完毕,等待40毫秒,第8个开始动画变小,第一个动画在40毫秒的变大后也会开始由大变小,基本实现无缝衔接,如果适当加长动画时间,则会让代表动画旋转的实心球及其拖尾缓慢变化,从而实现旋转

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 一:canvas简介 1.1什么是canvas? ①:canvas是HTML5提供的一种新标签 ②:HTML5 ...
    GreenHand1阅读 4,779评论 2 32
  • 一、canvas简介 1.1 什么是canvas?(了解) 是HTML5提供的一种新标签 Canvas是一个矩形区...
    Looog阅读 3,979评论 3 40
  • 书中代码示例效果展示:Core HTML5 Canvas Examples 基础知识 canvas元素 canva...
    szu_bee阅读 2,906评论 2 28
  • 序:他并未出现时,我的梦是美好的,而在遇见他之后,我开始有了噩梦。我开始担心如果有一天我找不到他我该怎么办? 他有...
    破小孩儿zbl阅读 326评论 0 2
  • 海上升明月,混沌孕辰星。 凰族一百零八将,化作天龙漫天兵。 自古开疆多逶迤,诸君尤须麒麟臂。 敢把文明换日月,凌烟...
    鬼谷无名阅读 197评论 0 0