在婚纱店做网站优化,网站维护有文化建设费,python 建设网站,网站建设现状和前景文章概览 1 PathMeasure概述2 实现路径加载动画3 实现箭头加载动画4 实现操作成功动画 本系列将介绍以下内容#xff1a; Android动画 1 PathMeasure概述
PathMeasure是一个单独的类#xff0c;其全部源码如下#xff08;请详细研读注释#xff09;#xff1a;
package… 文章概览 1 PathMeasure概述2 实现路径加载动画3 实现箭头加载动画4 实现操作成功动画 本系列将介绍以下内容
Android动画 1 PathMeasure概述
PathMeasure是一个单独的类其全部源码如下请详细研读注释
package android.graphics;public class PathMeasure {private Path mPath;public PathMeasure() {mPath null;native_instance native_create(0, false);}/*** param forceClosed If true, then the path will be considered as closed* even if its contour was not explicitly closed.* 如果为 true则路径将被视为 封闭 即使其轮廓没有明确封闭。*/public PathMeasure(Path path, boolean forceClosed) {// The native implementation does not copy the path, prevent it from being GCdmPath path;native_instance native_create(path ! null ? path.readOnlyNI() : 0,forceClosed);}public void setPath(Path path, boolean forceClosed) {mPath path;native_setPath(native_instance,path ! null ? path.readOnlyNI() : 0,forceClosed);}/*** Return the total length of the current contour, or 0 if no path is* associated with this measure object.* 返回当前轮廓的总长度如果此测量对象没有关联路径则返回 0。*/public float getLength() {return native_getLength(native_instance);}public boolean getPosTan(float distance, float pos[], float tan[]) {if (pos ! null pos.length 2 ||tan ! null tan.length 2) {throw new ArrayIndexOutOfBoundsException();}return native_getPosTan(native_instance, distance, pos, tan);}public static final int POSITION_MATRIX_FLAG 0x01; // must match flags in SkPathMeasure.hpublic static final int TANGENT_MATRIX_FLAG 0x02; // must match flags in SkPathMeasure.hpublic boolean getMatrix(float distance, Matrix matrix, int flags) {return native_getMatrix(native_instance, distance, matrix.ni(), flags);}/*** param dst 将截取的Path添加不是替换到dst中。* param startWithMoveTo 起始点是否使用moveTo* * 注意* 1、路径截取是以路径的左上角为起始点开始的。* 2、路径的截取方向与路径的生成方向相同。* 3、截取的Path片段是被添加到路径dst中而不是替换dst中的内容。* 4、如果startWithMoveTo为true则被截取出来的Path片段保持原状如果为false则会将截取出来的Path片段的起始点移动到dst的最后一个点以保证dst路径的连续性。*/public boolean getSegment(float startD, float stopD, Path dst, boolean startWithMoveTo) {float length getLength();if (startD 0) {startD 0;}if (stopD length) {stopD length;}if (startD stopD) {return false;}return native_getSegment(native_instance, startD, stopD, dst.mutateNI(), startWithMoveTo);}/*** Return true if the current contour is closed()* 如果当前轮廓封闭则返回 true()*/public boolean isClosed() {return native_isClosed(native_instance);}/*** Move to the next contour in the path. Return true if one exists, or* false if were done with the path.* 移动到路径中的下一个轮廓。如果存在下一个轮廓则返回 true* 如果已经完成路径的移动则返回 false。* * 注意通过该方法得到的曲线的顺序与Path中添加的顺序相同。*/public boolean nextContour() {return native_nextContour(native_instance);}protected void finalize() throws Throwable {native_destroy(native_instance);native_instance 0; // Other finalizers can still call us.}private static native long native_create(long native_path, boolean forceClosed);private static native void native_setPath(long native_instance, long native_path, boolean forceClosed);private static native float native_getLength(long native_instance);private static native boolean native_getPosTan(long native_instance, float distance, float pos[], float tan[]);private static native boolean native_getMatrix(long native_instance, float distance, long native_matrix, int flags);private static native boolean native_getSegment(long native_instance, float startD, float stopD, long native_path, boolean startWithMoveTo);private static native boolean native_isClosed(long native_instance);private static native boolean native_nextContour(long native_instance);private static native void native_destroy(long native_instance);private long native_instance;
}PathMeasure的初始化方法是
Path mCirclePath new Path();PathMeasure mPathMeasure new PathMeasure();
mPathMeasure.setPath(mCirclePath, true);或
Path mCirclePath new Path();
PathMeasure mPathMeasure new PathMeasure(mCirclePath, false);getLength()、getSegment()都只会针对其中第一条线段进行计算。它们针对的是当前的曲线而不是整个Path所以getLength()方法获取到的是当前曲线的长度而不是整个Path的长度。
2 实现路径加载动画
主要使用PathMeasure的getSegment(x)方法实现动画效果。
直接在布局文件中引用
?xml version1.0 encodingutf-8?
LinearLayout xmlns:androidhttp://schemas.android.com/apk/res/androidandroid:layout_widthmatch_parentandroid:layout_heightmatch_parentandroid:orientationverticalcom.example.myapplication.GetSegmentViewandroid:layout_widthmatch_parentandroid:layout_heightmatch_parent //LinearLayout自定义的GetSegmentView
package com.example.myapplication;import android.animation.ValueAnimator;
import android.content.Context;
import android.graphics.*;
import android.util.AttributeSet;
import android.view.View;import androidx.annotation.NonNull;public class GetSegmentView extends View {private Paint mPaint;private Path mCirclePath, mDstPath;private PathMeasure mPathMeasure;private Float mCurAnimValue;public GetSegmentView(Context context, AttributeSet attrs) {super(context, attrs);setLayerType(LAYER_TYPE_SOFTWARE, null);mPaint new Paint(Paint.ANTI_ALIAS_FLAG);mPaint.setStyle(Paint.Style.STROKE);mPaint.setStrokeWidth(4);mPaint.setColor(Color.BLACK);mDstPath new Path();mCirclePath new Path();mCirclePath.addCircle(100, 100, 50, Path.Direction.CW);mPathMeasure new PathMeasure(mCirclePath, true);ValueAnimator animator ValueAnimator.ofFloat(0, 1);animator.setRepeatCount(ValueAnimator.INFINITE);animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {Overridepublic void onAnimationUpdate(NonNull ValueAnimator animation) {mCurAnimValue (Float) animation.getAnimatedValue();invalidate();}});animator.setDuration(2000);animator.start();}Overrideprotected void onDraw(Canvas canvas) {super.onDraw(canvas);float length mPathMeasure.getLength();float stop length * mCurAnimValue;float start (float) (stop - ((0.5 - Math.abs(mCurAnimValue - 0.5)) * length));// 清空之前生成的路径mDstPath.reset();canvas.drawColor(Color.WHITE);mPathMeasure.getSegment(0, stop, mDstPath, true);
// mPathMeasure.getSegment(start, stop, mDstPath, true);canvas.drawPath(mDstPath, mPaint);}}效果图 上述动画效果的起始位置是从0开始的将onDraw(x)中的代码切换改变动画的起始位置
// mPathMeasure.getSegment(0, stop, mDstPath, true);mPathMeasure.getSegment(start, stop, mDstPath, true);效果图
3 实现箭头加载动画
利用PathMeasure的getPosTan(x)方法实现箭头加载动画。
箭头资源图片 布局文件引用
?xml version1.0 encodingutf-8?
LinearLayout xmlns:androidhttp://schemas.android.com/apk/res/androidandroid:layout_widthmatch_parentandroid:layout_heightmatch_parentandroid:orientationverticalcom.example.myapplication.GetPosTanViewandroid:layout_widthmatch_parentandroid:layout_heightmatch_parent //LinearLayout自定义的GetPosTanView
package com.example.myapplication;import android.animation.ValueAnimator;
import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Matrix;
import android.graphics.Paint;
import android.graphics.Path;
import android.graphics.PathMeasure;
import android.util.AttributeSet;
import android.view.View;import androidx.annotation.NonNull;public class GetPosTanView extends View {private Paint mPaint;private Path mCirclePath, mDstPath;private PathMeasure mPathMeasure;private Float mCurAnimValue;private Bitmap mArrawBmp;private float[] pos new float[2];private float[] tan new float[2];public GetPosTanView(Context context, AttributeSet attrs) {super(context, attrs);setLayerType(LAYER_TYPE_SOFTWARE, null);// 缩小箭头图片BitmapFactory.Options options new BitmapFactory.Options();options.inSampleSize 6;mArrawBmp BitmapFactory.decodeResource(getResources(), R.drawable.arraw, options);mPaint new Paint(Paint.ANTI_ALIAS_FLAG);mPaint.setStyle(Paint.Style.STROKE);mPaint.setStrokeWidth(4);mPaint.setColor(Color.BLACK);mDstPath new Path();mCirclePath new Path();mCirclePath.addCircle(200, 200, 50, Path.Direction.CW);mPathMeasure new PathMeasure(mCirclePath, true);ValueAnimator animator ValueAnimator.ofFloat(0, 1);animator.setRepeatCount(ValueAnimator.INFINITE);animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {Overridepublic void onAnimationUpdate(NonNull ValueAnimator animation) {mCurAnimValue (Float) animation.getAnimatedValue();invalidate();}});animator.setDuration(2000);animator.start();}Overrideprotected void onDraw(Canvas canvas) {super.onDraw(canvas);canvas.drawColor(Color.WHITE);float length mPathMeasure.getLength();float stop length * mCurAnimValue;mDstPath.reset();mPathMeasure.getSegment(0, stop, mDstPath, true);canvas.drawPath(mDstPath, mPaint);// 箭头旋转、位移实现方式一通过getPosTan(x)实现mPathMeasure.getPosTan(stop, pos, tan);float degrees (float) (Math.atan2(tan[1], tan[0]) * 180.0 / Math.PI);Matrix matrix new Matrix();matrix.postRotate(degrees, mArrawBmp.getWidth() / 2, mArrawBmp.getHeight() / 2);matrix.postTranslate(pos[0] - mArrawBmp.getWidth() / 2, pos[1] - mArrawBmp.getHeight() / 2);// 箭头旋转、位移实现方式二通过getMatrix(x)实现/*Matrix matrix new Matrix();mPathMeasure.getMatrix(stop,matrix,PathMeasure.POSITION_MATRIX_FLAG | PathMeasure.TANGENT_MATRIX_FLAG);matrix.preTranslate(-mArrawBmp.getWidth() / 2, -mArrawBmp.getHeight() / 2);*/canvas.drawBitmap(mArrawBmp, matrix, mPaint);}}效果图
4 实现操作成功动画
需要用到PathMeasure的nextContour()方法。
布局文件
?xml version1.0 encodingutf-8?
LinearLayout xmlns:androidhttp://schemas.android.com/apk/res/androidandroid:layout_widthmatch_parentandroid:layout_heightmatch_parentandroid:orientationverticalcom.example.myapplication.OperationViewandroid:layout_widthmatch_parentandroid:layout_heightmatch_parent //LinearLayout自定义OperationView:
package com.example.myapplication;import android.animation.ValueAnimator;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Path;
import android.graphics.PathMeasure;
import android.util.AttributeSet;
import android.view.View;import androidx.annotation.NonNull;public class OperationView extends View {private Paint mPaint;private Path mCirclePath, mDstPath;private PathMeasure mPathMeasure;private Float mCurAnimValue;private int mCentX 200;private int mCentY 200;private int mRadius 50;boolean mNext false;public OperationView(Context context, AttributeSet attrs) {super(context, attrs);setLayerType(LAYER_TYPE_SOFTWARE, null);mPaint new Paint(Paint.ANTI_ALIAS_FLAG);mPaint.setStyle(Paint.Style.STROKE);mPaint.setStrokeWidth(4);mPaint.setColor(Color.BLACK);mDstPath new Path();mCirclePath new Path();mCirclePath.addCircle(mCentX, mCentY, mRadius, Path.Direction.CW);mCirclePath.moveTo(mCentX - mRadius / 2, mCentY);mCirclePath.lineTo(mCentX, mCentY mRadius / 2);mCirclePath.lineTo(mCentX mRadius / 2, mCentY - mRadius / 3);mPathMeasure new PathMeasure(mCirclePath, false);// 0~1之间画第一条路径1~2之间画第二条路径ValueAnimator animator ValueAnimator.ofFloat(0, 2);animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {Overridepublic void onAnimationUpdate(NonNull ValueAnimator animation) {mCurAnimValue (Float) animation.getAnimatedValue();invalidate();}});animator.setDuration(4000);animator.start();}Overrideprotected void onDraw(Canvas canvas) {super.onDraw(canvas);canvas.drawColor(Color.WHITE);if (mCurAnimValue 1) {float stop mPathMeasure.getLength() * mCurAnimValue;mPathMeasure.getSegment(0, stop, mDstPath, true);} else {if (!mNext) {mNext true;mPathMeasure.getSegment(0, mPathMeasure.getLength(), mDstPath, true);mPathMeasure.nextContour();}float stop mPathMeasure.getLength() * (mCurAnimValue - 1);mPathMeasure.getSegment(0, stop, mDstPath, true);}canvas.drawPath(mDstPath, mPaint);}}效果图
参考文献 [1] UML中的类图及类图之间的关系 [2] 启舰.Android自定义控件开发入门与实战[M].北京:电子工业出版社2018
微信公众号TechU
