Animated vector drawable like Temple run chest

107 Views Asked by At

I'm trying to implement the Temple run like treasure chest open and close effect for gained coins or loyalty.

What I have in mind is to use an animated vector but I can't seem to get a good grip on how to do it. Also I'm getting an error when trying it on SDK less than 21.

Here is the vector I'm using

<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="24dp"
android:height="24dp"
android:viewportWidth="512"
android:viewportHeight="512">
<path
    android:fillColor="#c6c5cb"
    android:pathData="M234.536 85.605l-212.174 122.498 0 155.663 27.088 15.741 212.174 -122.499 0 -155.662 -27.088 -15.741zm-17.793 145.271l-149.061 86.06 0 -82.7 148.826 -85.925 0.235 82.565z" />
<path
    android:fillColor="#e0e0e2"
    android:pathData="M243.508 246.617l-26.765 -15.741 -0.322 -113.894 27.087 15.741z" />
<path
    android:fillColor="#e0e0e2"
    android:pathData="M67.682 348.13L40.918 332.389 216.743 230.876 243.508 246.617Z" />
<path
    android:fillColor="#d8d8da"
    android:pathData="M49.449 223.845l0 155.663 -27.087 -15.743 0 -155.662z" />
<path
    android:fillColor="#e0e0e2"
    android:pathData="M261.623 101.346L49.449 223.845 22.362 208.103 234.536 85.605Z" />
<path
    android:fillColor="#c6c5cb"
    android:pathData="M49.449 223.845l212.174 -122.499 0 155.662 -212.174 122.5 0 -155.663zm194.059 22.772l0 -113.894 -175.826 101.512 0 113.895 175.826 -101.513" />
<path
    android:fillColor="#c6c5cb"
    android:pathData="M261.594 90.904c-0.095 -33.501 -12.004 -57.06 -31.166 -68.089 0.062 0.036 0.125 0.068 0.187 0.103L203.527 7.177C184.226 -4.04 157.511 -2.486 128.074 14.51 69.574 48.284 22.141 130.441 22.331 197.661l0.029 10.443 27.088 15.741 212.174 -122.499 -0.028 -10.442zm-45.759 -15.421l0 0 -140.484 81.108c13.757 -42.914 44.347 -84.948 79.869 -105.456 17.463 -10.082 33.759 -13.58 47.484 -11.358 7.037 8.735 11.672 20.766 13.131 35.706z" />
<path
    android:fillColor="#e0e0e2"
    android:pathData="M190.656 29.321l27.088 15.741c13.779 8.008 23 23.867 25.18 46.162L215.836 75.483c-2.179 -22.294 -11.4 -38.154 -25.18 -46.162z" />
<path
    android:fillColor="#e0e0e2"
    android:pathData="M68.03 192.199L40.943 176.456 215.835 75.483 242.923 91.224Z" />
<path
    android:fillColor="#d8d8da"
    android:pathData="M49.419 213.402l0.03 10.443 -27.087 -15.742 -0.031 -10.442z" />
<path
    android:fillColor="#e0e0e2"
    android:pathData="M203.527 7.177l27.088 15.741C211.314 11.701 184.599 13.255 155.162 30.251L128.074 14.51c29.437 -16.996 56.152 -18.55 75.453 -7.333z" />
<path
    android:fillColor="#d8d8da"
    android:pathData="M49.419 213.402L22.331 197.661C22.141 130.441 69.574 48.283 128.073 14.51l27.088 15.741C96.662 64.026 49.229 146.183 49.419 213.402Z" />
<path
    android:fillColor="#c6c5cb"
    android:pathData="M155.161 30.251C213.66 -3.524 261.403 23.684 261.594 90.903l0.029 10.443L49.449 223.845 49.42 213.402C49.229 146.183 96.662 64.026 155.161 30.251ZM68.03 192.199L242.923 91.224C238.215 43.05 200.624 24.921 155.22 51.135 109.808 77.354 72.45 138.754 68.03 192.199" />
