Add a MotionLayout that animates between changing constraint sets (#359)

Author: bentrengrove

constraintlayout/compose/src/main/java/androidx/constraintlayout/compose/MotionLayout.kt

@@ -18,6 +18,9 @@ package androidx.constraintlayout.compose
 
 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.foundation.Canvas
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.BoxScope
@@ -42,9 +45,53 @@ import androidx.constraintlayout.core.state.*
 import androidx.constraintlayout.core.state.Dimension
 import androidx.constraintlayout.core.state.Transition
 import androidx.constraintlayout.core.widgets.Optimizer
+import kotlinx.coroutines.channels.Channel
 import org.intellij.lang.annotations.Language
 import java.util.*
 
+private val defaultAnimation = spring<Float>()
+/**
+ * Layout that interpolate its children layout given a set of constraints and
+ * animates any changes to those constraints
+ */
+@Composable
+fun MotionLayout(
+    constraintSet: ConstraintSet,
+    modifier: Modifier = Modifier,
+    animationSpec: AnimationSpec<Float> = defaultAnimation,
+    finishedListener: (() -> Unit)? = null,
+    content: @Composable MotionLayoutScope.() -> Unit
+) {
+    var currentConstraints by remember { mutableStateOf(constraintSet) }
+    val progress = remember { Animatable(0.0f) }
+    val channel = remember { Channel<ConstraintSet>(Channel.CONFLATED) }
+
+    SideEffect {
+        channel.trySend(constraintSet)
+    }
+
+    LaunchedEffect(channel) {
+        for (constraints in channel) {
+            val newConstraints = channel.tryReceive().getOrNull() ?: constraints
+            if (newConstraints != currentConstraints) {
+                progress.snapTo(0f)
+                progress.animateTo(1f, animationSpec)
+
+                currentConstraints = newConstraints
+                finishedListener?.invoke()
+            }
+        }
+
+    }
+
+    MotionLayout(
+        start = currentConstraints,
+        end = constraintSet,
+        progress = progress.value,
+        modifier = modifier,
+        content = content)
+}
+
 /**
  * Layout that interpolate its children layout given two sets of constraint and
  * a progress (from 0 to 1)

projects/ComposeConstraintLayout/app/src/main/java/com/example/constraintlayout/MotionComposeExamples.kt

@@ -6,7 +6,6 @@ import androidx.compose.foundation.background
 import androidx.compose.foundation.border
 import androidx.compose.foundation.clickable
 import androidx.compose.foundation.gestures.Orientation
-import androidx.compose.foundation.gestures.detectDragGestures
 import androidx.compose.foundation.layout.*
 import androidx.compose.foundation.shape.CircleShape
 import androidx.compose.foundation.shape.RoundedCornerShape
@@ -19,10 +18,8 @@ import androidx.compose.runtime.*
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.clip
 import androidx.compose.ui.graphics.Color
-import androidx.compose.ui.input.pointer.pointerInput
 import androidx.compose.ui.layout.layoutId
 import androidx.compose.ui.layout.onSizeChanged
-import androidx.compose.ui.platform.LocalDensity
 import androidx.compose.ui.text.style.TextAlign
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
@@ -34,13 +31,8 @@ import java.util.*
 @Composable
 public fun MotionExample1() {
     var animateToEnd by remember { mutableStateOf(false) }
-    val progress by animateFloatAsState(
-        targetValue = if (animateToEnd) 1f else 0f,
-        animationSpec = tween(1000)
-    )
 
-
-    var baseConstraintSetStart = """
+    val baseConstraintSetStart = """
             {
                 Variables: {
                   angle: { start: 0},
@@ -59,7 +51,7 @@ public fun MotionExample1() {
             }
         """
 
-    var baseConstraintSetEnd = """
+    val baseConstraintSetEnd = """
             {
                 Variables: {
                   angle: { from: 0, to: 10 },
@@ -78,17 +70,16 @@ public fun MotionExample1() {
             }
         """
 
-    var cs1 = ConstraintSet(baseConstraintSetStart)
-    var cs2 = ConstraintSet(baseConstraintSetEnd)
-
+    val cs1 = ConstraintSet(baseConstraintSetStart)
+    val cs2 = ConstraintSet(baseConstraintSetEnd)
 
+    val constraints = if (animateToEnd) cs2 else cs1
     Column {
         Button(onClick = { animateToEnd = !animateToEnd }) {
             Text(text = "Run")
         }
         MotionLayout(
-            cs1, cs2,
-            progress = progress,
+            constraints,
             modifier = Modifier
                 .fillMaxSize()
                 .background(Color.White)