Merge pull request #8 from material-components/reply/motion_interp

hunterstich · web-flow · commit 0be7f5fdbd5f · 2019-10-31T07:33:44.000-07:00
Add motion theming
diff --git a/Reply/app/src/main/java/com/materialstudies/reply/ui/compose/ComposeFragment.kt b/Reply/app/src/main/java/com/materialstudies/reply/ui/compose/ComposeFragment.kt
@@ -33,7 +33,7 @@ import com.materialstudies.reply.data.Email
 import com.materialstudies.reply.data.EmailStore
 import com.materialstudies.reply.databinding.ComposeRecipientChipBinding
 import com.materialstudies.reply.databinding.FragmentComposeBinding
-import com.materialstudies.reply.util.FastOutUltraSlowIn
+import com.materialstudies.reply.util.themeInterpolator
 import com.materialstudies.reply.util.transition.MaterialContainerTransition
 import kotlin.LazyThreadSafetyMode.NONE
 
@@ -118,12 +118,12 @@ class ComposeFragment : Fragment() {
                 requireActivity().findViewById(R.id.fab),
                 binding.emailCardView
             )
-            duration = resources.getInteger(R.integer.reply_motion_default_duration).toLong()
-            interpolator = FastOutUltraSlowIn()
+            duration = resources.getInteger(R.integer.reply_motion_default_large).toLong()
+            interpolator = requireContext().themeInterpolator(R.attr.motionInterpolatorPersistent)
         }
         returnTransition = Slide().apply {
-            duration = resources.getInteger(R.integer.reply_motion_micro_duration).toLong()
-            interpolator = AccelerateInterpolator()
+            duration = resources.getInteger(R.integer.reply_motion_duration_medium).toLong()
+            interpolator = requireContext().themeInterpolator(R.attr.motionInterpolatorOutgoing)
         }
         startPostponedEnterTransition()
     }
diff --git a/Reply/app/src/main/java/com/materialstudies/reply/ui/email/EmailFragment.kt b/Reply/app/src/main/java/com/materialstudies/reply/ui/email/EmailFragment.kt
@@ -27,7 +27,7 @@ import androidx.recyclerview.widget.GridLayoutManager
 import com.materialstudies.reply.R
 import com.materialstudies.reply.data.EmailStore
 import com.materialstudies.reply.databinding.FragmentEmailBinding
-import com.materialstudies.reply.util.FastOutUltraSlowIn
+import com.materialstudies.reply.util.themeInterpolator
 import com.materialstudies.reply.util.transition.MaterialContainerTransition
 import kotlin.LazyThreadSafetyMode.NONE
 
@@ -95,15 +95,15 @@ class EmailFragment : Fragment() {
             R.id.nested_scroll_view,
             correctForZOrdering = true
         ).apply {
-            duration = resources.getInteger(R.integer.reply_motion_default_duration).toLong()
-            interpolator = FastOutUltraSlowIn()
+            duration = resources.getInteger(R.integer.reply_motion_default_large).toLong()
+            interpolator = requireContext().themeInterpolator(R.attr.motionInterpolatorPersistent)
         }
         sharedElementReturnTransition = MaterialContainerTransition(
             R.id.recycler_view,
             correctForZOrdering = true
         ).apply {
-            duration = resources.getInteger(R.integer.reply_motion_default_duration).toLong()
-            interpolator = FastOutUltraSlowIn()
+            duration = resources.getInteger(R.integer.reply_motion_default_large).toLong()
+            interpolator = requireContext().themeInterpolator(R.attr.motionInterpolatorPersistent)
         }
     }
 
diff --git a/Reply/app/src/main/java/com/materialstudies/reply/ui/home/EmailSwipeActionDrawable.kt b/Reply/app/src/main/java/com/materialstudies/reply/ui/home/EmailSwipeActionDrawable.kt
@@ -27,11 +27,11 @@ import android.graphics.RectF
 import android.graphics.drawable.Drawable
 import androidx.annotation.ColorInt
 import androidx.appcompat.content.res.AppCompatResources
