CN108829489A - 一种弧线变速运动的动画算法 - Google Patents

Abstract

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

Description

一种弧线变速运动的动画算法

技术领域

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

背景技术

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

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

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

发明内容

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

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

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

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

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

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

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

设置每次绘制时画笔mPaint的宽度mPaint.setStrokeWidth和颜色mPaint.setColor，创建画笔mPaint时刻一并创建绘制区域mTempBounds，绘制区域mTempBounds用于布局界面CircleRotateActivity，

开始画圆弧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。

在上述技术方案的基础上，在CircleRotateActivity界面中用LoadingDrawable创建出一个背景mWhorlDrawable并设置为mIvWhorl控件的背景，

在该界面onStart()时调用mWhorlDrawable.start()，

在该界面onStop()时调用mWhorlDrawable.stop()；

创建mWhorlDrawable 时传入了一个加载渲染器LoadingRenderer，newWhorlLoadingRenderer(this)对象。

在上述技术方案的基础上，WhorlLoadingRenderer继承LoadingRenderer，

创建一个贝塞尔曲线的插补器FastOutSlowInInterpolator()，运动规律是由慢到快再到慢，FastOutSlowInInterpolator产生速度先慢再快最后再慢的变速值。

在上述技术方案的基础上，创建一个贝塞尔曲线的插补器FastOutSlowInInterpolator的具体包括：

执行new FastOutSlowInInterpolator()，

赋值给MATERIAL_INTERPOLATOR，

限定MATERIAL_INTERPOLATOR为private static final Interpolator。

在上述技术方案的基础上，调用插补器通过如下方式：

创建动画监听器mAnimatorListener，设置动画开始时的操作和动画过程中的操作，

动画过程中的的时候，onAnimationRepeat方法会在动画在重复播放的时候被回调，storeOriginals()保存上一次绘制位置，mStartDegrees = mEndDegrees，设置下一次起点为上一次的终点；mRotationCount = (mRotationCount + 1) % (NUM_POINTS)重新设置当前循环位置，

动画开始的时候，mRotationCount=0，把当前循环位置置为0。

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

附图说明

本发明有如下附图：

图1本发明的流程图。

具体实施方式

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

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

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

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

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

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

其中：

mGroupRotation为画布旋转角度，

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

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

在构造方法中，设置了默认的颜色值；setInsets((int) getWidth(), (int)getHeight())再根据默认的宽高计算内边距mStrokeInset，可使动画居中，

设置每次绘制时画笔mPaint的宽度mPaint.setStrokeWidth和颜色mPaint.setColor，创建画笔mPaint时刻一并创建绘制区域mTempBounds，绘制区域mTempBounds用于布局界面CircleRotateActivity，

开始画圆弧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是一次循环的角度（一次循环所占角度），FULL_GROUP_ROTATION= 3.0f * DEGREE_360，

NUM_POINTS是循环总次数，默认NUM_POINTS = 5，

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表示向左上方和右上方绘制，上述实施例是加上180，即mStartDegrees +DEGREE_180 * (i % 2)，DEGREE_180 = 180作为初始旋转角度，显然加上360是指mStartDegrees + DEGREE_360 * (i % 2)，DEGREE_360 = 360作为初始旋转角度，

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

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

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

在上述技术方案的基础上，在CircleRotateActivity界面中用LoadingDrawable创建出一个背景mWhorlDrawable并设置为mIvWhorl控件的背景，

在该界面onStart()时调用mWhorlDrawable.start()，

在该界面onStop()时调用mWhorlDrawable.stop()；

用LoadingDrawable创建背景mWhorlDrawable的代码可如下：

LoadingDrawable mWhorlDrawable = new LoadingDrawable(newWhorlLoadingRenderer(this));

LoadingDrawable是一个使用Drawable来绘制Loading动画的库，创建mWhorlDrawable时传入了一个加载渲染器LoadingRenderer，new WhorlLoadingRenderer(this)对象。

在上述技术方案的基础上，WhorlLoadingRenderer继承LoadingRenderer，

