android高级动画——贝塞尔曲线

Android高级动画所有代码

简介：贝塞尔曲线是计算机图形学中相当重要的参数曲线。可以用数学公式来描述一段曲线。

用途：1、贝塞尔曲线可以帮助我们在二维平面内用平滑的曲线画出各种图形。

2、同时也可以给动画提供一个平滑的曲线运动路径。

android中我们通过Path可以画出二阶跟三阶贝塞尔曲线。复杂的图形我们可以组合几个二阶和三阶的贝塞尔曲线就可以实现。

这次整理一下沿着二阶贝塞尔曲线运动的例子。下面是一个沿着二阶贝塞尔曲线运动的小球的代码和讲解。

示例代码：

1、总共有4个代码文件activity、view、Evalutor和xml文件。

2、先分析下最重要的view文件：

public class TestMove extends View implements View.OnClickListener
{
    private float mCircleX,mCircleY;    //小球的圆心

    private Path mMovePath;         //这是用来画贝塞尔曲线的
    private Paint mPaintBezier,mPaintCircle;    //设置画贝塞尔曲线和园的画笔

    private float mStartPointX,mStartPointY;    //二阶贝塞尔曲线的起始点
    private float mEndPointX,mEndPointY;        //二阶贝塞尔曲线的终点
    private float mFlagPointX,mFlagPointY;      //二阶贝塞尔曲线的支撑点


    public TestMove(Context context) {
        super(context);
    }

    public TestMove(Context context, AttributeSet attrs) {
        super(context, attrs);

        //初始化画笔
        mPaintBezier=new Paint(Paint.ANTI_ALIAS_FLAG);
        mPaintBezier.setStrokeWidth(8);
        mPaintBezier.setStyle(Paint.Style.STROKE);
        mPaintBezier.setColor(Color.BLUE);

        mPaintCircle=new Paint(Paint.ANTI_ALIAS_FLAG);
        mPaintCircle.setStrokeWidth(8);
        mPaintCircle.setStyle(Paint.Style.FILL_AND_STROKE);
        mPaintCircle.setColor(Color.BLUE);

        setOnClickListener(this);
    }

    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);

        /**
         * 系统每一次需要计算大小时都会执行这个方法，比如view改变的时候。所以我们在这里
         * 获得起始点、终点和支撑点
         */
        mStartPointX = w / 4;
        mStartPointY = h / 2 - 200;

        mEndPointX = w * 3 / 4;
        mEndPointY = h / 2 - 200;

        mFlagPointX = w / 2;
        mFlagPointY = h / 2 - 400;

        mCircleX=mStartPointX;
        mCircleY=mStartPointY;

        mMovePath=new Path();

    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);

        //画圆
        canvas.drawCircle(mCircleX,mCircleY,30,mPaintCircle);

        //给Path设置贝塞尔曲线，然后canvas画
        mMovePath.reset();
        mMovePath.moveTo(mStartPointX,mStartPointY);
        /**
         * quadTo()绘制二阶贝塞尔曲线
         * cubicTo()绘制三阶贝塞尔曲线
         */
        mMovePath.quadTo(mFlagPointX,mFlagPointY,mEndPointX,mEndPointY);
        canvas.drawPath(mMovePath,mPaintBezier);

    }

    @Override
    public void onClick(View v) {
        PointF flagPoint1=new PointF(mFlagPointX,mFlagPointY);

        PointF startPoint=new PointF(mStartPointX,mStartPointY);
        PointF endPoint=new PointF(mEndPointX,mEndPointY);

        /**
         * 在startPoint和endPoint之间运动时返回一个ValueAnimator的值
         * MoveEvalutor在它的文件里详细解释
         */
        ValueAnimator mValueAnimator=ValueAnimator.ofObject(new MoveEvalutor(flagPoint1),
                startPoint,endPoint);
        mValueAnimator.setDuration(4000);
        mValueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
                /**
                 * 把小球的圆心设置到运动点
                 */
                PointF point=(PointF) animation.getAnimatedValue();
                mCircleX=point.x;
                mCircleY=point.y;
                invalidate();
            }
        });
        mValueAnimator.start();
    }
}

3、MoveEvalutor.java的代码：

/**
 * Created by zhaofeng on 2017/2/13.
 *
 * Evalutor允许开发者在任意类型上创建动画，以此来执行动画系统不能直接识别的动画类型。
 */

public class MoveEvalutor implements TypeEvaluator<PointF>{

    private PointF mFlagPoint1;

    public MoveEvalutor(PointF flagPoint) {
        mFlagPoint1=flagPoint;
    }
    @Override
    public PointF evaluate(float fraction, PointF startValue, PointF endValue) {
        return CalculateBezierPointForQuadratic(fraction,startValue,mFlagPoint1,endValue);
    }
    /**
     * B(t) = (1 - t)^2 * P0 + 2t * (1 - t) * P1 + t^2 * P2, t ∈ [0,1]
     *计算贝塞尔曲线的运动点，这个代码在网上可以找到，二阶的三阶的。
     * @param t  曲线长度比例
     * @param p0 起始点
     * @param p1 控制点
     * @param p2 终止点
     * @return t对应的点
     */
    public static PointF CalculateBezierPointForQuadratic(float t, PointF p0, PointF p1, PointF p2) {
        PointF point = new PointF();
        float temp = 1 - t;
        point.x = temp * temp * p0.x + 2 * t * temp * p1.x + t * t * p2.x;
        point.y = temp * temp * p0.y + 2 * t * temp * p1.y + t * t * p2.y;
        return point;
    }
}

4、在activity_move_on_bezier.xml，在xml文件中引入view文件。

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_move_on_bezier"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.zfeng.bazier.MoveOnBezierActivity">
    <com.zfeng.bazier.view.MoveOnBezierView
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

</RelativeLayout>

5、在activity中执行：

public class MoveOnBezierActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_move_on_bezier);
    }
}

以上就是全部的代码，点击view，小球就会沿着二阶贝塞尔曲线运动。

参考资料：

https://developer.android.com/reference/android/view/View.html

https://developer.android.com/reference/android/graphics/Path.html

https://developer.android.com/reference/android/animation/ValueAnimator.html

https://developer.android.com/reference/android/animation/TypeEvaluator.html

android高级动画——贝塞尔曲线

猜你喜欢