Android平台中带圆球双层双色圆环倒计时显示方法技术

技术编号:19024500 阅读:35 留言:0更新日期:2018-09-26 19:20
本发明专利技术涉及一种倒计时显示方法,用于Android平台应用中,在拍卖加价过程中向用户动态展示当前拍品的剩余时间,该方案由上下两层重叠覆盖的同心双色圆环以及叠放在双层双色圆环上的小圆球共同实现,具体包括步骤:初始化下层圆环、初始化上层圆环、初始化小圆球、绘制上下层圆环、小圆球图片的实时绘制、顺时针旋转动画、以及用户出价后的逆时针旋转动画。该发明专利技术可在拍卖系统加价过程中剩余10秒钟时,每过去一秒,都以叠放在双色圆环上的小圆球的运动动画进行展示,让用户能够强烈感知到所剩时间,具有较好的用户体验和交互感。

【技术实现步骤摘要】
Android平台中带圆球双层双色圆环倒计时显示方法
本专利技术涉及一种Android平台应用中的倒计时实现方法,属于软件界面显示

技术介绍
在拍卖系统的加价过程中,需要向用户展示当前拍品的剩余时间,通常以倒计时的方式显示。现有Android平台拍卖软件中有两种倒计时显示方式,一种是平淡的计数方式,另一种是图片动画的计数方式,显示形式都比较单一,没有交互感,用户体验较差。
技术实现思路
本专利技术针对现有Android平台拍卖软件中倒计时显示方式的缺陷,提供一种Android平台应用中动态显示当前拍品剩余时间的倒计时显示方法,具有动态、醒目的提醒功效和较好的用户体验。本专利技术方案如下:一种倒计时显示方法,其特征在于,由上下两层重叠覆盖的同心双色圆环以及叠放在双层双色圆环上的小圆球共同实现,具体包括以下步骤:一、初始化下层圆环,具体包括:设置下层圆环画笔的颜色、粗细、透明度、样式;二、初始化上层圆环,具体包括:设置上层圆环画笔的颜色、粗细、透明度、样式,上层圆环画笔的粗细大于下层圆环画笔的粗细,上层圆环画笔的颜色不同于下层圆环画笔的颜色;三、初始化小圆球,具体包括:获取小圆球图片的直径,该直径大于上层圆环画笔的粗细;获取小圆球运行轨迹的外切矩形的位置及宽高,小圆球运行轨迹即为前述的双层圆环;四、绘制圆环,具体包括:基于步骤三中获得的外切矩形的位置及宽高以及步骤一、二中所设置的画笔属性,通过绘制扇形的方法首先绘制下层圆环,然后绘制上层圆环,上层圆环的角度在参数mSweepAngle的控制下实现渐变;五、利用Matrix类中的API方法,通过改变矩阵的位置和角度参数,实现小圆球图片的实时绘制,具体包括:(1)将矩阵位置定位在整个外切矩形的中心位置;(2)设置小圆球围绕所述中心位置旋转的初始化旋转角度,通过参数mSweepAngle来控制小圆球每次旋转的角度;(3)通过设置好的矩阵位置、角度信息,绘制小圆球图片的真实位置;六、顺时针旋转动画,具体包括:(1)获取动画的起始时间和起始角度;(2)获取动画在时间间隔内所能够旋转的角度系数,用此系数乘以整个圆环的总角度,即可计算出动画每次旋转的角度值;(3)计算出当前运行的角度;(4)刷新页面形成动画效果;七、当有用户出价后,将时间倒回到10秒,即逆时针旋转动画,具体包括:(1)获取起始的角度和起始的时间;(2)获取动画在时间间隔内所能够旋转的角度系数,用此系数乘以整个圆环的总角度,即可计算出动画每次旋转的角度值;(3)计算出当前运行的角度;(4)刷新页面形成动画效果;(5)当倒计时动画执行完成后,自动启动顺时针旋转动画的步骤。在所述步骤三中进一步包括:获取小圆球露出圆环以外部分的宽度,用于将小圆球定位在双层圆环的中心位置。所述步骤三中外切矩形的位置及宽高通过mRectF对象设置。所述步骤四中使用Canvas的drawArc方法绘制扇形。在上下层圆环内部空白区域设置有一个同心的大圆球。该方法用于在Android平台中。该方法用于在拍卖加价过程中向用户动态展示当前拍品的剩余时间。本专利技术能够在拍卖系统加价过程中剩余10秒钟时,每过去一秒,都以叠放在双色圆环上的小圆球的运动动画进行展示,让用户能够强烈感知到所剩时间不多了,抓紧剩余时间进行加价,本专利技术采用了圆形小球以及双层双色圆环颜色切换方案,增强了用户触发点击后的交互感,用户体验较好。附图说明图1为拍卖软件核心页面的示意图。图2为倒计时即将开始的局部放大示意图。图3为倒计时行进近四分之一的局部放大示意图。图4为倒计时行进近二分之一的局部放大示意图。图5为倒计时行进近四分之三的的局部放大示意图。图6为倒计时即将结束的局部放大示意图。具体实施方式图1所示为拍卖软件最核心的页面,必须努力提升用户在此页面的体验,才能使用户更好地进行最关心的工作,所以在用户使用拍卖系统进行加价时,用户体验是拍卖系统中非常重要的一个环节。本方案包括一套完整的实现流程,包括倒计时方案以及在当用户在倒计时过程中触发点击时需要重置时间以及重置过程中的动画实现方案。本专利技术的倒计时方式,主要有三种动画进行结合形成,用以区别于当前现有的解决方案。一、双层圆环颜色替换使用重写ImageView原生控件的方式,用2个Paint分别为上下两层圆环填充不同的颜色值,执行Canvas的drawArc方法按照上下重叠覆盖的方式进行上下两层圆环的绘制。具体包括以下4个步骤:1.初始化下层圆环:设置下层圆环画笔的颜色(例如灰色)、粗细、透明度、样式2.初始化上层圆环:设置上层圆环画笔的颜色(例如绿色)、粗细、透明度、样式3.初始化小圆球:(1)获取小圆球图片的直径;(2)获取小圆球运行轨迹的外切矩形的宽高,因为想要绘制小圆球,首先需要找到小圆球运行的圆形轨迹,在本方案中,小圆球的圆形轨迹为前述的双层圆环,当找到小圆球的运行轨迹后,需要在程序中设置此运行轨迹的外切矩形的位置及宽高,即程序代码中的mRectF对象,该对象在采用drawArc方法绘制两层圆环时也需要用到。mRectF对象设置的方式为(左、上、右、下)四个点来确定一个矩形。设mStrokeWidth为圆环的宽度,为了将小圆球定位在圆环的中心位置,使用了代码所示的计算方式,需要获取小圆球露出圆环以外部分的宽度,即代码中的mPadding。代码中的mDiameter为图1-6所示双色圆环内部大圆球的直径,该大圆球对本方案的实施无实质影响,仅为示意性图片,也可为替换其他图形。4.绘制上下层圆环:基于前述mRectF对象以及设置的画笔属性,使用drawArc方法通过绘制扇形方法,首先绘制下层圆环,然后绘制上层圆环,上层圆环角度渐变。二、小圆球图片的绘制通过计算获取角度及位置,填充Matrix,并调用Canvas的drawBitmap方法,将小圆球图片绘制在屏幕上。具体包括以下几个步骤:1.在程序中想要做到一个物体沿着圆心做圆周运动的效果,需要借助谷歌公司提供的Matrix类中的API方法,在3*3的矩阵mMatrix中,每个点关联着图像处理时不同的形态,如,缩放,旋转,位置变换,变形等,当做圆周运动时,改变的是矩阵的角度和位置,而绘制小圆球图片,其实就是利用矩阵的角度、位置信息,确定小圆球的真实位置。具体如下:(1)首先将矩阵位置定位在整个外切矩形的中心位置;(2)设置小圆球围绕旋转中心旋转的初始化旋转角度,通过参数mSweepAngle来控制小圆球每次旋转的角度,通过角度的持续变化,才能够体现出旋转的动画效果;(3)通过设置好的矩阵位置、角度信息,绘制小圆球图片的真实位置。2.顺时针旋转动画:(1)获取动画的起始时间和起始角度,因为动画都有运行时限,当一个动画启动时,要设定此次动画运行的起始时间,以及动画运行的初始角度,从而形成不同的效果;(2)通过谷歌提供的公知的API方法,获取动画在时间间隔内所能够旋转的角度系数,即程序代码中的fraction,用此系数乘以整个圆环的总角度,可以计算出每次旋转的角度值;(3)计算出当前运行的角度;(4)刷新页面形成动画效果;三、当有用户出价后,需要将时间倒回到10秒,让用户能够有时间重新进行出价,并在倒秒的过程中有动画回转效果。具体包括:逆时针旋转动画:(1)获取动画的起始角本文档来自技高网...

