使用图片实现椭圆路径动画

Question

我正在尝试实现椭圆路径动画，我想使用图像展示路径动画，我尝试了https://github.com/matthewrkula/AnimatedPathView，但它不能用于椭圆。我还尝试了以下代码来实现椭圆路径，但它只显示圆形，请问有什么好的方法吗？提前感谢！！！

MyAnimation.java

public class MyAnimation extends Animation {

    private View view;
    private float cx, cy;           // center x,y position of circular path
    private float prevX, prevY;     // previous x,y position of image during animation
    private float r;                // radius of circle
    private float prevDx, prevDy;


    /**
     * @param view - View that will be animated
     * @param r - radius of circular path
     */
    public MyAnimation(View view, float r){
        this.view = view;
        this.r = r;
    }

    @Override
    public boolean willChangeBounds() {
        return true;
    }

    @Override
    public void initialize(int width, int height, int parentWidth, int parentHeight) {
        // calculate position of image center
        int cxImage = width / 2;
        int cyImage = height / 1;
        cx = view.getLeft() + cxImage;
        cy = view.getTop() + cyImage;

        // set previous position to center
        prevX = cx;
        prevY = cy;
    }

    @Override
    protected void applyTransformation(float interpolatedTime, Transformation t) {
        if(interpolatedTime == 0){
            t.getMatrix().setTranslate(prevDx, prevDy);
            return;
        }

        float angleDeg = (interpolatedTime * 360f + 90) % 360;
        float angleRad = (float) Math.toRadians(angleDeg);

        // r = radius, cx and cy = center point, a = angle (radians)
        float x = (float) (cx + r * Math.cos(angleRad));
        float y = (float) (cy + r * Math.sin(angleRad));


        float dx = prevX - x;
        float dy = prevY - y;

        prevX = x;
        prevY = y;

        prevDx = dx;
        prevDy = dy;


        t.getMatrix().setTranslate(dx, dy);
    }
}

PathAnimation.java

image = (ImageView) findViewById(R.id.image);

        image.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Animation anim = new MyAnimation(image, 300);
                anim.setDuration(1000);
                image.startAnimation(anim);
            }
        });

- user5418227

---

请各位大神帮忙解决这个问题!!! - user5418227

Answer 1

我在尝试使用这个自定义类之后，找到了解决方案。

AnimationView.java

public class AnimationView extends View {

    Paint paint;
    long animationDuration = 10000;
    int framesPerSecond = 60;
    Bitmap bm;
    int bm_offsetX, bm_offsetY;

    Path animPath;
    PathMeasure pathMeasure;
    float pathLength;

    float step;   //distance each step
    float distance;  //distance moved

    float[] pos;
    float[] tan;

    Matrix matrix;

    public AnimationView(Context context) {
        super(context);
        initMyView();
    }

    public AnimationView(Context context, AttributeSet attrs) {
        super(context, attrs);
        initMyView();
    }

    public AnimationView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        initMyView();
    }

    @TargetApi(Build.VERSION_CODES.LOLLIPOP)
    public void initMyView(){
        paint = new Paint();
        paint.setColor(Color.RED);
        paint.setStrokeWidth(5);
        paint.setStyle(Paint.Style.STROKE);

        bm = BitmapFactory.decodeResource(getResources(), R.mipmap.ic_launcher);
        bm_offsetX = bm.getWidth()/2;
        bm_offsetY = bm.getHeight()/2;
        animPath = new Path();
        animPath.moveTo(100, 100);

        animPath.addArc(new RectF(1, 100, 300, 600), 1, 800);
        animPath.close();

        pathMeasure = new PathMeasure(animPath, false);
        pathLength = pathMeasure.getLength();

        Toast.makeText(getContext(), "pathLength: " + pathLength, Toast.LENGTH_LONG).show();

        step = 1;
        distance = 0;
        pos = new float[2];
        tan = new float[2];

        matrix = new Matrix();
    }

    @Override
    protected void onDraw(Canvas canvas) {     
        canvas.drawPath(animPath, paint);      
        if(distance < pathLength){
            pathMeasure.getPosTan(distance, pos, tan);

            matrix.reset();
            float degrees = (float)(Math.atan2(tan[1], tan[0])*180.0/Math.PI);
            matrix.postRotate(degrees, bm_offsetX, bm_offsetY);
            matrix.postTranslate(pos[0]-bm_offsetX, pos[1]-bm_offsetY);
            canvas.drawBitmap(bm, matrix, null);
            distance += step;
        }else{
            distance = 0;
        }
        invalidate();
    }
}

并放入XML中。

<com.example.android.mydemo.animation.pathanimation.AnimationView
        android:layout_width="match_parent"
        android:layout_height="450dp" />

- user5418227