Merge pull request #79 from lewismcgeary/add-fab-animation

add-fab-animation
lewismcgeary · Mar 3, 2016 · 9b1f499 · 9b1f499
2 parents 5844085 + 5fae4e2
commit 9b1f499
Show file tree

Hide file tree

Showing 16 changed files with 233 additions and 8 deletions.
diff --git a/app/src/main/java/io/github/lewismcgeary/androidgameoflife/GameStateCallback.java b/app/src/main/java/io/github/lewismcgeary/androidgameoflife/GameStateCallback.java
@@ -12,4 +12,6 @@ public interface GameStateCallback {
     void cellDrawingInProgress();
 
     void cellDrawingFinished();
+
+    void gameStarted();
 }
diff --git a/app/src/main/java/io/github/lewismcgeary/androidgameoflife/GridPresenter.java b/app/src/main/java/io/github/lewismcgeary/androidgameoflife/GridPresenter.java
@@ -36,6 +36,7 @@ public void passLiveCellsToModelAndStartGame(){
             worldGrid.setInitialLiveCells(userSelectedCells);
             startConstantUpdate();
             worldGridLayout.setEnabled(false);
+            worldGridLayout.gameStarted();
         } else {
             worldGridLayout.noCellsWereSelected();
         }

diff --git a/app/src/main/java/io/github/lewismcgeary/androidgameoflife/LifeGridFragment.java b/app/src/main/java/io/github/lewismcgeary/androidgameoflife/LifeGridFragment.java
@@ -142,6 +142,11 @@ public void cellDrawingFinished() {
         mListener.cellDrawingFinished();
     }
 
+    @Override
+    public void gameStarted() {
+        mListener.gameStarted();
+    }
+
     public interface OnFragmentInteractionListener {
 
         void gameOver();
@@ -151,5 +156,7 @@ public interface OnFragmentInteractionListener {
         void cellDrawingInProgress();
 
         void cellDrawingFinished();
+
+        void gameStarted();
     }
 }
