Reputation: 374
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 AnimatedVectorDrawable
s 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