[Compose-ML] Add support for stateful animations

oscar-ad · oscar-ad · commit 510fab41ab30 · 2021-09-23T15:26:32.000-07:00
It should now be possible to use MotionLayout passing a MotionScene
object, and animate by just providing the desired ConstraintSet to
transition to. Similar to animating ConstraintLayout but without having
to parse new ConstraintSets.
diff --git a/constraintlayout/compose/src/main/java/androidx/constraintlayout/compose/ConstraintLayout.kt b/constraintlayout/compose/src/main/java/androidx/constraintlayout/compose/ConstraintLayout.kt
@@ -1641,6 +1641,13 @@ class JSONConstraintSet(@Language("json5") content: String,
         initialization()
     }
 
+    override fun equals(other: Any?): Boolean {
+        if (other is JSONConstraintSet) {
+            return this.getCurrentContent() == other.getCurrentContent()
+        }
+        return false
+    }
+
     // Only called by MotionLayout in MotionMeasurer
     override fun applyTo(transition: Transition, type: Int) {
         val layoutVariables = LayoutVariables()
diff --git a/constraintlayout/compose/src/main/java/androidx/constraintlayout/compose/ConstraintSetParser.kt b/constraintlayout/compose/src/main/java/androidx/constraintlayout/compose/ConstraintSetParser.kt
@@ -547,8 +547,13 @@ fun override(baseJson: CLObject, name: String, overrideValue: CLObject) {
                                 base.remove("top")
                                 base.remove("bottom")
                                 base.remove("baseline")
+                                base.remove("center")
+                                base.remove("centerHorizontally")
+                                base.remove("centerVertically")
                             }
                             "transforms" -> {
+                                base.remove("visibility")
+                                base.remove("alpha")
                                 base.remove("pivotX")
                                 base.remove("pivotY")
                                 base.remove("rotationX")
diff --git a/constraintlayout/compose/src/main/java/androidx/constraintlayout/compose/MotionLayout.kt b/constraintlayout/compose/src/main/java/androidx/constraintlayout/compose/MotionLayout.kt
@@ -20,7 +20,7 @@ import android.annotation.SuppressLint
 import android.graphics.Matrix
 import androidx.compose.animation.core.Animatable
 import androidx.compose.animation.core.AnimationSpec
-import androidx.compose.animation.core.spring
+import androidx.compose.animation.core.tween
 import androidx.compose.foundation.Canvas
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.BoxScope
@@ -41,12 +41,11 @@ import androidx.compose.ui.layout.*
 import androidx.compose.ui.semantics.semantics
 import androidx.compose.ui.unit.*
 import androidx.constraintlayout.core.motion.Motion
-import androidx.constraintlayout.core.parser.CLObject
 import androidx.constraintlayout.core.parser.CLParser
 import androidx.constraintlayout.core.parser.CLParsingException
-import androidx.constraintlayout.core.state.*
 import androidx.constraintlayout.core.state.Dimension
 import androidx.constraintlayout.core.state.Transition
+import androidx.constraintlayout.core.state.WidgetFrame
 import androidx.constraintlayout.core.widgets.Optimizer
 import kotlinx.coroutines.channels.Channel
 import org.intellij.lang.annotations.Language
@@ -67,6 +66,149 @@ inline fun MotionLayout(
     modifier: Modifier = Modifier,
     optimizationLevel: Int = Optimizer.OPTIMIZATION_STANDARD,
     crossinline content: @Composable MotionLayoutScope.() -> Unit
+) {
+    MotionLayout(
+        start = start,
+        end = end,
+        transition = transition,
+        progress = progress,
+        debug = debug,
+        informationReceiver = null,
+        modifier = modifier,
+        optimizationLevel = optimizationLevel,
+        content = content
+    )
+}
+
+/**
+ * Layout that takes a MotionScene and animates by providing a [constraintSetName] to animate to.
+ *
+ * During recomposition, MotionLayout will interpolate from whichever ConstraintSet it is currently
+ * in, to [constraintSetName].
+ *
+ * Typically the first value of [constraintSetName] should match the start ConstraintSet in the
+ * default transition, or be null.
+ *
+ * Animation is run by [animationSpec], and will only start another animation once any other ones
+ * are finished. Use [finishedAnimationListener] to know when a transition has stopped.
+ */
+@Composable
+inline fun MotionLayout(
+    motionScene: MotionScene,
+    constraintSetName: String? = null,
+    animationSpec: AnimationSpec<Float> = tween<Float>(),
+    debug: EnumSet<MotionLayoutDebugFlags> = EnumSet.of(MotionLayoutDebugFlags.NONE),
+    modifier: Modifier = Modifier,
+    optimizationLevel: Int = Optimizer.OPTIMIZATION_STANDARD,
+    noinline finishedAnimationListener: (() -> Unit)? = null,
+    crossinline content: @Composable (MotionLayoutScope.() -> Unit)
+) {
+    val needsUpdate = remember {
+        mutableStateOf(0L)
+    }
+    motionScene.setUpdateFlag(needsUpdate)
+
+    var usedDebugMode = debug
+    if (motionScene.getForcedDrawDebug() != MotionLayoutDebugFlags.UNKNOWN) {
+        usedDebugMode = EnumSet.of(motionScene.getForcedDrawDebug())
+    }
+
+    val transitionContent = remember(motionScene, needsUpdate.value) {
+        motionScene.getTransition("default")
+    }
+
+    val transition: androidx.constraintlayout.compose.Transition? =
+        transitionContent?.let { Transition(it) }
+
+    val startId = transition?.getStartConstraintSetId() ?: "start"
+    val endId = transition?.getEndConstraintSetId() ?: "end"
+
+    val startContent = remember(motionScene, needsUpdate.value) {
+        motionScene.getConstraintSet(startId) ?: motionScene.getConstraintSet(0)
+    }
+    val endContent = remember(motionScene, needsUpdate.value) {
+        motionScene.getConstraintSet(endId) ?: motionScene.getConstraintSet(1)
+    }
+
+    val targetEndContent = remember(motionScene, constraintSetName) {
+        constraintSetName?.let { motionScene.getConstraintSet(constraintSetName) }
+    }
+
+    if (startContent == null || endContent == null) {
+        return
+    }
+
+    var start: ConstraintSet by remember(motionScene) { mutableStateOf(JSONConstraintSet(content = startContent)) }
+    var end: ConstraintSet by remember(motionScene) { mutableStateOf(JSONConstraintSet(content = endContent)) }
+    val targetConstraintSet = targetEndContent?.let { JSONConstraintSet(targetEndContent) }
+
+    val progress = remember { Animatable(0f) }
+
+    var animateToEnd by remember(motionScene) { mutableStateOf(true) }
+
+    val channel = remember { Channel<ConstraintSet>(Channel.CONFLATED) }
+
+    if (targetConstraintSet != null) {
+        SideEffect {
+            channel.trySend(targetConstraintSet)
+        }
+
+        LaunchedEffect(motionScene, channel) {
+            for (constraints in channel) {
+                val newConstraintSet = channel.tryReceive().getOrNull() ?: constraints
+                val animTargetValue = if (animateToEnd) 1f else 0f
+                val currentSet = if (animateToEnd) start else end
+                if (newConstraintSet != currentSet) {
+                    if (animateToEnd) {
+                        end = newConstraintSet
+                    } else {
+                        start = newConstraintSet
+                    }
+                    progress.animateTo(animTargetValue, animationSpec)
+                    animateToEnd = !animateToEnd
+                    finishedAnimationListener?.invoke()
+                }
+            }
+        }
+    }
+
+    val lastOutsideProgress = remember { mutableStateOf(0f) }
+    val forcedProgress = motionScene.getForcedProgress()
+
+    val currentProgress =
+        if (!forcedProgress.isNaN() && lastOutsideProgress.value == progress.value) {
+            forcedProgress
+        } else {
+            motionScene.resetForcedProgress()
+            progress.value
+        }
+
+    lastOutsideProgress.value = progress.value
+
+    MotionLayout(
+        start = start,
+        end = end,
+        transition = transition,
+        progress = currentProgress,
+        debug = usedDebugMode,
+        informationReceiver = motionScene as? JSONMotionScene,
+        modifier = modifier,
+        optimizationLevel = optimizationLevel,
+        content = content
+    )
+}
+
+@Composable
+inline fun MotionLayout(
+    start: ConstraintSet,
+    end: ConstraintSet,
+    transition: androidx.constraintlayout.compose.Transition? = null,
+    progress: Float,
+    debug: EnumSet<MotionLayoutDebugFlags> = EnumSet.of(MotionLayoutDebugFlags.NONE),
+    informationReceiver: LayoutInformationReceiver? = null,
+    modifier: Modifier = Modifier,
+    optimizationLevel: Int = Optimizer.OPTIMIZATION_STANDARD,
+    crossinline content: @Composable MotionLayoutScope.() -> Unit
 ) {
     val measurer = remember { MotionMeasurer() }
     val scope = remember { MotionLayoutScope(measurer) }
@@ -83,6 +225,7 @@ inline fun MotionLayout(
             progressState,
             measurer
         )
+    measurer.addLayoutInformationReceiver(informationReceiver)
 
     val forcedScaleFactor = measurer.forcedScaleFactor
     if (!debug.contains(MotionLayoutDebugFlags.NONE) || !forcedScaleFactor.isNaN()) {
@@ -220,7 +363,6 @@ inline fun MotionLayout(
             content = { scope.content() }
         ))
     }
-
 }
 
 @Immutable
@@ -525,11 +667,13 @@ internal class MotionMeasurer : Measurer() {
         this.measureScope = measureScope
         var layoutSizeChanged = false
         if (constraints.hasFixedWidth
-            && !state.sameFixedWidth(constraints.maxWidth)) {
+            && !state.sameFixedWidth(constraints.maxWidth)
+        ) {
             layoutSizeChanged = true
         }
         if (constraints.hasFixedHeight
-            && !state.sameFixedHeight(constraints.maxHeight)) {
+            && !state.sameFixedHeight(constraints.maxHeight)
+        ) {
             layoutSizeChanged = true
         }
         if (motionProgress != progress
diff --git a/constraintlayout/core/src/main/java/androidx/constraintlayout/core/state/WidgetFrame.java b/constraintlayout/core/src/main/java/androidx/constraintlayout/core/state/WidgetFrame.java
@@ -167,6 +167,14 @@ public static void interpolate(int parentWidth, int parentHeight, WidgetFrame fr
             endAlpha = 1f;
         }
 
+        if (start.visibility == ConstraintWidget.INVISIBLE) {
+            startAlpha = 0f;
+        }
+
+        if (end.visibility == ConstraintWidget.INVISIBLE) {
+            endAlpha = 0f;
+        }
+
         if (frame.widget != null && transition.hasPositionKeyframes()) {
             Transition.KeyPosition firstPosition = transition.findPreviousPosition(frame.widget.stringId, frameNumber);
             Transition.KeyPosition lastPosition = transition.findNextPosition(frame.widget.stringId, frameNumber);
diff --git a/projects/ComposeConstraintLayout/app/src/main/java/com/example/constraintlayout/MotionComposeExamples.kt b/projects/ComposeConstraintLayout/app/src/main/java/com/example/constraintlayout/MotionComposeExamples.kt
@@ -166,7 +166,7 @@ public fun MotionExample2() {
 
     Column(Modifier.background(Color.White)) {
         MotionLayout(
-            ConstraintSet(
+            start = ConstraintSet(
                 """ {
                     background: { 
                 width: "spread",
@@ -216,7 +216,7 @@ public fun MotionExample2() {
                 }
             } """
             ),
-            ConstraintSet(
+            end = ConstraintSet(
                 """ {
                 background: { 
                 width: "spread",
@@ -256,7 +256,7 @@ public fun MotionExample2() {
                 height: 400,
                 start: ['parent', 'start', 16],
                 end: ['parent', 'end', 16],
-                top: ['description', 'bottom', 16]
+                top: ['description', 'bottom', 16],
                 },
                 play: { 
                 start: ['parent', 'end', 8],
@@ -1382,4 +1382,101 @@ fun MotionExample9() {
             )
         }
     }
+}
+
+@Preview(group = "motion10")
+@Composable
+fun MotionExample10() {
+    val states = remember {
+        listOf(
+        "csTopRight",
+        "csBottomLeft",
+        "csBottomRight",
+        "csTopLeft"
+        )
+    }
+
+    var currentState by remember {
+        mutableStateOf(-1)
+    }
+
+    Column {
+        Button(
+            onClick = {
+                currentState = if (currentState >= (states.size - 1)) {
+                    0
+                } else {
+                    currentState + 1
+                }
+        }) {
+            Text("Run")
+        }
+        MotionLayout(
+            modifier = Modifier
+                .fillMaxWidth()
+                .fillMaxHeight()
+                .background(Color.Black),
+            debug = EnumSet.of(MotionLayoutDebugFlags.SHOW_ALL),
+            motionScene = MotionScene(
+                """
+{
+                ConstraintSets: {
+                  csTopLeft: {
+                    box1: {
+                      start: ['parent', 'start', 16],
+                      top: ['parent', 'top', 16]
+                    },
+                  },
+                  csTopRight : {
+                    box1: {
+                      end: ['parent', 'end', 16],
+                      top: ['parent', 'top', 16]
+                    },
+                  },
+                  csBottomLeft : {
+                    box1: {
+                      start: ['parent', 'start', 16],
+                      bottom: ['parent', 'bottom', 16]
+                    },
+                  },
+                  csBottomRight : {
+                    box1: {
+                      end: ['parent', 'end', 16],
+                      bottom: ['parent', 'bottom', 16]
+                    },
+                  }
+                },
+                Transitions: {
+                  default: {
+                    from: 'csBottomRight',
+                    to: 'csTopLeft',
+                    pathMotionArc: 'startHorizontal',
+                    KeyFrames: {
+                      KeyPositions: [
+                        {
+                       type: 'parentRelative',
+                           target: ['box1'],
+                           frames: [50],
+                           percentX: [0.5],
+                           percentY: [0.4]
+                        }
+                      ]
+                    }
+                  }
+                }
+}
+"""
+            ),
+            constraintSetName = states.getOrNull(currentState),
+        ) {
+            Box(
+                modifier = Modifier
+                    .layoutId("box1")
+                    .height(125.dp)
+                    .width(188.dp)
+                    .clip(shape = RoundedCornerShape(12.dp))
+                    .background(Color.Green)
+            )
+        }
+    }
 }
diff --git a/projects/ComposeConstraintLayout/app/src/main/java/com/example/constraintlayout/MotionStatesExample.kt b/projects/ComposeConstraintLayout/app/src/main/java/com/example/constraintlayout/MotionStatesExample.kt