【技术保护点】
1.一种倒计时显示方法,其特征在于,由上下两层重叠覆盖的同心双色圆环以及叠放在双层双色圆环上的小圆球共同实现,具体包括以下步骤:一、初始化下层圆环,具体包括:设置下层圆环画笔的颜色、粗细、透明度、样式;二、初始化上层圆环,具体包括:设置上层圆环画笔的颜色、粗细、透明度、样式,上层圆环画笔的粗细大于下层圆环画笔的粗细,上层圆环画笔的颜色不同于下层圆环画笔的颜色;三、初始化小圆球,具体包括:获取小圆球图片的直径,该直径大于上层圆环画笔的粗细;获取小圆球运行轨迹的外切矩形的位置及宽高,小圆球运行轨迹即为前述的双层圆环;四、绘制圆环,具体包括:基于步骤三中获得的外切矩形的位置及宽高以及步骤一、二中所设置的画笔属性,通过绘制扇形的方法首先绘制下层圆环,然后绘制上层圆环,上层圆环的角度在参数mSweepAngle的控制下实现渐变;五、利用Matrix类中的API方法,通过改变矩阵的位置和角度参数,实现小圆球图片的实时绘制,具体包括:(1)将矩阵位置定位在整个外切矩形的中心位置;(2)设置小圆球围绕所述中心位置旋转的初始化旋转角度,通过参数mSweepAngle来控制小圆球每次旋转的角度;(3)通过设置好的矩阵位置、角度信息,绘制小圆球图片的真实位置;六、顺时针旋转动画,具体包括:(1)获取动画的起始时间和起始角度;(2)获取动画在时间间隔内所能够旋转的角度系数,用此系数乘以整个圆环的总角度,即可计算出动画每次旋转的角度值;(3)计算出当前运行的角度;(4)刷新页面形成动画效果;七、当有用户出价后,将时间倒回到10秒,即逆时针旋转动画,具体包括:(1)获取起始的角度和起始的时间;(2)获取动画在时间间隔内所能够旋转的角度系数,用此系数乘以整个圆环的总角度,即可计算出动画每次旋转的角度值;(3)计算出当前运行的角度;(4)刷新页面形成动画效果;(5)当倒计时动画执行完成后,自动启动顺时针旋转动画的步骤。...