<path
    android:fillColor="#f18700"
    android:pathData="M59.51 364.73l225.347 131.18 193.999 -112.007 0 -134.778L253.127 117.946 59.128 229.951Z" />
<path
    android:fillColor="#ff9911"
    android:pathData="M284.857 495.91L59.51 364.73 59.128 229.951 284.857 361.131Z" />
<path
    android:fillColor="#ff9911"
    android:pathData="M284.857 361.131L59.128 229.951 253.127 117.946 478.856 249.125Z" />
<path
    android:fillColor="#f18700"
    android:pathData="M284.857 361.131l193.999 -112.006 0 134.778 -193.999 112.007z" />
<path
    android:fillColor="#d8d8da"
    android:pathData="M35.891 345.946l0 25.605 241.574 140.449 0 -25.605 9.747 -5.768 -227.824 -133.298 -10.595 6.118z" />
<path
    android:fillColor="#e0e0e2"
    android:pathData="M59.388 347.329l-10.595 6.118 228.672 132.948 9.747 -5.768z" />
<path
    android:fillColor="#c6c5cb"
    android:pathData="M462.581 218.097l-212.174 122.499 0 155.663 27.088 15.741 212.174 -122.499 0 -155.663 -27.088 -15.741zm-17.792 145.271l-149.06 86.06 0 -82.7 148.826 -85.925 0.234 82.565z" />
<path
    android:fillColor="#acabb1"
    android:pathData="M471.554 265.216l0 113.895 -26.765 -15.743 -0.323 -113.894z" />
<path
    android:fillColor="#d8d8da"
    android:pathData="M295.729 480.623l-26.764 -15.742 175.824 -101.513 26.765 15.743z" />
<path
    android:fillColor="#d8d8da"
    android:pathData="M277.495 512l-27.088 -15.741 0 -155.663 27.088 15.741z" />
<path
    android:fillColor="#e0e0e2"
    android:pathData="M489.669 233.838L277.495 356.337 250.407 340.596 462.581 218.097Z" />
<path
    android:fillColor="#c6c5cb"
    android:pathData="M277.495 356.337l212.174 -122.499 0 155.662 -212.174 122.5 0 -155.663zm194.059 22.774l0 -113.895 -175.825 101.513 0 113.894 175.825 -101.512" />
<path
    android:fillColor="#f18700"
    android:pathData="M450.462 167.464c0.056 0.032 0.114 0.062 0.17 0.094L224.903 36.378C207.266 26.129 182.841 27.575 155.881 43.139 102.306 74.071 59.022 149.04 59.197 210.602l225.729 131.18 193.999 -112.005c-0.086 -30.681 -10.952 -52.236 -28.463 -62.313z" />
<path
    android:fillColor="#ffa834"
    android:pathData="M224.903 36.378l225.729 131.18c-17.637 -10.249 -42.062 -8.803 -69.022 6.761L155.881 43.14c26.96 -15.565 51.385 -17.011 69.022 -6.762z" />
<path
    android:fillColor="#ff9911"
    android:pathData="M284.927 341.783L59.197 210.603C59.023 149.041 102.306 74.071 155.881 43.14L381.61 174.32c-53.575 30.931 -96.858 105.901 -96.683 167.463z" />
<path
    android:fillColor="#f18700"
    android:pathData="M381.61 174.32c53.575 -30.932 97.142 -6.105 97.316 55.457L284.927 341.783C284.752 280.221 328.035 205.251 381.61 174.32Z" />
<path
    android:fillColor="#d8d8da"
    android:pathData="M49.951 200.666l-14.06 -8.174 0 51.21 241.574 140.449 0 -51.208 1.174 0.662 9.224 -5.466L60.039 194.841Z" />
<path
    android:fillColor="#e0e0e2"
    android:pathData="M60.039 194.841l-10.071 5.816 228.671 132.948 9.224 -5.466z" />
