#15: Styling/Animations & Tweaking

Entreco · Dec 2, 2017 · 33a64a5 · 33a64a5
1 parent d272480
commit 33a64a5
Show file tree

Hide file tree

Showing 15 changed files with 252 additions and 107 deletions.
diff --git a/...d/DartsScorecard/app/src/main/java/nl/entreco/dartsscorecard/play/input/InputViewModel.kt b/...d/DartsScorecard/app/src/main/java/nl/entreco/dartsscorecard/play/input/InputViewModel.kt
@@ -2,7 +2,9 @@ package nl.entreco.dartsscorecard.play.input
 
 import android.databinding.ObservableBoolean
 import android.databinding.ObservableField
+import android.databinding.ObservableInt
 import android.widget.TextView
+import nl.entreco.dartsscorecard.R
 import nl.entreco.dartsscorecard.base.BaseViewModel
 import nl.entreco.dartsscorecard.play.PlayerListener
 import nl.entreco.domain.Analytics
@@ -23,7 +25,7 @@ open class InputViewModel @Inject constructor(private val analytics: Analytics)
     val toggle = ObservableBoolean(false)
     val current = ObservableField<Player>(NoPlayer())
     val scoredTxt = ObservableField<String>("")
-    val nextDescription = ObservableField<String>("")
+    val nextDescription = ObservableInt(R.string.empty)
     var count = 0
     private val estimator = ScoreEstimator()
     private var turn = Turn()
@@ -79,6 +81,7 @@ open class InputViewModel @Inject constructor(private val analytics: Analytics)
     }
 
     private fun submit(turn: Turn, listener: InputListener) {
+        count = 0
         scoredTxt.set(turn.total().toString())
         listener.onTurnSubmitted(turn.copy(), nextUp?.player!!)
         analytics.trackAchievement("scored: $turn")
@@ -93,8 +96,14 @@ open class InputViewModel @Inject constructor(private val analytics: Analytics)
         current.set(next.player)
     }
 
