CN108845858A - 一种弧线运动的动画算法 - Google Patents

Abstract

本发明涉及一种弧线运动的动画算法，包括如下步骤：创建画布Canvas，供用户在上面进行绘制，在onDraw回调中，canvas.save()获取canvas保存的状态，以画布中心为中心进行画布旋转，创建一个新的绘制区域arcBounds做为缓存，并设置内边距mStrokeInset，设置每次绘制时画笔mPaint的宽度和颜色，开始画圆弧canvas.drawArc，最后再恢复到canvas最初的状态canvas.restoreToCount(saveCount)。本发明，自定义控件，实现圆弧摆动的效果，模拟能量守恒球不断碰撞的动画效果，呈现全新的加载动画页面，凸显个性化及App，具一定扩展性，可修改制作其他样式的加载动画效果，提高开发效率。

Description

一种弧线运动的动画算法

技术领域

本发明涉及应用的加载动画技术领域，具体说是一种弧线运动的动画算法。

背景技术

现有的应用程序（例如App），在打开运行时，总会看到一个加载动画页面，以便在等待加载的过程中，用户可以知晓应用程序正在工作、加载的进度等信息。

常见的加载动画页面，有的是呈现一张静态图片，有的是呈现一组图片实现动画效果，有的是呈现一段短视频实现动画效果，为了凸显个性化，丰富加载动画页面的功能及动画效果，有必要对加载动画页面进行优化、再设计。

根据公司目前的开发计划，拟实现一种模拟能量守恒双摆球的动画效果，该动画效果作为新版App的加载动画页面。所述模拟能量守恒双摆球动画效果中，包括沿水平方向依次排列的多颗小球（通常是奇数个），这些小球中，最左侧和最右侧的小球交替的被弹出并回落，小球的移动轨迹为弧线，且移动速度不恒定，故需要专门设计相应的轨迹移动算法。

发明内容

针对现有技术中存在的缺陷，本发明的目的在于提供一种弧线运动的动画算法，自定义控件，实现圆弧摆动的效果，模拟能量守恒球不断碰撞的动画效果，呈现全新的加载动画页面，凸显个性化及App，具一定扩展性，可修改制作其他样式的加载动画效果，提高开发效率。

为达到以上目的，本发明采取的技术方案是：

一种弧线运动的动画算法，其特征在于，包括如下步骤：

创建画布Canvas，Canvas由android系统提供，供用户在上面进行绘制，

在onDraw回调中，canvas.save()获取canvas保存的状态，

以画布中心为中心进行画布旋转，

创建一个新的绘制区域arcBounds做为缓存，并设置内边距mStrokeInset，

设置每次绘制时画笔mPaint的宽度mPaint.setStrokeWidth和颜色mPaint.setColor，

开始画圆弧canvas.drawArc，drawArc获取以下参数信息：

第一个参数为圆弧的形状和大小的范围，

第二个参数是设置圆弧是从哪个角度来绘画的，

第三个参数是设置圆弧扫过的角度，

第四个参数是设置圆弧在绘画的时候是否经过圆形，

第五个参数是定义的画笔mPaint，

最后再恢复到canvas最初的状态canvas.restoreToCount(saveCount)。

在上述技术方案的基础上，画布旋转角度mGroupRotation的计算方法如下：

mGroupRotation = ((FULL_GROUP_ROTATION / NUM_POINTS) * renderProgress) +(FULL_GROUP_ROTATION * (mRotationCount / NUM_POINTS));

其中：

FULL_GROUP_ROTATION是一次循环的角度，

NUM_POINTS是循环总次数，

renderProgress是当前变化的进度，

mRotationCount是当前循环位置。

在上述技术方案的基础上，设置每次绘制时画笔mPaint的宽度mPaint.setStrokeWidth时，调用getStrokeWidth()计算特定屏幕下画线的宽度，具体计算方式为：

特定屏幕下画线的宽度等于设置的默认画线宽度*屏幕分辨率screenDensity。

