Android : Animate an animated vector drawable with a seek bar

Question

I am Android developper since two years but I have never worked with animation. I have a problem to solve for my company : I need to draw a sad smiley face and make him happier as more as raise the value of a seek bar like shown in the following images.

Smile following the progress of a seek bar

To draw the smiling animation I followed the android documentation about AnimatedVectorDrawable

But now the animation follow a duration of 3000ms and I would like to control the animation (like a video) with the seek bar.

Really tried to find something over internet over three days but I think I dont have the key words to find what I want.

My animated vector :

<animated-vector 
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:drawable="@drawable/face" >
    <target
      android:name="mouth"
      android:animation="@animator/smile" />
</animated-vector>

My vector

<vector
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:height="200dp"
    android:width="200dp"
    android:viewportHeight="100"
    android:viewportWidth="100" >
  <path
    android:fillColor="@color/yellow"
    android:pathData="@string/path_circle"/>
  <path
    android:fillColor="@android:color/black"
    android:pathData="@string/path_face_left_eye"/>
  <path
    android:fillColor="@android:color/black"
    android:pathData="@string/path_face_right_eye"/>
  <path
    android:name="mouth"
    android:strokeColor="@android:color/black"
    android:strokeWidth="@integer/stroke_width"
    android:strokeLineCap="round"
    android:pathData="@string/path_face_mouth_sad"/>
</vector>

My Object Animator

<objectAnimator
  xmlns:android="http://schemas.android.com/apk/res/android"
  android:duration="3000"
  android:propertyName="pathData"
  android:valueFrom="@string/path_face_mouth_sad"
  android:valueTo="@string/path_face_mouth_happy"
  android:valueType="pathType"
  android:interpolator="@android:anim/accelerate_interpolator"/>

My animate function

private void animate() {
  Drawable drawable = imageView.getDrawable();
  if (drawable instanceof Animatable) {
    ((AnimatedVectorDrawable) drawable).start();
  }
}

Thank for your help. If you need any more info about my tries do not hesitate to ask.

Answer 1

You should have a look at RoadRunner, it works with SVG and allows you to set the progress manually too.