-    private fun descriptionFromNext(next: Next): String? {
-        return next.state.name
+    private fun descriptionFromNext(next: Next): Int {
+        return when(next.state) {
+            State.START -> R.string.game_on
+            State.LEG -> R.string.to_throw_first
+            State.SET -> R.string.to_throw_first
+            State.MATCH -> R.string.game_shot_and_match
+            else -> R.string.to_throw
+        }
     }
 
     private fun clearScoreInput() {

diff --git a/...id/DartsScorecard/app/src/main/java/nl/entreco/dartsscorecard/play/main/Play01Animator.kt b/...id/DartsScorecard/app/src/main/java/nl/entreco/dartsscorecard/play/main/Play01Animator.kt
@@ -2,9 +2,7 @@ package nl.entreco.dartsscorecard.play.main
 
 import android.support.design.widget.BottomSheetBehavior
 import android.view.View
-import android.view.ViewGroup
-import android.view.animation.AccelerateDecelerateInterpolator
-import android.widget.LinearLayout
+import android.view.ViewPropertyAnimator
 import nl.entreco.dartsscorecard.databinding.ActivityPlay01Binding
 
 /**
@@ -16,37 +14,51 @@ class Play01Animator(binding: ActivityPlay01Binding) {
     private val inputSheet = binding.includeInput?.inputSheet!!
     private val mainSheet = binding.includeMain?.mainSheet!!
     private val behaviour = BottomSheetBehavior.from(inputSheet)
+    private val stat1 = binding.includeMain?.stat1!!
+    private val stat2 = binding.includeMain?.stat2!!
+    private val stat3 = binding.includeMain?.stat3!!
+    private val stat4 = binding.includeMain?.stat4!!
+    private val stat5 = binding.includeMain?.stat5!!
+    private val stat6 = binding.includeMain?.stat6!!
+    private val stat7 = binding.includeMain?.stat7!!
+    private val player1 = binding.includeMain?.player1!!
+    private val player2 = binding.includeMain?.player2!!
+    private val version = binding.includeMain?.version!!
 
     init {
         behaviour.setBottomSheetCallback(object : BottomSheetBehavior.BottomSheetCallback() {
             override fun onSlide(bottomSheet: View, slideOffset: Float) {
 
-                // Slide Out Bottom/Top
+                // Scale Fab Out Bottom/Top
                 fab.animate().scaleY(slideOffset).scaleX(slideOffset).setDuration(0).start()
 
-                // Fade Out
-                inputSheet.animate().alpha(slideOffset).setDuration(0).start()
-
                 // Fade In MainSheet
                 mainSheet.animate().alpha(1 - Math.sqrt(slideOffset.toDouble()).toFloat()).setDuration(0).start()
                 mainSheet.animate().translationY((slideOffset) * -100).setDuration(0).start()
 
+                // Fly In Players
+                player1.animate().translationX(slideOffset * -player1.width/3).setDuration(0).start()
+                player2.animate().translationX(slideOffset * player2.width/3).setDuration(0).start()
+
                 // Fly In stats
-                animateState(binding.includeMain?.stat1!!, 100, slideOffset)
-                animateState(binding.includeMain?.stat2!!, 200, slideOffset)
-                animateState(binding.includeMain?.stat3!!, 300, slideOffset)
-                animateState(binding.includeMain?.stat4!!, 400, slideOffset)
-                animateState(binding.includeMain?.stat5!!, 500, slideOffset)
-                animateState(binding.includeMain?.stat6!!, 600, slideOffset)
-                animateState(binding.includeMain?.stat7!!, 700, slideOffset)
+                animateState(stat1.animate(), 1, slideOffset)
+                animateState(stat2.animate(), 2, slideOffset)
+                animateState(stat3.animate(), 3, slideOffset)
+                animateState(stat4.animate(), 4, slideOffset)
+                animateState(stat5.animate(), 5, slideOffset)
+                animateState(stat6.animate(), 6, slideOffset)
+                animateState(stat7.animate(), 7, slideOffset)
+
+                // Also, Fly In Version
+                animateState(version.animate(), 8, slideOffset)
             }
 
             override fun onStateChanged(bottomSheet: View, newState: Int) {}
         })
         behaviour.state = BottomSheetBehavior.STATE_EXPANDED
     }
 
-    private fun animateState(view: LinearLayout, index: Int, slideOffset: Float) {
-        view.animate().translationY(-index * slideOffset).setInterpolator(AccelerateDecelerateInterpolator()).setDuration(0).start()
+    private fun animateState(anim: ViewPropertyAnimator, index: Int, slideOffset: Float) {
+        anim.translationY(-index * 50 * slideOffset * index).scaleX(Math.max(0.0, (1- slideOffset * index).toDouble()).toFloat()).alpha(1 - slideOffset).setDuration(0).start()
     }
 }
diff --git a/android/DartsScorecard/app/src/main/res/drawable/highlight.xml b/android/DartsScorecard/app/src/main/res/drawable/highlight.xml
@@ -1,19 +1,11 @@
 <vector xmlns:android="http://schemas.android.com/apk/res/android"
-    android:width="24dp"
-    android:height="24dp"
+    android:width="22dp"
+    android:height="4dp"
     android:viewportHeight="45.0"
     android:viewportWidth="221.0">
-    <path
-        android:fillColor="#00000000"
-        android:fillType="evenOdd"
-        android:pathData="M0,0h221v45h-221z"
-        android:strokeColor="#00000000"
-        android:strokeWidth="1" />
     <path
         android:fillAlpha="0.1"
-        android:fillColor="@color/white"
+        android:fillColor="?attr/highlightColor"
         android:fillType="evenOdd"
-        android:pathData="M221,19.22L221,8C221,3.58 217.42,-0 213,0L8,0L8,0C3.58,0 -0,3.58 0,8L0,8L0,19.15C31.15,17.17 69.08,16 110,16C151.36,16 189.66,17.19 221,19.22Z"
-        android:strokeColor="#00000000"
-        android:strokeWidth="1"></path>
+        android:pathData="M221,19.22L221,8C221,3.58 217.42,-0 213,0L8,0L8,0C3.58,0 -0,3.58 0,8L0,8L0,19.15C31.15,17.17 69.08,16 110,16C151.36,16 189.66,17.19 221,19.22Z" />
 </vector>
diff --git a/android/DartsScorecard/app/src/main/res/drawable/ic_dart.xml b/android/DartsScorecard/app/src/main/res/drawable/ic_dart.xml
@@ -3,33 +3,106 @@
     android:height="30dp"
     android:viewportHeight="130.0"
     android:viewportWidth="130.0">
-    <path
-        android:fillColor="?attr/scoreText"
-        android:fillType="evenOdd"
-        android:pathData="M37.59,73.87C52.32,63.2 113.49,13.61 115.98,10.78C118.46,7.94 121.16,9.6 119.89,13.06C91.5,49.02 78.74,61.41 56.14,92.42C53.3,80.5 48.18,76.82 37.59,73.87Z"
-        android:strokeWidth="1" />
-    <path
-        android:fillColor="?attr/scoreText"
-        android:fillType="evenOdd"
-        android:pathData="M111.95,8.81C100.94,18.47 89.93,27.45 78.92,35.73C83.3,16.92 88.45,0.75 100.2,0.8C108.03,0.83 111.95,3.5 111.95,8.81Z"
-        android:strokeColor="#00000000"
-        android:strokeWidth="1" />
-    <path
-        android:fillColor="?attr/scoreText"
-        android:fillType="evenOdd"
-        android:pathData="M120.51,17.55C114.44,25.1 105.43,36.1 93.48,50.54C100.81,51.31 127.18,41.92 129.18,31.44C130.5,24.46 127.62,19.83 120.51,17.55Z"
-        android:strokeColor="#00000000"
-        android:strokeWidth="1" />
-    <path
-        android:fillColor="?attr/scoreText"
-        android:fillType="evenOdd"
-        android:pathData="M28.57,111.24C31.37,112.13 34.43,112.11 37.75,111.16C43.06,106.76 47.82,102.24 52.01,97.61C53.33,86.79 43.29,76.78 31.64,77.2C27.65,81.06 23.54,85.57 19.3,90.72C17.85,94.71 17.63,98.3 18.67,101.5C19.86,100.56 21.37,100 23,100C26.87,100 30,103.13 30,107C30,108.59 29.47,110.06 28.57,111.24Z"
-        android:strokeColor="#00000000"
-        android:strokeWidth="1" />
-    <path
-        android:fillColor="?attr/scoreText"
-        android:fillType="evenOdd"
-        android:pathData="M25.37,104.13L25.37,104.13A2,2 0,0 1,25.37 106.95L3.45,128.87A2,2 92.26,0 1,0.63 128.87L0.63,128.87A2,2 92.26,0 1,0.63 126.05L22.55,104.13A2,2 0,0 1,25.37 104.13z"
-        android:strokeColor="#00000000"
-        android:strokeWidth="1" />
+    <group android:name="dart1"
+        android:rotation="0"
+        android:pivotX="0.0"
+        android:pivotY="130.0">
+        <path
+            android:fillColor="?attr/scoreText"
+            android:fillType="evenOdd"
+            android:pathData="M37.59,73.87C52.32,63.2 113.49,13.61 115.98,10.78C118.46,7.94 121.16,9.6 119.89,13.06C91.5,49.02 78.74,61.41 56.14,92.42C53.3,80.5 48.18,76.82 37.59,73.87Z"
+            android:strokeWidth="1" />
+        <path
+            android:fillColor="?attr/scoreText"
+            android:fillType="evenOdd"
+            android:pathData="M111.95,8.81C100.94,18.47 89.93,27.45 78.92,35.73C83.3,16.92 88.45,0.75 100.2,0.8C108.03,0.83 111.95,3.5 111.95,8.81Z"
+            android:strokeColor="#00000000"
+            android:strokeWidth="1" />
+        <path
+            android:fillColor="?attr/scoreText"
+            android:fillType="evenOdd"
+            android:pathData="M120.51,17.55C114.44,25.1 105.43,36.1 93.48,50.54C100.81,51.31 127.18,41.92 129.18,31.44C130.5,24.46 127.62,19.83 120.51,17.55Z"
+            android:strokeColor="#00000000"
+            android:strokeWidth="1" />
+        <path
+            android:fillColor="?attr/scoreText"
+            android:fillType="evenOdd"
+            android:pathData="M28.57,111.24C31.37,112.13 34.43,112.11 37.75,111.16C43.06,106.76 47.82,102.24 52.01,97.61C53.33,86.79 43.29,76.78 31.64,77.2C27.65,81.06 23.54,85.57 19.3,90.72C17.85,94.71 17.63,98.3 18.67,101.5C19.86,100.56 21.37,100 23,100C26.87,100 30,103.13 30,107C30,108.59 29.47,110.06 28.57,111.24Z"
+            android:strokeColor="#00000000"
+            android:strokeWidth="1" />
+        <path
+            android:fillColor="?attr/scoreText"
+            android:fillType="evenOdd"
+            android:pathData="M25.37,104.13L25.37,104.13A2,2 0,0 1,25.37 106.95L3.45,128.87A2,2 92.26,0 1,0.63 128.87L0.63,128.87A2,2 92.26,0 1,0.63 126.05L22.55,104.13A2,2 0,0 1,25.37 104.13z"
+            android:strokeColor="#00000000"
+            android:strokeWidth="1" />
+    </group>
+    <group android:name="dart2"
+        android:rotation="-20"
+        android:pivotX="0.0"
+        android:pivotY="130.0">
+        <path
+            android:fillColor="?attr/scoreText"
+            android:fillType="evenOdd"
+            android:pathData="M37.59,73.87C52.32,63.2 113.49,13.61 115.98,10.78C118.46,7.94 121.16,9.6 119.89,13.06C91.5,49.02 78.74,61.41 56.14,92.42C53.3,80.5 48.18,76.82 37.59,73.87Z"
+            android:strokeWidth="1" />
+        <path
+            android:fillColor="?attr/scoreText"
+            android:fillType="evenOdd"
+            android:pathData="M111.95,8.81C100.94,18.47 89.93,27.45 78.92,35.73C83.3,16.92 88.45,0.75 100.2,0.8C108.03,0.83 111.95,3.5 111.95,8.81Z"
+            android:strokeColor="#00000000"
+            android:strokeWidth="1" />
+        <path
+            android:fillColor="?attr/scoreText"
+            android:fillType="evenOdd"
+            android:pathData="M120.51,17.55C114.44,25.1 105.43,36.1 93.48,50.54C100.81,51.31 127.18,41.92 129.18,31.44C130.5,24.46 127.62,19.83 120.51,17.55Z"
+            android:strokeColor="#00000000"
+            android:strokeWidth="1" />
+        <path
+            android:fillColor="?attr/scoreText"
+            android:fillType="evenOdd"
+            android:pathData="M28.57,111.24C31.37,112.13 34.43,112.11 37.75,111.16C43.06,106.76 47.82,102.24 52.01,97.61C53.33,86.79 43.29,76.78 31.64,77.2C27.65,81.06 23.54,85.57 19.3,90.72C17.85,94.71 17.63,98.3 18.67,101.5C19.86,100.56 21.37,100 23,100C26.87,100 30,103.13 30,107C30,108.59 29.47,110.06 28.57,111.24Z"
+            android:strokeColor="#00000000"
+            android:strokeWidth="1" />
+        <path
+            android:fillColor="?attr/scoreText"
+            android:fillType="evenOdd"
+            android:pathData="M25.37,104.13L25.37,104.13A2,2 0,0 1,25.37 106.95L3.45,128.87A2,2 92.26,0 1,0.63 128.87L0.63,128.87A2,2 92.26,0 1,0.63 126.05L22.55,104.13A2,2 0,0 1,25.37 104.13z"
+            android:strokeColor="#00000000"
+            android:strokeWidth="1" />
+    </group>
+    <group android:name="dart3"
+        android:rotation="20"
+        android:pivotX="0.0"
+        android:pivotY="130.0">
+        <path
+            android:fillColor="?attr/scoreText"
+            android:fillType="evenOdd"
+            android:pathData="M37.59,73.87C52.32,63.2 113.49,13.61 115.98,10.78C118.46,7.94 121.16,9.6 119.89,13.06C91.5,49.02 78.74,61.41 56.14,92.42C53.3,80.5 48.18,76.82 37.59,73.87Z"
+            android:strokeWidth="1" />
+        <path
+            android:fillColor="?attr/scoreText"
+            android:fillType="evenOdd"
+            android:pathData="M111.95,8.81C100.94,18.47 89.93,27.45 78.92,35.73C83.3,16.92 88.45,0.75 100.2,0.8C108.03,0.83 111.95,3.5 111.95,8.81Z"
+            android:strokeColor="#00000000"
+            android:strokeWidth="1" />
+        <path
+            android:fillColor="?attr/scoreText"
+            android:fillType="evenOdd"
+            android:pathData="M120.51,17.55C114.44,25.1 105.43,36.1 93.48,50.54C100.81,51.31 127.18,41.92 129.18,31.44C130.5,24.46 127.62,19.83 120.51,17.55Z"
+            android:strokeColor="#00000000"
+            android:strokeWidth="1" />
+        <path
+            android:fillColor="?attr/scoreText"
+            android:fillType="evenOdd"
+            android:pathData="M28.57,111.24C31.37,112.13 34.43,112.11 37.75,111.16C43.06,106.76 47.82,102.24 52.01,97.61C53.33,86.79 43.29,76.78 31.64,77.2C27.65,81.06 23.54,85.57 19.3,90.72C17.85,94.71 17.63,98.3 18.67,101.5C19.86,100.56 21.37,100 23,100C26.87,100 30,103.13 30,107C30,108.59 29.47,110.06 28.57,111.24Z"
+            android:strokeColor="#00000000"
+            android:strokeWidth="1" />
+        <path
+            android:fillColor="?attr/scoreText"
+            android:fillType="evenOdd"
+            android:pathData="M25.37,104.13L25.37,104.13A2,2 0,0 1,25.37 106.95L3.45,128.87A2,2 92.26,0 1,0.63 128.87L0.63,128.87A2,2 92.26,0 1,0.63 126.05L22.55,104.13A2,2 0,0 1,25.37 104.13z"
+            android:strokeColor="#00000000"
+            android:strokeWidth="1" />
+    </group>
 </vector>
diff --git a/android/DartsScorecard/app/src/main/res/drawable/ic_submit.xml b/android/DartsScorecard/app/src/main/res/drawable/ic_submit.xml
@@ -0,0 +1,9 @@
+<animated-vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:drawable="@drawable/ic_dart" >
+    <!--<target-->
+        <!--android:name="dart3"-->
+        <!--android:animation="@anim/rotation" />-->
+    <!--<target-->
+        <!--android:name="dart2"-->
+        <!--android:animation="@anim/path_morph" />-->
+</animated-vector>
diff --git a/android/DartsScorecard/app/src/main/res/drawable/stat_player.xml b/android/DartsScorecard/app/src/main/res/drawable/stat_player.xml
@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="utf-8"?>
+<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
+    <item>
+        <shape>
+            <gradient
+                android:angle="-90"
+                android:endColor="?attr/grad_score_name_stop"
+                android:startColor="?attr/grad_score_name_start" />
+
+            <stroke android:color="?attr/statBorderColor" android:width="1px"/>
+        </shape>
+    </item>
+    <item android:drawable="@drawable/highlight" />
+</layer-list>
diff --git a/android/DartsScorecard/app/src/main/res/layout/play_01_input.xml b/android/DartsScorecard/app/src/main/res/layout/play_01_input.xml
@@ -21,7 +21,7 @@
         android:layout_height="wrap_content"
         android:orientation="vertical"
         app:behavior_hideable="false"
-        app:behavior_peekHeight="40dp"
+        app:behavior_peekHeight="48dp"
         app:layout_behavior="android.support.design.widget.BottomSheetBehavior">
 
         <!-- Turn Bar -->
@@ -32,28 +32,28 @@
             android:background="@drawable/score_header">
 
             <ImageView
-                android:layout_width="16dp"
+                android:layout_width="@dimen/large"
                 android:layout_height="wrap_content"
                 android:rotation="180"
                 android:layout_alignTop="@id/input_escape"
                 android:layout_alignBottom="@id/input_escape"
                 android:src="@drawable/ic_current_team"/>
 
             <ImageButton
+                style="@style/Input.Back"
                 android:id="@+id/input_escape"
                 android:layout_width="wrap_content"
                 android:layout_height="wrap_content"
                 android:layout_alignParentEnd="true"
-                android:background="@null"
-                android:onClick="@{() -> viewModel.back()}"
-                android:src="@drawable/ic_escape" />
+                android:onClick="@{() -> viewModel.back()}" />
 
             <TextView
                 android:id="@+id/input_score"
                 style="@style/Input.Score"
                 android:layout_width="wrap_content"
                 android:layout_height="wrap_content"
                 android:layout_alignParentTop="true"
+                android:layout_alignBottom="@id/input_escape"
                 android:layout_toStartOf="@id/input_escape"
                 app:scoreInput="@{viewModel.scoredTxt}" />
 
@@ -189,6 +189,7 @@
             android:layout_margin="16dp"
             android:onClick="@{() -> viewModel.tryToSubmit(inputScore, listener)}"
             android:src="@drawable/ic_dart"
+            fab:useCompatPadding="true"
             fab:fabSize="normal" />
 
     </RelativeLayout>