Play/Pause Animated Vector Drawable не работает?

Question

Я пытаюсь создать Анимированный вектор, который можно нарисовать здесь. Но я вижу только значок воспроизведения на экране. Если я нажимаю на значок воспроизведения, он показывает значок паузы на некотором другом расстоянии.

Я надеюсь, что оба пути совместимы! Согласно здесь

Я не знаю, где я иду не так?

Анимированный вектор

<animated-vector
    android:drawable="@drawable/ic_play"
    xmlns:android="http://schemas.android.com/apk/res/android" >

    <target
        android:animation="@animator/play_to_pause"
        android:name="play"/>
    </animated-vector>

Вектор Drawable

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="240.0dp"
    android:height="240.0dp"
    android:viewportHeight="24.0"
    android:viewportWidth="24.0">
    <path
        android:name="play"
        android:fillColor="@color/colorPrimary"
        android:pathData="M 11 10 L 17 10 L 17 26 L 11 26 M 20 10 L 26 10 L 26 26 L 20 26" />
</vector>

Объект Аниматор

 <set xmlns:android="http://schemas.android.com/apk/res/android">
        <objectAnimator
            android:duration="100"
            android:interpolator="@android:interpolator/decelerate_cubic"
            android:repeatMode="reverse"
            android:repeatCount="1"
            android:propertyName="pathData"
            android:valueType="pathType"
            android:valueTo="M11,10 L17,10 17,26 11,26 M20,10 L26,10 26,26 20,26"
            android:valueFrom="M11,10 L18,13.74 18,22.28 11,26 M18,13.74 L26,18 26,18 18,22.28"
            />
    </set>