在上述技术方案的基础上，所述第一个参数，由createArcBounds(arcBounds, i)计算得出，确定圆弧的形状和大小范围，需要针对每个线确定下一个画布区域，创建临时的绘制区域arcBounds，其中intervalWidth += getStrokeWidth() / (i + 1.0f) * 1.5f两条线间区域差为上一个线宽度的1.5倍，再根据上一个绘制区域的位置和两条线间的区域就确定了新区域arcBounds的范围。

在上述技术方案的基础上，所述第二个参数，起点角度是mStartDegrees，分别加上180和360表示向左上方和右上方绘制。

在上述技术方案的基础上，所述第三个参数，代表扫过的角度，等于终点角度减去起点角度，即：mSwipeDegrees = mEndDegrees – mStartDegrees。

本发明所述的弧线运动的动画算法，自定义控件，实现圆弧摆动的效果，模拟能量守恒球不断碰撞的动画效果，呈现全新的加载动画页面，凸显个性化及App，具一定扩展性，可修改制作其他样式的加载动画效果，提高开发效率。

附图说明

本发明有如下附图：

图1本发明的流程图。

具体实施方式

以下结合附图对本发明作进一步详细说明。

如图1所示，本发明所述的弧线运动的动画算法，包括如下步骤：

创建画布Canvas，Canvas由android系统提供，供用户在上面进行绘制，

在onDraw回调中，canvas.save()获取canvas保存的状态，

以画布中心为中心进行画布旋转，

canvas.rotate(mGroupRotation,bounds.exactCenterX(),bounds.exactCenterY())，

其中：

mGroupRotation为画布旋转角度，

bounds.exactCenterX(),bounds.exactCenterY()为画布中心坐标，

创建一个新的绘制区域arcBounds做为缓存，并设置内边距mStrokeInset，

设置每次绘制时画笔mPaint的宽度mPaint.setStrokeWidth和颜色mPaint.setColor，

开始画圆弧canvas.drawArc，drawArc获取以下参数信息：

第一个参数为圆弧的形状和大小的范围，

第二个参数是设置圆弧是从哪个角度来绘画的，

第三个参数是设置圆弧扫过的角度，

第四个参数是设置圆弧在绘画的时候是否经过圆形，

第五个参数是定义的画笔mPaint，

最后再恢复到canvas最初的状态canvas.restoreToCount(saveCount)。

在上述技术方案的基础上，画布旋转角度mGroupRotation的计算方法如下：

mGroupRotation = ((FULL_GROUP_ROTATION / NUM_POINTS) * renderProgress) +(FULL_GROUP_ROTATION * (mRotationCount / NUM_POINTS));

其中：

FULL_GROUP_ROTATION是一次循环的角度，

NUM_POINTS是循环总次数，

renderProgress是当前变化的进度，

mRotationCount是当前循环位置。

在上述技术方案的基础上，设置每次绘制时画笔mPaint的宽度mPaint.setStrokeWidth时，调用getStrokeWidth()计算特定屏幕下画线的宽度，具体计算方式为：

特定屏幕下画线的宽度等于设置的默认画线宽度*屏幕分辨率screenDensity。

例如，可采用如下代码：

for (int i = 0; i < mColors.length; i++) {

mPaint.setStrokeWidth(getStrokeWidth() / (i + 1));

mPaint.setColor(mColors[i]);

canvas.drawArc(createArcBounds(arcBounds, i), mStartDegrees +DEGREE_180 * (i % 2), mSwipeDegrees, false, mPaint);

}，

其中：

mColors为默认的颜色值，mColors=DEFAULT_COLORS。

DEFAULT_COLORS中定义了三种颜色 DEFAULT_COLORS = new int[]{Color.RED,Color.GREEN, Color.BLUE}。

canvas.drawArc涉及的参数如前所述，

第一个参数为圆弧的形状和大小的范围，由createArcBounds(arcBounds, i)计算得出，具体算法如下：

