Smalls
Smalls

Reputation: 374

Android: Start AnimatedVectorDrawable animation mid way

Background: I am looking to create a countdown timer similar to the native Clock app's Timer. I am very new to Android animations so I have been evaluating various solutions. I was looking to go with AnimatedVectorDrawables but hit a roadblock.

Question: is there any way to start an animation on an AnimationVectorDrawable mid way through instead of from the beginning? If not, what is the best practice for creating such an animation?

Use case: I want the countdown animation to stay in sync with minute marks on the clock so when the user displays it at a time that isn't on the minute mark, the countdown animation starts mid way through so it finishes on the minute mark.

XML Layout for animated-vector:

<animated-vector
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:aapt="http://schemas.android.com/aapt">
    <aapt:attr name="android:drawable">
        <vector
            android:name="vector"
            android:width="26dp"
            android:height="26dp"
            android:viewportWidth="26"
            android:viewportHeight="26">
            <path
                android:name="path"
                android:pathData="M 13 1 C 6.373 1 1 6.373 1 13 C 1 19.627 6.373 25 13 25 C 19.627 25 25 19.627 25 13 C 25 6.373 19.627 1 13 1 Z"
                android:strokeWidth="1"
                android:fillType="evenOdd"/>
        </vector>
    </aapt:attr>
    <target android:name="path">
        <aapt:attr name="android:animation">
            <set>
                <objectAnimator
                    android:propertyName="trimPathStart"
                    android:duration="2950"
                    android:valueFrom="0"
                    android:valueTo="1"
                    android:valueType="floatType"
                    android:interpolator="@android:anim/linear_interpolator"/>
                <objectAnimator
                    android:propertyName="trimPathStart"
                    android:startOffset="2950"
                    android:duration="50"
                    android:valueFrom="1"
                    android:valueTo="0"
                    android:valueType="floatType"
                    android:interpolator="@android:interpolator/fast_out_slow_in"/>
                <objectAnimator
                    android:propertyName="strokeColor"
                    android:duration="1900"
                    android:valueFrom="#818181"
                    android:valueTo="#f0c473"
                    android:valueType="colorType"
                    android:interpolator="@android:anim/accelerate_interpolator"/>
                <objectAnimator
                    android:propertyName="strokeAlpha"
                    android:duration="3000"
                    android:valueFrom="1"
                    android:valueTo="1"
                    android:valueType="floatType"
                    android:interpolator="@android:anim/linear_interpolator"/>
                <objectAnimator
                    android:propertyName="strokeColor"
                    android:startOffset="1900"
                    android:duration="600"
                    android:valueFrom="#f0c473"
                    android:valueTo="#e06969"
                    android:valueType="colorType"
                    android:interpolator="@android:anim/accelerate_interpolator"/>
                <objectAnimator
                    android:propertyName="strokeColor"
                    android:startOffset="2500"
                    android:duration="450"
                    android:valueFrom="#e06969"
                    android:valueTo="#e06969"
                    android:valueType="colorType"
                    android:interpolator="@android:anim/decelerate_interpolator"/>
                <objectAnimator
                    android:propertyName="strokeColor"
                    android:startOffset="2950"
                    android:duration="50"
                    android:valueFrom="#e06969"
                    android:valueTo="#818181"
                    android:valueType="colorType"
                    android:interpolator="@android:anim/linear_interpolator"/>
            </set>
        </aapt:attr>
    </target>
</animated-vector>

Upvotes: 3

Views: 843

Answers (0)

Related Questions