<path
    android:fillColor="#c6c5cb"
    android:pathData="M489.64 223.397c-0.095 -33.501 -12.004 -57.061 -31.166 -68.089 0.062 0.036 0.125 0.068 0.186 0.103L431.572 139.67c-19.301 -11.217 -46.016 -9.663 -75.453 7.333 -58.499 33.774 -105.932 115.931 -105.741 183.15l0.029 10.443 27.088 15.741 212.174 -122.499 -0.029 -10.441zm-45.759 -15.422l-140.483 81.108c13.757 -42.914 44.347 -84.948 79.869 -105.456 17.463 -10.082 33.759 -13.58 47.484 -11.358 7.035 8.735 11.67 20.768 13.13 35.706z" />
<path
    android:fillColor="#acabb1"
    android:pathData="M418.702 161.814l27.088 15.741c13.779 8.008 23 23.867 25.18 46.162l-27.088 -15.741c-2.179 -22.295 -11.401 -38.155 -25.18 -46.162z" />
<path
    android:fillColor="#d8d8da"
    android:pathData="M470.969 223.717L296.076 324.691 268.989 308.95 443.881 207.975Z" />
<path
    android:fillColor="#e0e0e2"
    android:pathData="M277.495 356.337l-27.088 -15.741 -0.029 -10.442 27.088 15.742z" />
<path
    android:fillColor="#e0e0e2"
    android:pathData="M431.572 139.669l27.088 15.741c-19.301 -11.217 -46.016 -9.663 -75.453 7.333l-27.088 -15.741c29.438 -16.996 56.152 -18.55 75.453 -7.333z" />
<path
    android:fillColor="#d8d8da"
    android:pathData="M277.466 345.896l-27.088 -15.741c-0.19 -67.219 47.242 -149.378 105.741 -183.151l27.088 15.741c-58.499 33.773 -105.932 115.93 -105.741 183.151z" />
<path
    android:fillColor="#c6c5cb"
    android:pathData="M383.207 162.743c58.499 -33.775 106.242 -6.567 106.433 60.652l0.029 10.443 -212.174 122.499 -0.029 -10.443C277.275 278.675 324.708 196.518 383.207 162.743ZM296.076 324.691L470.969 223.717c-4.708 -48.174 -42.299 -66.303 -87.703 -40.089 -45.412 26.219 -82.769 87.618 -87.19 141.063" />
<path
    android:fillColor="#d8d8da"
    android:pathData="M277.465 332.942l0 51.209 -241.574 -140.449 0 -51.21z" />
<path
    android:fillColor="#d8d8da"
    android:pathData="M277.465 486.395l0 25.605 -241.574 -140.449 0 -25.605z" />
<path
    android:fillColor="#898890"
    android:pathData="M169.258 320.33l0 -49.44 -43.026 -24.84 -12.466 7.244 0 49.44 42.885 24.84z" />
<path
    android:fillColor="#898890"
    android:pathData="M156.791 278.135l12.467 -7.245 0 49.44 -12.607 7.244z" />
<path
    android:fillColor="#c6c5cb"
    android:pathData="M156.791 278.135l-43.025 -24.841 12.466 -7.244 43.026 24.84z" />
<path
    android:fillColor="#acabb1"
    android:pathData="M113.766 253.294l43.025 24.841 -0.14 49.439 -42.885 -24.84z" />
<path
    android:fillColor="#77767e"
    android:pathData="M134.399 277.238c-4.05 -2.338 -7.349 -0.465 
-7.362 4.188 -0.009 3.304 1.637 7.119 4.042 9.889l-0.029 10.433 6.551 
3.782 0.029 -10.433c2.405 0.006 4.068 -1.898 4.077 -5.201 0.014 
-4.654 -3.258 -10.321 -7.308 -12.658z" />
</vector>

And this is the link to what I want, but only the opening and closing of the chest.Youtube link

Might there also be a better way to do it?

0

There are 0 best solutions below