diff --git a/app/src/main/java/io/github/lewismcgeary/androidgameoflife/LifeGridLayout.java b/app/src/main/java/io/github/lewismcgeary/androidgameoflife/LifeGridLayout.java
@@ -177,6 +177,10 @@ public void noCellsWereSelected(){
     public void cellsDiedGameOver(){
         gameStateCallback.gameOver();
     }
+
+    public void gameStarted() {
+        gameStateCallback.gameStarted();
+    }
     //can disable this as no scrolling needed
     @Override
     public boolean shouldDelayChildPressedState() {

diff --git a/app/src/main/java/io/github/lewismcgeary/androidgameoflife/MainActivity.java b/app/src/main/java/io/github/lewismcgeary/androidgameoflife/MainActivity.java
@@ -2,13 +2,13 @@
 
 import android.content.Intent;
 import android.content.pm.ActivityInfo;
-import android.graphics.drawable.Drawable;
 import android.os.Build;
 import android.os.Bundle;
 import android.support.design.widget.AppBarLayout;
 import android.support.design.widget.CoordinatorLayout;
 import android.support.design.widget.FloatingActionButton;
 import android.support.design.widget.Snackbar;
+import android.support.graphics.drawable.AnimatedVectorDrawableCompat;
 import android.support.v4.app.FragmentManager;
 import android.support.v4.app.FragmentTransaction;
 import android.support.v4.content.ContextCompat;
@@ -26,8 +26,8 @@ public class MainActivity extends AppCompatActivity implements IntroFragment.OnF
     FloatingActionButton startResetFab;
     String startButtonText;
     String resetButtonText;
-    Drawable playIcon;
-    Drawable resetIcon;
+    AnimatedVectorDrawableCompat playIcon;
+    AnimatedVectorDrawableCompat resetIcon;
     Snackbar snack;
 
     LifeGridFragment lifeGridFragment;
@@ -57,7 +57,6 @@ protected void onResume() {
     @Override
     public void onBackPressed() {
         super.onBackPressed();
-        showButtonInStartMode();
         startResetFab.hide();
         appBarLayout.setExpanded(true, true);
         setFixedScreenOrientation(false);
@@ -81,13 +80,12 @@ private void initialiseButton(){
         startResetFab = (FloatingActionButton)findViewById(R.id.start_reset_fab);
         startButtonText = getString(R.string.start_button_text);
         resetButtonText = getString(R.string.reset_button_text);
-        playIcon = ContextCompat.getDrawable(this, R.drawable.ic_play_arrow_24dp);
-        resetIcon = ContextCompat.getDrawable(this, R.drawable.ic_replay_24dp);
+        playIcon = AnimatedVectorDrawableCompat.create(this, R.drawable.fab_reset_to_play_animated_vector);
+        resetIcon = AnimatedVectorDrawableCompat.create(this, R.drawable.fab_play_to_reset_animated_vector);
         startResetFab.setOnClickListener(new View.OnClickListener() {
             @Override
             public void onClick(View v) {
                 if (startResetFab.getTag().equals(startButtonText)) {
-                    showButtonInResetMode();
                     lifeGridFragment.worldGridPresenter.passLiveCellsToModelAndStartGame();
                 } else {
                     showButtonInStartMode();
@@ -101,11 +99,13 @@ public void onClick(View v) {
     private void showButtonInStartMode(){
         startResetFab.setTag(startButtonText);
         startResetFab.setImageDrawable(playIcon);
+        playIcon.start();
     }
 
     private void showButtonInResetMode(){
         startResetFab.setTag(resetButtonText);
         startResetFab.setImageDrawable(resetIcon);
+        resetIcon.start();
     }
 
     private void startTransition(){
@@ -207,12 +207,17 @@ public void noCellsWereSelected() {
         ViewGroup group = (ViewGroup) snack.getView();
         group.setBackgroundColor(ContextCompat.getColor(this, R.color.colorPrimaryDark));
         snack.show();
-        showButtonInStartMode();
+    }
+
+    @Override
+    public void gameStarted() {
+        showButtonInResetMode();
     }
 
     @Override
     public void letsPlay() {
         setFixedScreenOrientation(true);
+        showButtonInStartMode();
         startTransition();
     }
 

diff --git a/app/src/main/res/animator/fab_arrowhead_to_play.xml b/app/src/main/res/animator/fab_arrowhead_to_play.xml
@@ -0,0 +1,27 @@
+<?xml version="1.0" encoding="utf-8"?>
+<set xmlns:android="http://schemas.android.com/apk/res/android"
+    android:ordering="together"
+    >
+    <objectAnimator
+        android:startOffset="@string/fab_anim_time"
+        android:propertyName="rotation"
+        android:duration="@string/fab_anim_time"
+        android:valueFrom="-180"
+        android:valueTo="-360"
+        android:interpolator="@android:interpolator/decelerate_cubic"
+        />
+    <objectAnimator
+        android:propertyName="scaleX"
+        android:duration="@string/fab_anim_time"
+        android:valueFrom="0.45"
+        android:valueTo="1"
+        android:interpolator="@android:interpolator/decelerate_cubic"
+        />
+    <objectAnimator
+        android:propertyName="scaleY"
+        android:duration="@string/fab_anim_time"
+        android:valueFrom="0.71"
+        android:valueTo="1"
+        android:interpolator="@android:interpolator/decelerate_cubic"
+        />
+</set>
diff --git a/app/src/main/res/animator/fab_arrowhead_to_play_startoffset.xml b/app/src/main/res/animator/fab_arrowhead_to_play_startoffset.xml
@@ -0,0 +1,26 @@
+<?xml version="1.0" encoding="utf-8"?>
+<set xmlns:android="http://schemas.android.com/apk/res/android"
+    android:ordering="together"
+    >
+    <objectAnimator
+        android:propertyName="rotation"
+        android:duration="@string/fab_anim_time"
+        android:valueFrom="-180"
+        android:valueTo="-180"
+        android:interpolator="@android:interpolator/decelerate_cubic"
+        />
+    <objectAnimator
+        android:propertyName="scaleX"
+        android:duration="@string/fab_anim_time"
+        android:valueFrom="0.45"
+        android:valueTo="0.45"
+        android:interpolator="@android:interpolator/decelerate_cubic"
+        />
+    <objectAnimator
+        android:propertyName="scaleY"
+        android:duration="@string/fab_anim_time"
+        android:valueFrom="0.71"
+        android:valueTo="0.71"
+        android:interpolator="@android:interpolator/decelerate_cubic"
+        />
+</set>
diff --git a/app/src/main/res/animator/fab_play_to_arrowhead.xml b/app/src/main/res/animator/fab_play_to_arrowhead.xml
@@ -0,0 +1,25 @@
+<?xml version="1.0" encoding="utf-8"?>
+<set xmlns:android="http://schemas.android.com/apk/res/android"
+    android:ordering="together">
+    <objectAnimator
+        android:propertyName="rotation"
+        android:duration="@string/fab_anim_time"
+        android:valueFrom="0"
+        android:valueTo="-180"
+        android:interpolator="@android:interpolator/accelerate_cubic"
+        />
+    <objectAnimator
+        android:propertyName="scaleX"
+        android:duration="@string/fab_anim_time"
+        android:valueFrom="1"
+        android:valueTo="0.45"
+        android:interpolator="@android:interpolator/accelerate_cubic"
+        />
+    <objectAnimator
+        android:propertyName="scaleY"
+        android:duration="@string/fab_anim_time"
+        android:valueFrom="1"
+        android:valueTo="0.71"
+        android:interpolator="@android:interpolator/accelerate_cubic"
+        />
+</set>
diff --git a/app/src/main/res/animator/fab_rotate_reset_arrow.xml b/app/src/main/res/animator/fab_rotate_reset_arrow.xml
@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="utf-8"?>
+<set xmlns:android="http://schemas.android.com/apk/res/android">
+<objectAnimator
+    android:propertyName="rotation"
+    android:startOffset="@string/fab_anim_time"
+    android:duration="@string/fab_anim_time"
+    android:valueFrom="0"
+    android:valueTo="-360"
+    android:interpolator="@android:interpolator/decelerate_cubic"
+    />
+</set>
diff --git a/app/src/main/res/animator/fab_tail_grow.xml b/app/src/main/res/animator/fab_tail_grow.xml
@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="utf-8"?>
+<set xmlns:android="http://schemas.android.com/apk/res/android"
+    android:ordering="sequentially">
+    <objectAnimator android:propertyName="trimPathEnd"
+        android:valueFrom="0"
+        android:valueTo="0"
+        android:valueType="floatType"
+        android:duration="@string/fab_anim_time" />
+    <objectAnimator android:propertyName="trimPathEnd"
+        android:valueFrom="0"
+        android:valueTo="1"
+        android:valueType="floatType"
+        android:duration="@string/fab_anim_time"
+        android:interpolator="@android:interpolator/decelerate_cubic"/>
+</set>
diff --git a/app/src/main/res/animator/fab_tail_shrink.xml b/app/src/main/res/animator/fab_tail_shrink.xml
@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<set xmlns:android="http://schemas.android.com/apk/res/android">
+<objectAnimator android:propertyName="trimPathEnd"
+    android:valueFrom="1"
+    android:valueTo="0"
+    android:valueType="floatType"
+    android:duration="@string/fab_anim_time"
+    android:interpolator="@android:interpolator/accelerate_cubic"/>
+</set>
diff --git a/app/src/main/res/drawable/fab_ic_play_arrow_24dp.xml b/app/src/main/res/drawable/fab_ic_play_arrow_24dp.xml
@@ -0,0 +1,30 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="24.0dp"
+    android:height="24.0dp"
+    android:viewportWidth="24.0"
+    android:viewportHeight="24.0">
+    <group android:name="rotation group"
+        android:pivotX="12"
+        android:pivotY="12">
+
+        <path
+            android:name="arrow tail"
+            android:strokeColor="#000000"
+            android:strokeWidth="2"
+            android:trimPathEnd="0"
+            android:pathData=
+                "M12,6 c3.9,0 7,3.135 7,7 s-3.135,7 -7,7 -7,-3.135 -7,-7"
+            />
+        <group
+            android:name="arrow head group"
+            android:rotation="0"
+            android:pivotX="10.75"
+            android:pivotY="8.5"
+            android:scaleX="1"
+            android:scaleY="1">
+            <path
+                android:fillColor="#FF000000"
+                android:pathData="M8,5v14l11,-7z"/>
+        </group>
+    </group>
+</vector>
diff --git a/app/src/main/res/drawable/fab_ic_replay_24dp.xml b/app/src/main/res/drawable/fab_ic_replay_24dp.xml
@@ -0,0 +1,30 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+        android:width="24.0dp"
+        android:height="24.0dp"
+        android:viewportWidth="24.0"
+        android:viewportHeight="24.0">
+    <group android:name="rotation group"
+        android:pivotX="12"
+        android:pivotY="12">
+
+    <path
+        android:name="arrow tail"
+        android:strokeColor="#000000"
+        android:strokeWidth="2"
+        android:pathData=
+            "M12,6 c3.9,0 7,3.135 7,7 s-3.135,7 -7,7 -7,-3.135 -7,-7"
+        />
+        <group
+            android:name="arrow head group"
+            android:rotation="180"
+            android:pivotX="10.75"
+            android:pivotY="8.5"
+            android:scaleX="0.45"
+            android:scaleY="0.71">
+        <path
+            android:fillColor="#FF000000"
+            android:pathData="M8,5v14l11,-7z"/>
+        </group>
+    </group>
+</vector>
+
diff --git a/app/src/main/res/drawable/fab_play_to_reset_animated_vector.xml b/app/src/main/res/drawable/fab_play_to_reset_animated_vector.xml
@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="utf-8"?>
+<animated-vector
+    android:drawable="@drawable/fab_ic_play_arrow_24dp"
+    xmlns:android="http://schemas.android.com/apk/res/android" >
+
+    <target
+        android:animation="@animator/fab_play_to_arrowhead"
+        android:name="arrow head group"/>
+    <target
+        android:animation="@animator/fab_rotate_reset_arrow"
+        android:name="rotation group"/>
+    <target
+        android:animation="@animator/fab_tail_grow"
+        android:name="arrow tail"/>
+
+    </animated-vector>
diff --git a/app/src/main/res/drawable/fab_reset_to_play_animated_vector.xml b/app/src/main/res/drawable/fab_reset_to_play_animated_vector.xml
@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="utf-8"?>
+<animated-vector
+    xmlns:android="http://schemas.android.com/apk/res/android"
+    android:drawable="@drawable/fab_ic_replay_24dp">
+    <target
+        android:animation="@animator/fab_tail_shrink"
+        android:name="arrow tail"/>
+    <target
+        android:animation="@animator/fab_arrowhead_to_play_startoffset"
+        android:name="arrow head group"/>
+    <target
+        android:animation="@animator/fab_arrowhead_to_play"
+        android:name="arrow head group"/>
+
+</animated-vector>
diff --git a/app/src/main/res/values/vector_drawable_config.xml b/app/src/main/res/values/vector_drawable_config.xml
@@ -6,4 +6,6 @@
 
     <string name="live_cell_path">M0,0 L24,0 24,24 0,24 z</string>
     <string name="scale_group_name">scale group</string>
+
+    <string name="fab_anim_time">400</string>
 </resources>