Smooth shape shifting animation

Question

How to implement smooth shape shifting animation in android ?

I'm rendering polygon shapes on camera preview using canvas.draw(path, paint) in OnDraw() method of my custom view.

The path is being rendered something like this:

for (int i = 0; i < pointList.size(); i++) {
        Point currentPoint = adjustedPointList.get(i);

        if (i == 0) {
            //for the first point, we only have to move to that point
            firstPoint = currentPoint;
            mPath.moveTo(currentPoint.getX(), currentPoint.getY());
            //Animation here 

        } else {
            //otherwise we draw a line between last position and current point
            mPath.lineTo(currentPoint.getX(), currentPoint.getY());
            //Animation here

        }
    }


    //we have to draw a last line between last and first point
    if (firstPoint != null) {
        mPath.lineTo(firstPoint.getX(), firstPoint.getY());
        //Animation here
    }

I tried the ObjectAnimator class like here but had no effect. Since this is constantly called inside a thread, the shape changes from frame to frame. This is where I want to have a smooth animation like here which is in iOS. How can I do the same for my above illustrated rendering ?

I have also tried solutions for the following questions :

DashPathEffect

path animation

attach an animator to a path

Value Animator

But nothing served my purpose of smooth shape shifting or even animating the drawing of path. currently the shape shift is very flickery.

Also, lot of the shape shifting animation references for android uses bitmaps or SVG which is again not useful for me.

How can I implement this in android ? or is there a different approach to this ? If so, I would like to know everything about it. Thanks!

see https://android.googlesource.com/platform/frameworks/support/+/34cbdb2/v7/vectordrawable/src/android/support/v7/graphics/drawable/PathParser.java#319 and "animate" the `fraction` from [0..1] — pskink, Oct 02 '18 at 14:36
@pskink again, I'm not using pathdataNode. The above script is rendering shapes with dynamic points. I do not understand how can I use this in my case. Could you please elaborate ? Thanks again. — chirag, Oct 04 '18 at 11:55
does it work? do you see a blue circle? what do you see if you click on it? — pskink, Oct 05 '18 at 01:45
Wow Amazing, @pskink How you create `PathParser.createNodesFromPathData` with diff values ? — Abhay Koradiya, Oct 06 '18 at 06:15
Mean How can Get path data for Different shape LIke , dest data: `M 16,0 C 16,1 16,15 16,16 15,16 1,16 0,16 0,15 0,1 0,0 1, 0 15, 0 16,0 z` — Abhay Koradiya, Oct 06 '18 at 07:10
@AbhayKoradiya see [9.3. Path data](https://www.w3.org/TR/SVG/paths.html#PathData) and [Drawing paths](https://www.androiddesignpatterns.com/2016/11/introduction-to-icon-animation-techniques.html#drawing-paths) — pskink, Oct 06 '18 at 07:27
@pskink it works. Thanks. But how do I use it in my case? I'm just using a simple path object. — chirag, Oct 06 '18 at 23:04
see https://stackoverflow.com/questions/52610321/smooth-shape-shifting-animation#comment92282485_52610321 — pskink, Oct 07 '18 at 05:34

Smooth shape shifting animation

0 Answers0