-import androidx.interpolator.view.animation.FastOutSlowInInterpolator
 import com.materialstudies.reply.R
 import com.materialstudies.reply.util.lerp
 import com.materialstudies.reply.util.lerpArgb
 import com.materialstudies.reply.util.themeColor
+import com.materialstudies.reply.util.themeInterpolator
 import kotlin.math.abs
 import kotlin.math.hypot
 import kotlin.math.sin
@@ -78,8 +78,8 @@ class EmailSwipeActionDrawable(context: Context) : Drawable() {
             }
         }
     private var progressAnim: ValueAnimator? = null
-    private val dur = context.resources.getInteger(R.integer.reply_motion_short_duration)
-    private val interp = FastOutSlowInInterpolator()
+    private val dur = context.resources.getInteger(R.integer.reply_motion_duration_medium)
+    private val interp = context.themeInterpolator(R.attr.motionInterpolatorPersistent)
 
     override fun onBoundsChange(bounds: Rect?) {
         if (bounds == null)  return
diff --git a/Reply/app/src/main/java/com/materialstudies/reply/ui/nav/BottomNavDrawerFragment.kt b/Reply/app/src/main/java/com/materialstudies/reply/ui/nav/BottomNavDrawerFragment.kt
@@ -37,9 +37,9 @@ import com.materialstudies.reply.R
 import com.materialstudies.reply.data.Account
 import com.materialstudies.reply.data.AccountStore
 import com.materialstudies.reply.databinding.FragmentBottomNavDrawerBinding
-import com.materialstudies.reply.util.FastOutUltraSlowIn
 import com.materialstudies.reply.util.lerp
 import com.materialstudies.reply.util.themeColor
+import com.materialstudies.reply.util.themeInterpolator
 import kotlin.LazyThreadSafetyMode.NONE
 import kotlin.math.abs
 
@@ -128,7 +128,9 @@ class BottomNavDrawerFragment :
 
     private var sandwichState: SandwichState = SandwichState.CLOSED
     private var sandwichAnim: ValueAnimator? = null
-    private val sandwichInterp = FastOutUltraSlowIn()
+    private val sandwichInterp by lazy(NONE) {
+        requireContext().themeInterpolator(R.attr.motionInterpolatorPersistent)
+    }
     // Progress value which drives the animation of the sandwiching account picker. Responsible
     // for both calling progress updates and state updates.
     private var sandwichProgress: Float = 0F
@@ -304,7 +306,7 @@ class BottomNavDrawerFragment :
             addUpdateListener { sandwichProgress = animatedValue as Float }
             interpolator = sandwichInterp
             duration = (abs(newProgress - initialProgress) *
-                resources.getInteger(R.integer.reply_motion_short_duration)).toLong()
+                resources.getInteger(R.integer.reply_motion_duration_medium)).toLong()
         }
         sandwichAnim?.start()
     }
diff --git a/Reply/app/src/main/java/com/materialstudies/reply/util/ContextExtensions.kt b/Reply/app/src/main/java/com/materialstudies/reply/util/ContextExtensions.kt
@@ -21,6 +21,8 @@ import android.content.Context
 import android.graphics.Color
 import android.graphics.drawable.Drawable
 import android.util.TypedValue
+import android.view.animation.AnimationUtils
+import android.view.animation.Interpolator
 import androidx.annotation.AttrRes
 import androidx.annotation.ColorInt
 import androidx.annotation.DrawableRes