private RectF createArcBounds(RectF sourceArcBounds, int index) {

RectF arcBounds = new RectF();

int intervalWidth = 0;

for (int i = 0; i < index; i++) {

intervalWidth += getStrokeWidth() / (i + 1.0f) * 1.5f;

}

int arcBoundsLeft = (int) (sourceArcBounds.left + intervalWidth);

int arcBoundsTop = (int) (sourceArcBounds.top + intervalWidth);

int arcBoundsRight = (int) (sourceArcBounds.right -intervalWidth);

int arcBoundsBottom = (int) (sourceArcBounds.bottom -intervalWidth);

arcBounds.set(arcBoundsLeft, arcBoundsTop, arcBoundsRight,arcBoundsBottom);

return arcBounds;

}

其中：确定圆弧的形状和大小范围，需要针对每个线确定下一个画布区域，创建临时的绘制区域arcBounds，其中intervalWidth += getStrokeWidth() / (i + 1.0f) * 1.5f两条线间区域差为上一个线宽度的1.5倍，再根据上一个绘制区域的位置和两条线间的区域就确定了新区域arcBounds的范围，

第二个参数是设置圆弧是从哪个角度来绘画的，起点角度是mStartDegrees，分别加上180和360表示向左上方和右上方绘制，

第三个参数是设置圆弧扫过的角度，mSwipeDegrees代表扫过的角度，等于终点角度减去起点角度，即：mSwipeDegrees = mEndDegrees – mStartDegrees，

第四个参数是设置圆弧在绘画的时候是否经过圆形，

第五个参数是定义的画笔mPaint。

本说明书中未作详细描述的内容属于本领域专业技术人员公知的现有技术。

Claims (6)

1.一种弧线运动的动画算法，其特征在于，包括如下步骤：

创建画布Canvas，Canvas由android系统提供，供用户在上面进行绘制，

在onDraw回调中，canvas.save()获取canvas保存的状态，

以画布中心为中心进行画布旋转，

创建一个新的绘制区域arcBounds做为缓存，并设置内边距mStrokeInset，

设置每次绘制时画笔mPaint的宽度mPaint.setStrokeWidth和颜色mPaint.setColor，

开始画圆弧canvas.drawArc，drawArc获取以下参数信息：

第一个参数为圆弧的形状和大小的范围，

第二个参数是设置圆弧是从哪个角度来绘画的，

第三个参数是设置圆弧扫过的角度，

第四个参数是设置圆弧在绘画的时候是否经过圆形，

第五个参数是定义的画笔mPaint，

最后再恢复到canvas最初的状态canvas.restoreToCount(saveCount)。

2.如权利要求1所述的弧线运动的动画算法，其特征在于：画布旋转角度mGroupRotation的计算方法如下：

mGroupRotation = ((FULL_GROUP_ROTATION / NUM_POINTS) * renderProgress) +(FULL_GROUP_ROTATION * (mRotationCount / NUM_POINTS));

其中：

FULL_GROUP_ROTATION是一次循环的角度，

NUM_POINTS是循环总次数，

renderProgress是当前变化的进度，

mRotationCount是当前循环位置。

3.如权利要求1所述的弧线运动的动画算法，其特征在于：设置每次绘制时画笔mPaint的宽度mPaint.setStrokeWidth时，调用getStrokeWidth()计算特定屏幕下画线的宽度，具体计算方式为：

特定屏幕下画线的宽度等于设置的默认画线宽度*屏幕分辨率screenDensity。

4.如权利要求1所述的弧线运动的动画算法，其特征在于：所述第一个参数，由createArcBounds(arcBounds, i)计算得出，确定圆弧的形状和大小范围，需要针对每个线确定下一个画布区域，创建临时的绘制区域arcBounds，其中intervalWidth +=getStrokeWidth() / (i + 1.0f) * 1.5f两条线间区域差为上一个线宽度的1.5倍，再根据上一个绘制区域的位置和两条线间的区域就确定了新区域arcBounds的范围。

5.如权利要求1所述的弧线运动的动画算法，其特征在于：所述第二个参数，起点角度是mStartDegrees，分别加上180和360表示向左上方和右上方绘制。

6.如权利要求1所述的弧线运动的动画算法，其特征在于：所述第三个参数，代表扫过的角度，等于终点角度减去起点角度，即：mSwipeDegrees = mEndDegrees –mStartDegrees。