CODEWITHSUNDEEP
androidsvgandroid-vectordrawable
Tíbó
Tíbó

Reputation: 1218

AnimatedVectorDrawable circle to line

I want to realize an animation that transform a circle into a line in Android.

I saw this is possible with AnimatedVectorDrawable and I should use an objectanimator like so to make a path transformation:

<objectAnimator
     android:duration="3000"
     android:propertyName="pathData"
     android:valueFrom="M300,70 l 0,-70 70,70 0,0   -70,70z"
     android:valueTo="M300,70 l 0,-70 70,0  0,140 -70,0 z"
     android:valueType="pathType"/>

And from the docs if one wants to morph a path into another one, the paths must be compatible for morphing. In more details, the paths should have exact same length of commands , and exact same length of parameters for each commands.

I've started to read this: SVG elliptical arc commands, I think the trick would be to realize a line with some arc/circle commands.

Is there a way to do this, so a line path data can have the same length and same commands as a circle?

Upvotes: 2

Views: 5910

Answers (2)

T&#237;b&#243;
T&#237;b&#243;

Reputation: 1218

Iftah's answer put me on a good track, here is how I did it, it's basically approximating a circle with two cubic Bézier curves (one for the upper half circle and another one for the lower half). A small explanation can be found here.

Code side, here is how it looks:

<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="500dp"
    android:height="500dp"
    android:viewportWidth="500"
    android:viewportHeight="500">

<group>
    <path
        android:name="circle_line"
        android:fillColor="@android:color/black"
        android:strokeColor="@android:color/black"
        android:strokeWidth="5"
        android:pathData="@string/circle_data"/>
</group>

Paths data:

<!-- paths -->
<string name="circle_data">M 125 250 C 137.5 83.34 362.5 83.34 375 250 M 125 250 C 137.5 416.66 362.5 416.66 375 250</string>
<string name="line_data">M 50 250 C 125 250 125 250 250 250 M 250 250 C 375 250 375 250 450 250</string>

The animation works fine, I just have to refine some points in order to customize the animation look.

Upvotes: 3

Iftah
Iftah

Reputation: 9572

I've never tried it, but I guess a simple "hack" that may work is to transform the circle into a circle with very large radius, centered far away. The small part of the huge circle that is visible in the clip area would appear to be a straight line.

ie. You can transform the circle from center (300,70) with radius 70 to center (300,10070) with radius 10000.

If that fails, you can try building a circle from splines and then changing the splines into straight lines. This website shows a quarter circle made from a spline.

Another option that may work - animate the scaleY of the shape from 1 to 0, this will flatten the shape into a horizontal line. Its not quite as smooth as the vector animation, but its very simple to implement. When the animation is complete you can replace the shape with a horizontal line.

Upvotes: 1

Related Questions