@@ -47,12 +49,22 @@ fun Context.themeColor(
  * Retrieve a style from the current [android.content.res.Resources.Theme].
  */
 @StyleRes
-fun Context.themeStyle(attr: Int): Int {
+fun Context.themeStyle(@AttrRes attr: Int): Int {
     val tv = TypedValue()
     theme.resolveAttribute(attr, tv, true)
     return tv.data
 }
 
+@SuppressLint("Recycle")
+fun Context.themeInterpolator(@AttrRes attr: Int): Interpolator {
+    return AnimationUtils.loadInterpolator(
+        this,
+        obtainStyledAttributes(intArrayOf(attr)).use {
+            it.getResourceId(0, android.R.interpolator.fast_out_slow_in)
+        }
+    )
+}
+
 fun Context.getDrawableOrNull(@DrawableRes id: Int?): Drawable? {
     return if (id == null || id == 0) null else AppCompatResources.getDrawable(this, id)
 }
diff --git a/Reply/app/src/main/java/com/materialstudies/reply/util/FastOutUltraSlowIn.kt b/Reply/app/src/main/java/com/materialstudies/reply/util/FastOutUltraSlowIn.kt
diff --git a/Reply/app/src/main/java/com/materialstudies/reply/util/transition/MaterialContainerTransition.kt b/Reply/app/src/main/java/com/materialstudies/reply/util/transition/MaterialContainerTransition.kt
@@ -341,7 +341,6 @@ private class MaterialContainerTransitionDrawable(
         // Fade out the startView while pinning it to the top of currentBounds and scaling it to
         // fit the width of currentBounds.
         val startAlpha = lerp(1F, 0F, alphaOutStartPoint, alphaOutEndPoint, progress)
-        println("startAlpha: progress: $progress, $startAlpha")
         // Translate to pin to top
         if (startAlpha > 0F) {
             canvas.withTranslation(currentBounds.left, currentBounds.top) {
diff --git a/Reply/app/src/main/res/animator/fab_hide.xml b/Reply/app/src/main/res/animator/fab_hide.xml
@@ -17,21 +17,21 @@
         android:propertyName="scale"
         android:valueFrom="1"
         android:valueTo="0"
-        android:duration="@integer/reply_motion_micro_duration"
+        android:duration="@integer/reply_motion_duration_small"
         android:repeatMode="restart"
         android:interpolator="@android:interpolator/fast_out_slow_in"/>
     <objectAnimator
         android:propertyName="iconScale"
         android:valueFrom="1"
         android:valueTo="0"
-        android:duration="@integer/reply_motion_micro_duration"
+        android:duration="@integer/reply_motion_duration_small"
         android:repeatMode="restart"
         android:interpolator="@android:interpolator/fast_out_slow_in"/>
     <objectAnimator
         android:propertyName="opacity"
         android:valueFrom="1"
         android:valueTo="0"
-        android:duration="@integer/reply_motion_micro_duration"
+        android:duration="@integer/reply_motion_duration_small"
         android:repeatMode="restart"
         android:interpolator="@android:interpolator/fast_out_slow_in"/>
 </set>
diff --git a/Reply/app/src/main/res/animator/fab_show.xml b/Reply/app/src/main/res/animator/fab_show.xml
@@ -18,21 +18,21 @@
         android:propertyName="scale"
         android:valueFrom="0"
         android:valueTo="1"
-        android:duration="@integer/reply_motion_micro_duration"
+        android:duration="@integer/reply_motion_duration_small"
         android:repeatMode="restart"
         android:interpolator="@android:interpolator/fast_out_slow_in"/>
     <objectAnimator
         android:propertyName="iconScale"
         android:valueFrom="0"
         android:valueTo="1"
-        android:duration="@integer/reply_motion_micro_duration"
+        android:duration="@integer/reply_motion_duration_small"
         android:repeatMode="restart"
         android:interpolator="@android:interpolator/fast_out_slow_in"/>
     <objectAnimator
         android:propertyName="opacity"
         android:valueFrom="0"
         android:valueTo="1"
-        android:duration="@integer/reply_motion_micro_duration"
+        android:duration="@integer/reply_motion_duration_small"
         android:repeatMode="restart"
         android:interpolator="@android:interpolator/fast_out_slow_in"/>
 </set>
diff --git a/Reply/app/src/main/res/values/attrs.xml b/Reply/app/src/main/res/values/attrs.xml
@@ -24,6 +24,10 @@
     <attr name="emphasisMediumAlpha" format="float"/>
     <attr name="emphasisDisabledAlpha" format="float"/>
 
+    <attr name="motionInterpolatorPersistent" format="reference"/>
+    <attr name="motionInterpolatorIncoming" format="reference"/>
+    <attr name="motionInterpolatorOutgoing" format="reference"/>
+
     <!--Custom view themes/styles-->
     <attr name="bottomNavigationDrawerStyle" format="reference" />
     <attr name="bottomNavigationDrawerNavigationViewTheme" format="reference" />
diff --git a/Reply/app/src/main/res/values/motion.xml b/Reply/app/src/main/res/values/motion.xml
@@ -16,8 +16,8 @@
 
     <!--Motion-->
 
-    <integer name="reply_motion_default_duration">350</integer>
-    <integer name="reply_motion_short_duration">250</integer>
-    <integer name="reply_motion_micro_duration">175</integer>
+    <integer name="reply_motion_default_large">300</integer>
+    <integer name="reply_motion_duration_medium">225</integer>
+    <integer name="reply_motion_duration_small">175</integer>
 
 </resources>
diff --git a/Reply/app/src/main/res/values/themes.xml b/Reply/app/src/main/res/values/themes.xml
@@ -62,6 +62,10 @@
         <item name="emphasisMediumAlpha">0.60</item>
         <item name="emphasisDisabledAlpha">0.38</item>
 
+        <item name="motionInterpolatorPersistent">@android:interpolator/fast_out_slow_in</item>
+        <item name="motionInterpolatorIncoming">@android:interpolator/decelerate_cubic</item>
+        <item name="motionInterpolatorOutgoing">@android:interpolator/accelerate_cubic</item>
+
         <!--Styles-->
         <item name="bottomAppBarStyle">@style/Widget.MaterialComponents.BottomAppBar.PrimarySurface</item>
         <item name="bottomSheetStyle">@style/Widget.MaterialComponents.BottomSheet.Modal</item>

Original file line number	Diff line number	Diff line change
`@@ -33,7 +33,7 @@ import com.materialstudies.reply.data.Email`
`33`	`33`	`import com.materialstudies.reply.data.EmailStore`
`34`	`34`	`import com.materialstudies.reply.databinding.ComposeRecipientChipBinding`
`35`	`35`	`import com.materialstudies.reply.databinding.FragmentComposeBinding`
`36`		`-import com.materialstudies.reply.util.FastOutUltraSlowIn`
	`36`	`+import com.materialstudies.reply.util.themeInterpolator`
`37`	`37`	`import com.materialstudies.reply.util.transition.MaterialContainerTransition`
`38`	`38`	`import kotlin.LazyThreadSafetyMode.NONE`
`39`	`39`
`@@ -118,12 +118,12 @@ class ComposeFragment : Fragment() {`
`118`	`118`	`requireActivity().findViewById(R.id.fab),`
`119`	`119`	`binding.emailCardView`
`120`	`120`	`)`
`121`		`- duration = resources.getInteger(R.integer.reply_motion_default_duration).toLong()`
`122`		`- interpolator = FastOutUltraSlowIn()`
	`121`	`+ duration = resources.getInteger(R.integer.reply_motion_default_large).toLong()`
	`122`	`+ interpolator = requireContext().themeInterpolator(R.attr.motionInterpolatorPersistent)`
`123`	`123`	`}`
`124`	`124`	`returnTransition = Slide().apply {`
`125`		`- duration = resources.getInteger(R.integer.reply_motion_micro_duration).toLong()`
`126`		`- interpolator = AccelerateInterpolator()`
	`125`	`+ duration = resources.getInteger(R.integer.reply_motion_duration_medium).toLong()`
	`126`	`+ interpolator = requireContext().themeInterpolator(R.attr.motionInterpolatorOutgoing)`
`127`	`127`	`}`
`128`	`128`	`startPostponedEnterTransition()`
`129`	`129`	`}`