【技术特征摘要】
1.一种倒计时显示方法,其特征在于,由上下两层重叠覆盖的同心双色圆环以及叠放在双层双色圆环上的小圆球共同实现,具体包括以下步骤:一、初始化下层圆环,具体包括:设置下层圆环画笔的颜色、粗细、透明度、样式;二、初始化上层圆环,具体包括:设置上层圆环画笔的颜色、粗细、透明度、样式,上层圆环画笔的粗细大于下层圆环画笔的粗细,上层圆环画笔的颜色不同于下层圆环画笔的颜色;三、初始化小圆球,具体包括:获取小圆球图片的直径,该直径大于上层圆环画笔的粗细;获取小圆球运行轨迹的外切矩形的位置及宽高,小圆球运行轨迹即为前述的双层圆环;四、绘制圆环,具体包括:基于步骤三中获得的外切矩形的位置及宽高以及步骤一、二中所设置的画笔属性,通过绘制扇形的方法首先绘制下层圆环,然后绘制上层圆环,上层圆环的角度在参数mSweepAngle的控制下实现渐变;五、利用Matrix类中的API方法,通过改变矩阵的位置和角度参数,实现小圆球图片的实时绘制,具体包括:(1)将矩阵位置定位在整个外切矩形的中心位置;(2)设置小圆球围绕所述中心位置旋转的初始化旋转角度,通过参数mSweepAngle来控制小圆球每次旋转的角度;(3)通过设置好的矩阵位置、角度信息,绘制小圆球图片的真实位置;六、顺时针旋转动画,具体包括:(1)获取动画的起始时间和...

【专利技术属性】
技术研发人员:黄炜孟波
申请(专利权)人:优信拍北京信息科技有限公司
类型:发明
国别省市:北京,11

网友询问留言 已有0条评论
  • 还没有人留言评论。发表了对其他浏览者有用的留言会获得科技券。

1