创建一个贝塞尔曲线的插补器FastOutSlowInInterpolator()，运动规律是由慢到快再到慢，FastOutSlowInInterpolator产生速度先慢再快最后再慢的变速值，

创建一个贝塞尔曲线的插补器FastOutSlowInInterpolator的具体包括：

执行new FastOutSlowInInterpolator()，

赋值给MATERIAL_INTERPOLATOR，

限定MATERIAL_INTERPOLATOR为private static final Interpolator。

在使用动画Animation或者AnimationSet的时候，有一个interpolator插补器的属性。可以使用这个属性来修饰动画运动的速率。比如加速、先加速再加速等。

本发明中，调用插补器通过如下方式：

创建动画监听器mAnimatorListener，设置动画开始时的操作和动画过程中的操作，

创建动画监听器mAnimatorListener，

代码如下：

private final Animator.AnimatorListener mAnimatorListener = newAnimatorListenerAdapter() {

动画过程中的的时候，onAnimationRepeat方法会在动画在重复播放的时候被回调，storeOriginals()保存上一次绘制位置，mStartDegrees = mEndDegrees，设置下一次起点为上一次的终点；mRotationCount = (mRotationCount + 1) % (NUM_POINTS)重新设置当前循环位置，

代码如下：

@Override

public void onAnimationRepeat(Animator animator) {

super.onAnimationRepeat(animator);

storeOriginals();

mStartDegrees = mEndDegrees;

mRotationCount = (mRotationCount + 1) % (NUM_POINTS);

}

动画开始的时候，mRotationCount=0，把当前循环位置置为0；

代码如下：

@Override

public void onAnimationStart(Animator animation) {

super.onAnimationStart(animation);

mRotationCount = 0;

}

}。

使用时，把创建的监听器mAnimatorListener设置给mRenderAnimator，这是android系统提供的一种属性动画，用来控制控件的动画。

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

Claims (10)

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

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

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

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

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

设置每次绘制时画笔mPaint的宽度mPaint.setStrokeWidth和颜色mPaint.setColor，创建画笔mPaint时刻一并创建绘制区域mTempBounds，绘制区域mTempBounds用于布局界面CircleRotateActivity，

开始画圆弧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。

7.如权利要求1所述的弧线变速运动的动画算法，其特征在于：在CircleRotateActivity界面中用LoadingDrawable创建出一个背景mWhorlDrawable并设置为mIvWhorl控件的背景，

在该界面onStart()时调用mWhorlDrawable.start()，

在该界面onStop()时调用mWhorlDrawable.stop()；

创建mWhorlDrawable 时传入了一个加载渲染器LoadingRenderer，newWhorlLoadingRenderer(this)对象。

8.如权利要求7所述的弧线变速运动的动画算法，其特征在于：WhorlLoadingRenderer继承LoadingRenderer，

创建一个贝塞尔曲线的插补器FastOutSlowInInterpolator()，运动规律是由慢到快再到慢，FastOutSlowInInterpolator产生速度先慢再快最后再慢的变速值。

9.如权利要求8所述的弧线变速运动的动画算法，其特征在于：创建一个贝塞尔曲线的插补器FastOutSlowInInterpolator的具体包括：

执行new FastOutSlowInInterpolator()，

赋值给MATERIAL_INTERPOLATOR，

限定MATERIAL_INTERPOLATOR为private static final Interpolator。

10.如权利要求9所述的弧线变速运动的动画算法，其特征在于：调用插补器通过如下方式：

创建动画监听器mAnimatorListener，设置动画开始时的操作和动画过程中的操作，

动画过程中的的时候，onAnimationRepeat方法会在动画在重复播放的时候被回调，storeOriginals()保存上一次绘制位置，mStartDegrees = mEndDegrees，设置下一次起点为上一次的终点；mRotationCount = (mRotationCount + 1) % (NUM_POINTS)重新设置当前循环位置，

动画开始的时候，mRotationCount=0，把当前循环位置置为0。