Skip to content

Instantly share code, notes, and snippets.

@sababado

sababado/LoopingAnimatedVectorHandler.kt

Created September 14, 2018 12:41
Show Gist options
  • Save sababado/51ed3f1a1ee31cc61b32e82badd05264 to your computer and use it in GitHub Desktop.
Save sababado/51ed3f1a1ee31cc61b32e82badd05264 to your computer and use it in GitHub Desktop.
Download ZIP
Animated Vector Drawable for a vehicle, spinning wheels, and smoke.
Raw
loading_vehicle.xml
<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="160dp"
android:height="80dp"
android:viewportWidth="160"
android:viewportHeight="80">
<group
android:name="clouds_1"
android:translateX="2"
android:translateY="36">
<path
android:name="cloud_0"
android:pathData="M 65.577 27.25 C 66.885 27.25 67.538 27.25 67.538 27.25 C 67.538 27.25 68 26.924 68 26.456 C 68 26.235 67.846 26.015 67.538 25.794 C 67.231 25.265 66.885 25 66.5 25 C 66.115 25 65.808 25.176 65.577 25.529 C 65.192 25.706 65 25.971 65 26.324 C 65 26.676 65.192 26.985 65.577 27.25 Z"
android:fillColor="#dddddd"
android:fillAlpha="0.8"/>
<path
android:name="cloud_1"
android:pathData="M 61.154 29.5 C 63.769 29.5 65.077 29.5 65.077 29.5 C 65.077 29.5 66 28.848 66 27.912 C 66 27.471 65.692 27.029 65.077 26.588 C 64.462 25.529 63.769 25 63 25 C 62.231 25 61.615 25.353 61.154 26.059 C 60.385 26.412 60 26.941 60 27.647 C 60 28.353 60.385 28.971 61.154 29.5 Z"
android:fillColor="#dddddd"
android:fillAlpha="0.8"/>
<path
android:name="cloud_2"
android:pathData="M 43.115 28 C 47.91 28 50.308 28 50.308 28 C 50.308 28 52 26.985 52 25.529 C 52 24.843 51.436 24.157 50.308 23.471 C 49.179 21.824 47.91 21 46.5 21 C 45.09 21 43.962 21.549 43.115 22.647 C 41.705 23.196 41 24.02 41 25.118 C 41 26.216 41.705 27.176 43.115 28 Z"
android:fillColor="#dddddd"
android:fillAlpha="0.7"/>
<path
android:name="cloud_3"
android:pathData="M 24.692 21.5 C 30.795 21.5 33.846 21.5 33.846 21.5 C 33.846 21.5 36 20.05 36 17.971 C 36 16.99 35.282 16.01 33.846 15.029 C 32.41 12.676 30.795 11.5 29 11.5 C 27.205 11.5 25.769 12.284 24.692 13.853 C 22.897 14.637 22 15.814 22 17.382 C 22 18.951 22.897 20.324 24.692 21.5 Z"
android:fillColor="#dddddd"
android:strokeAlpha="0.4"/>
</group>
<group
android:name="car"
android:translateX="25">
<group
android:name="back_group"
android:pivotX="64.5"
android:pivotY="65"
android:rotation="90">
<path
android:name="wheel_1"
android:pathData="M 64.5 76 C 58.701 76 54 71.299 54 65.5 C 54 59.701 58.701 55 64.5 55 C 70.299 55 75 59.701 75 65.5 C 75 71.299 70.299 76 64.5 76 Z M 64.5 70 C 66.985 70 69 67.985 69 65.5 C 69 63.015 66.985 61 64.5 61 C 62.015 61 60 63.015 60 65.5 C 60 67.985 62.015 70 64.5 70 Z"
android:fillColor="#FF777777"/>
<path
android:name="mark_1"
android:pathData="M 58.101 58.971 C 58.101 58.971 58.482 58.997 59.196 58.865 C 59.672 58.776 60.037 58.652 60.291 58.493"
android:strokeColor="#979797"
android:strokeWidth="0.5"/>
<path
android:name="mark_2"
android:pathData="M 64 73.24 C 64 73.24 64.87 73.362 66.5 72.742 C 67.587 72.329 68.42 71.749 69 71"
android:strokeColor="#979797"
android:strokeWidth="0.5"/>
</group>
<group
android:name="front_wheel"
android:pivotX="110"
android:pivotY="64.5">
<path
android:name="wheel"
android:pathData="M 110 75.5 C 104.201 75.5 99.5 70.799 99.5 65 C 99.5 59.201 104.201 54.5 110 54.5 C 115.799 54.5 120.5 59.201 120.5 65 C 120.5 70.799 115.799 75.5 110 75.5 Z M 110 69.5 C 112.485 69.5 114.5 67.485 114.5 65 C 114.5 62.515 112.485 60.5 110 60.5 C 107.515 60.5 105.5 62.515 105.5 65 C 105.5 67.485 107.515 69.5 110 69.5 Z"
android:fillColor="#FF777777"/>
<path
android:name="mark1"
android:pathData="M 104.101 58.971 C 104.101 58.971 104.482 58.997 105.196 58.865 C 105.672 58.776 106.037 58.652 106.291 58.493"
android:strokeColor="#979797"
android:strokeWidth="0.5"/>
<path
android:name="mark2"
android:pathData="M 110 73.51 C 110 73.51 110.87 73.632 112.5 73.012 C 113.587 72.599 114.42 72.018 115 71.269"
android:strokeColor="#979797"
android:strokeWidth="0.5"/>
</group>
<group android:name="group">
<path
android:name="frame"
android:pathData="M 97 28.055 L 97 44.055 L 121 44.055 L 105 28.055 L 97 28.055 Z M 41 20.055 L 105 20.055 L 129 44.5 L 129 63.944 L 41 63.944 L 41 20.055 Z"
android:fillColor="#FF999999"/>
</group>
</group>
</vector>
</aapt:attr>
<target android:name="cloud_0">
<aapt:attr name="android:animation">
<objectAnimator
android:propertyName="pathData"
android:duration="300"
android:valueFrom="M 65.577 27.25 C 66.885 27.25 67.538 27.25 67.538 27.25 C 67.538 27.25 68 26.924 68 26.456 C 68 26.235 67.846 26.015 67.538 25.794 C 67.231 25.265 66.885 25 66.5 25 C 66.115 25 65.808 25.176 65.577 25.529 C 65.192 25.706 65 25.971 65 26.324 C 65 26.676 65.192 26.985 65.577 27.25 Z"
android:valueTo="M 61.154 29.5 C 63.769 29.5 65.077 29.5 65.077 29.5 C 65.077 29.5 66 28.848 66 27.912 C 66 27.471 65.692 27.029 65.077 26.588 C 64.462 25.529 63.769 25 63 25 C 62.231 25 61.615 25.353 61.154 26.059 C 60.385 26.412 60 26.941 60 27.647 C 60 28.353 60.385 28.971 61.154 29.5 Z"
android:valueType="pathType"
android:interpolator="@android:anim/linear_interpolator"/>
</aapt:attr>
</target>
<target android:name="cloud_1">
<aapt:attr name="android:animation">
<set>
<objectAnimator
android:propertyName="pathData"
android:duration="300"
android:valueFrom="M 61.154 29.5 C 63.769 29.5 65.077 29.5 65.077 29.5 C 65.077 29.5 66 28.848 66 27.912 C 66 27.471 65.692 27.029 65.077 26.588 C 64.462 25.529 63.769 25 63 25 C 62.231 25 61.615 25.353 61.154 26.059 C 60.385 26.412 60 26.941 60 27.647 C 60 28.353 60.385 28.971 61.154 29.5 Z"
android:valueTo="M 43.115 28 C 47.91 28 50.308 28 50.308 28 C 50.308 28 52 26.985 52 25.529 C 52 24.843 51.436 24.157 50.308 23.471 C 49.179 21.824 47.91 21 46.5 21 C 45.09 21 43.962 21.549 43.115 22.647 C 41.705 23.196 41 24.02 41 25.118 C 41 26.216 41.705 27.176 43.115 28 Z"
android:valueType="pathType"
android:interpolator="@android:anim/linear_interpolator"/>
<objectAnimator
android:propertyName="fillAlpha"
android:duration="300"
android:valueFrom="0.8"
android:valueTo="0.7"
android:valueType="floatType"
android:interpolator="@android:interpolator/fast_out_slow_in"/>
</set>
</aapt:attr>
</target>
<target android:name="cloud_2">
<aapt:attr name="android:animation">
<set>
<objectAnimator
android:propertyName="pathData"
android:duration="300"
android:valueFrom="M 43.115 28 C 47.91 28 50.308 28 50.308 28 C 50.308 28 52 26.985 52 25.529 C 52 24.843 51.436 24.157 50.308 23.471 C 49.179 21.824 47.91 21 46.5 21 C 45.09 21 43.962 21.549 43.115 22.647 C 41.705 23.196 41 24.02 41 25.118 C 41 26.216 41.705 27.176 43.115 28 Z"
android:valueTo="M 24.692 21.5 C 30.795 21.5 33.846 21.5 33.846 21.5 C 33.846 21.5 36 20.05 36 17.971 C 36 16.99 35.282 16.01 33.846 15.029 C 32.41 12.676 30.795 11.5 29 11.5 C 27.205 11.5 25.769 12.284 24.692 13.853 C 22.897 14.637 22 15.814 22 17.382 C 22 18.951 22.897 20.324 24.692 21.5 Z"
android:valueType="pathType"
android:interpolator="@android:anim/linear_interpolator"/>
<objectAnimator
android:propertyName="fillAlpha"
android:duration="300"
android:valueFrom="0.7"
android:valueTo="0.4"
android:valueType="floatType"
android:interpolator="@android:anim/linear_interpolator"/>
</set>
</aapt:attr>
</target>
<target android:name="cloud_3">
<aapt:attr name="android:animation">
<set>
<objectAnimator
android:propertyName="pathData"
android:duration="300"
android:valueFrom="M 24.692 21.5 C 30.795 21.5 33.846 21.5 33.846 21.5 C 33.846 21.5 36 20.05 36 17.971 C 36 16.99 35.282 16.01 33.846 15.029 C 32.41 12.676 30.795 11.5 29 11.5 C 27.205 11.5 25.769 12.284 24.692 13.853 C 22.897 14.637 22 15.814 22 17.382 C 22 18.951 22.897 20.324 24.692 21.5 Z"
android:valueTo="M 4.071 11.5 C 11.762 11.5 15.607 11.5 15.607 11.5 C 15.607 11.5 19 11.5 19 7.667 C 19 5.963 17.869 4.898 15.607 4.472 C 14.25 1.491 12.214 0 9.5 0 C 6.786 0 4.976 1.065 4.071 3.194 C 1.81 3.194 0.452 4.472 0 7.028 C 0 9.583 1.357 11.074 4.071 11.5 Z"
android:valueType="pathType"
android:interpolator="@android:interpolator/fast_out_linear_in"/>
<objectAnimator
android:propertyName="fillAlpha"
android:duration="300"
android:valueFrom="0.4"
android:valueTo="0"
android:valueType="floatType"
android:interpolator="@android:anim/decelerate_interpolator"/>
</set>
</aapt:attr>
</target>
<target android:name="front_wheel">
<aapt:attr name="android:animation">
<objectAnimator
android:propertyName="rotation"
android:duration="300"
android:valueFrom="0"
android:valueTo="359"
android:valueType="floatType"
android:interpolator="@android:anim/linear_interpolator"/>
</aapt:attr>
</target>
<target android:name="back_group">
<aapt:attr name="android:animation">
<objectAnimator
android:propertyName="rotation"
android:duration="300"
android:valueFrom="90"
android:valueTo="449"
android:valueType="floatType"
android:interpolator="@android:anim/linear_interpolator"/>
</aapt:attr>
</target>
<target android:name="group">
<aapt:attr name="android:animation">
<set>
<objectAnimator
android:propertyName="translateX"
android:duration="151"
android:valueFrom="0"
android:valueTo="0.5"
android:valueType="floatType"
android:interpolator="@android:anim/anticipate_overshoot_interpolator"/>
<objectAnimator
android:propertyName="translateX"
android:startOffset="151"
android:duration="149"
android:valueFrom="0.5"
android:valueTo="0"
android:valueType="floatType"
android:interpolator="@android:anim/anticipate_overshoot_interpolator"/>
<objectAnimator
android:propertyName="translateY"
android:duration="125"
android:valueFrom="0"
android:valueTo="-0.5"
android:valueType="floatType"
android:interpolator="@android:anim/anticipate_overshoot_interpolator"/>
<objectAnimator
android:propertyName="translateY"
android:startOffset="125"
android:duration="175"
android:valueFrom="-0.5"
android:valueTo="0"
android:valueType="floatType"
android:interpolator="@android:anim/anticipate_overshoot_interpolator"/>
</set>
</aapt:attr>
</target>
</animated-vector>
Raw
LoopingAnimatedVectorHandler.kt
package com.coxautoinc.vehiclekit.core
import android.content.Context
import android.graphics.drawable.Animatable
import android.graphics.drawable.Drawable
import android.support.annotation.DrawableRes
import android.support.graphics.drawable.Animatable2Compat
import android.support.graphics.drawable.AnimatedVectorDrawableCompat
/**
* Handler for an AnimatedVectorDrawable that is intending to loop until [stop] is called.
* @param drawable
*/
class LoopingAnimatedVectorHandler(val drawable: AnimatedVectorDrawableCompat) {
private var isRunning = false
constructor(context: Context, @DrawableRes resId: Int) : this(
drawable = AnimatedVectorDrawableCompat.create(context, resId)!!)
private val animationCallback = object : Animatable2Compat.AnimationCallback() {
override fun onAnimationEnd(drawable: Drawable) {
if (isRunning) {
(drawable as Animatable).start()
}
}
}
fun start() {
isRunning = true
drawable.registerAnimationCallback(animationCallback)
drawable.start()
}
fun stop() {
isRunning = false
drawable.unregisterAnimationCallback(animationCallback)
drawable.stop()
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment