Fix animation of play/pause button (Tunous#58)

Closes Tunous#53
mvietri · Aug 24, 2019 · 03ef696 · 03ef696
1 parent d0d6b68
commit 03ef696
Show file tree

Hide file tree

Showing 3 changed files with 61 additions and 37 deletions.
diff --git a/app/src/main/java/me/saket/dank/ui/submission/SubmissionVideoControlsView.java b/app/src/main/java/me/saket/dank/ui/submission/SubmissionVideoControlsView.java
@@ -2,19 +2,18 @@
 
 import android.content.Context;
 import android.graphics.drawable.AnimatedVectorDrawable;
-import androidx.annotation.Px;
 import android.text.format.DateUtils;
 import android.view.ViewGroup;
 import android.widget.RelativeLayout;
 import android.widget.TextView;
 
+import androidx.annotation.Px;
 import com.devbrackets.android.exomedia.ui.widget.VideoView;
 
 import java.util.Formatter;
 import java.util.Locale;
 
 import me.saket.dank.R;
-import me.saket.dank.utils.ReversibleAnimatedVectorDrawable;
 import me.saket.dank.utils.Views;
 import me.saket.dank.widgets.ExoMediaVideoControlsView;
 
@@ -23,12 +22,16 @@ public class SubmissionVideoControlsView extends ExoMediaVideoControlsView {
   private static final StringBuilder TIME_DURATION_FORMAT_BUILDER = new StringBuilder();
   private static final Formatter TIME_DURATION_FORMATTER = new Formatter(TIME_DURATION_FORMAT_BUILDER, Locale.ENGLISH);
 
-  private ReversibleAnimatedVectorDrawable playPauseIcon;
+  private final AnimatedVectorDrawable playToPauseDrawable;
+  private final AnimatedVectorDrawable pauseToPlayDrawable;
+
   protected ViewGroup buttonsContainer;
   protected TextView remainingDurationView;
 
   public SubmissionVideoControlsView(Context context) {
     super(context);
+    playToPauseDrawable = (AnimatedVectorDrawable) context.getDrawable(R.drawable.avd_play_to_pause_white_24dp);
+    pauseToPlayDrawable = (AnimatedVectorDrawable) context.getDrawable(R.drawable.avd_pause_to_play_white_24dp);
   }
 
   @Px
@@ -46,7 +49,6 @@ protected void retrieveViews() {
     super.retrieveViews();
     buttonsContainer = findViewById(R.id.videocontrols_buttons_container);
     remainingDurationView = findViewById(R.id.videocontrols_remaining_duration);
-    playPauseIcon = new ReversibleAnimatedVectorDrawable(((AnimatedVectorDrawable) playPauseButton.getDrawable()));
   }
 
   @Override
@@ -66,13 +68,21 @@ public void setVideoView(@SuppressWarnings("NullableProblems") VideoView videoVi
 
   @Override
   protected void updatePlayPauseImage(boolean isPlaying, boolean userInteractingWithSeek) {
+    playPauseButton.setImageResource(R.drawable.avd_play_to_pause_white_24dp);
+
     if (isPlaying) {
-      playPauseIcon.play();
+      playPauseButton.setImageDrawable(playToPauseDrawable);
       playPauseButton.setContentDescription(getResources().getString(R.string.submission_video_controls_cd_pause));
     } else {
-      playPauseIcon.reverse();
+      playPauseButton.setImageDrawable(pauseToPlayDrawable);
       playPauseButton.setContentDescription(getResources().getString(R.string.submission_video_controls_cd_play));
     }
+
+    animatePlayPauseButton();
+  }
+
+  private void animatePlayPauseButton() {
+    ((AnimatedVectorDrawable) playPauseButton.getDrawable()).start();
   }
 
   @Override

diff --git a/app/src/main/java/me/saket/dank/utils/ReversibleAnimatedVectorDrawable.java b/app/src/main/java/me/saket/dank/utils/ReversibleAnimatedVectorDrawable.java
diff --git a/app/src/main/res/drawable/avd_pause_to_play_white_24dp.xml b/app/src/main/res/drawable/avd_pause_to_play_white_24dp.xml
@@ -0,0 +1,45 @@
+<animated-vector xmlns:aapt="http://schemas.android.com/aapt"
+  xmlns:android="http://schemas.android.com/apk/res/android">
+  <aapt:attr name="android:drawable">
+    <vector
+      android:name="pausetoplay"
+      android:width="24dp"
+      android:height="24dp"
+      android:viewportHeight="24"
+      android:viewportWidth="24">
+      <group
+        android:name="group"
+        android:rotation="90"
+        android:pivotX="12"
+        android:pivotY="12">
+        <path
+          android:name="path"
+          android:fillColor="#fff"
+          android:pathData="M 8 5 L 8 12 L 19 12 L 19 12 L 8 5 M 8 12 L 8 19 L 19 12 L 19 12 L 8 12"
+          android:strokeWidth="1" />
+      </group>
+    </vector>
+  </aapt:attr>
+  <target android:name="path">
+    <aapt:attr name="android:animation">
+      <objectAnimator
+        android:duration="300"
+        android:interpolator="@android:interpolator/fast_out_slow_in"
+        android:propertyName="pathData"
+        android:valueTo="M 8 5 L 8 12 L 19 12 L 19 12 L 8 5 M 8 12 L 8 19 L 19 12 L 19 12 L 8 12"
+        android:valueFrom="M 5 6 L 5 10 L 19 10 L 19 6 L 5 6 M 5 14 L 5 18 L 19 18 L 19 14 L 5 14"
+        android:valueType="pathType" />
+    </aapt:attr>
+  </target>
+  <target android:name="group">
+    <aapt:attr name="android:animation">
+      <objectAnimator
+        android:duration="300"
+        android:interpolator="@android:interpolator/fast_out_slow_in"
+        android:propertyName="rotation"
+        android:valueFrom="90"
+        android:valueTo="0"
+        android:valueType="floatType" />
+    </aapt:attr>
+  </target>
+</animated-vector>