Add demo of integration with HorizontalPage

demoProjects/ExamplesComposeMotionLayout/app/build.gradle

@@ -37,7 +37,7 @@ android {
         compose true
     }
     composeOptions {
-        kotlinCompilerExtensionVersion '1.2.0-beta01'
+        kotlinCompilerExtensionVersion '1.2.0'
     }
     packagingOptions {
         resources {
@@ -47,12 +47,13 @@ android {
 }
 
 dependencies {
-    implementation 'androidx.constraintlayout:constraintlayout-compose:1.1.0-alpha04'
+    implementation 'androidx.constraintlayout:constraintlayout-compose:1.1.0-alpha07'
+    implementation 'com.google.accompanist:accompanist-pager:0.29.1-alpha'
 
-    implementation 'androidx.core:core-ktx:1.7.0'
-    implementation 'androidx.lifecycle:lifecycle-runtime-ktx:2.3.1'
-    implementation 'androidx.activity:activity-compose:1.3.1'
+    implementation 'androidx.core:core-ktx:1.9.0'
+    implementation 'androidx.lifecycle:lifecycle-runtime-ktx:2.5.1'
+    implementation 'androidx.activity:activity-compose:1.6.1'
     implementation "androidx.compose.ui:ui:$compose_ui_version"
     implementation "androidx.compose.ui:ui-tooling-preview:$compose_ui_version"
-    implementation 'androidx.compose.material:material:1.2.0-beta01'
+    implementation 'androidx.compose.material:material:1.4.0-beta01'
 }

demoProjects/ExamplesComposeMotionLayout/app/src/main/java/com/example/examplescomposemotionlayout/CollapsingToolbarDsl.kt

@@ -74,7 +74,7 @@ fun ToolBarExampleDsl() {
                 start.linkTo(image.start, 16.dp)
             }
         }
-        transition("default", start1, end1) {}
+        transition(start1, end1,"default") {}
     }
 
     Column(

demoProjects/ExamplesComposeMotionLayout/app/src/main/java/com/example/examplescomposemotionlayout/CollapsingToolbarLazyDsl.kt

@@ -83,7 +83,7 @@ fun ToolBarLazyExampleDsl() {
                 start.linkTo(image.start, 16.dp)
             }
         }
-        transition("default", start1, end1) {}
+        transition( start1, end1, "default") {}
     }
 
     val maxPx = with(LocalDensity.current) { big.roundToPx().toFloat() }

demoProjects/ExamplesComposeMotionLayout/app/src/main/java/com/example/examplescomposemotionlayout/DynamicGraph.kt

@@ -84,7 +84,7 @@ fun DynamicGraph(values: List<Float> = listOf<Float>(12f, 32f, 21f, 32f, 2f), ma
                 }
             }
         }
-        transition("default", start1, end1) {
+        transition(start1, end1,"default") {
         }
     }
     var animateToEnd by remember { mutableStateOf(true) }

demoProjects/ExamplesComposeMotionLayout/app/src/main/java/com/example/examplescomposemotionlayout/MainActivity.kt

@@ -26,7 +26,8 @@ class MainActivity : ComponentActivity() {
         get("MotionInLazyColumn JSON") { MotionInLazyColumn() },
         get("DynamicGraph") { ManyGraphs() },
         get("ReactionSelector") { ReactionSelector() },
-        )
+        get("MotionPager") { MotionPager() }
+    )
 
     override fun onCreate(savedInstanceState: Bundle?) {
         super.onCreate(savedInstanceState)
@@ -75,20 +76,22 @@ fun ComposableMenu(map: List<ComposeFunc>, act: (act: ComposeFunc) -> Unit) {
             .fillMaxWidth()
             .padding(10.dp)
     ) {
-        for (i in 0..(map.size-1)/2) {
-            val cFunc1 = map[i*2]
-            val cFunc2 = if ((i*2+1 < map.size)) map[i*2+1] else null
-            Row(modifier = Modifier.fillMaxWidth(),
-                horizontalArrangement = Arrangement.SpaceBetween) {
+        for (i in 0..(map.size - 1) / 2) {
+            val cFunc1 = map[i * 2]
+            val cFunc2 = if ((i * 2 + 1 < map.size)) map[i * 2 + 1] else null
+            Row(
+                modifier = Modifier.fillMaxWidth(),
+                horizontalArrangement = Arrangement.SpaceBetween
+            ) {
                 Button(onClick = { act(cFunc1) }) {
                     Text(cFunc1.toString(), modifier = Modifier.padding(2.dp))
                 }
-           if (cFunc2 != null) {
-               Button(onClick = { act(cFunc2) }) {
-                   val s = cFunc2.toString().substring(cFunc2.toString().indexOf(' ')+1)
-                   Text(s, modifier = Modifier.padding(2.dp))
-               }
-           }
+                if (cFunc2 != null) {
+                    Button(onClick = { act(cFunc2) }) {
+                        val s = cFunc2.toString().substring(cFunc2.toString().indexOf(' ') + 1)
+                        Text(s, modifier = Modifier.padding(2.dp))
+                    }
+                }
             }
         }
 

demoProjects/ExamplesComposeMotionLayout/app/src/main/java/com/example/examplescomposemotionlayout/MotionInLazyColumnDsl.kt

@@ -72,7 +72,7 @@ fun MotionInLazyColumnDsl() {
                 start.linkTo(parent.start, 16.dp)
             }
         }
-        transition("default", start1, end1) {}
+        transition( start1, end1,"default") {}
     }
 
     val model = remember { BooleanArray(100) }

demoProjects/ExamplesComposeMotionLayout/app/src/main/java/com/example/examplescomposemotionlayout/MotionPager.kt

@@ -0,0 +1,104 @@
+package com.example.examplescomposemotionlayout
+
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.*
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material.Text
+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.layout.layoutId
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import androidx.constraintlayout.compose.Dimension
+import androidx.constraintlayout.compose.ExperimentalMotionApi
+import androidx.constraintlayout.compose.MotionLayout
+import androidx.constraintlayout.compose.MotionScene
+import com.google.accompanist.pager.ExperimentalPagerApi
+import com.google.accompanist.pager.HorizontalPager
+import com.google.accompanist.pager.calculateCurrentOffsetForPage
+import kotlin.math.abs
+import kotlin.math.absoluteValue
+import kotlin.random.Random
+
+
+/**
+ * A demo of using MotionLayout in a com.google.accompanist.pager.HorizontalPager
+ */
+
+@OptIn(ExperimentalPagerApi::class)
+@Preview(group = "scroll", device = "spec:shape=Normal,width=480,height=800,unit=dp,dpi=440")
+@Composable
+fun MotionPager() {
+    val rand = Random
+    val count = 100
+    val graphs = mutableListOf<Color>()
+    for (i in 0..count) {
+        graphs.add(Color.hsv((i * 142f) % 360, 0.5f, 0.6f))
+    }
+
+    val pagerState = com.google.accompanist.pager.rememberPagerState()
+
+    HorizontalPager(count = graphs.size, state = pagerState) { page ->
+        // Our page content
+        val pageOffset = calculateCurrentOffsetForPage(page).absoluteValue
+        DynamicPages(graphs[page], pagerProgress = pageOffset)
+
+    }
+}
+
+@OptIn(ExperimentalMotionApi::class)
+@Preview(group = "scroll", device = "spec:shape=Normal,width=480,height=800,unit=dp,dpi=440")
+@Composable
+fun DynamicPages(
+    colorValue: Color = Color.Green,
+    max: Int = 100,
+    pagerProgress: Float = 1f
+) {
+
+    val boxId = "box"
+    var scene = MotionScene() {
+        val box = createRefFor(boxId)
+        val start1 = constraintSet {
+            constrain(box) {
+                width = Dimension.percent(.2f)
+                height = Dimension.percent(.2f)
+                rotationY = 45f
+                centerTo(parent)
+            }
+        }
+
+        val end1 = constraintSet {
+
+            constrain(box) {
+                width = Dimension.percent(.5f)
+                height = Dimension.percent(.5f)
+
+                centerTo(parent)
+            }
+
+        }
+        transition(start1, end1, "default") {
+        }
+    }
+    MotionLayout(
+        modifier = Modifier
+            .background(Color(0xFF221010))
+            .fillMaxWidth()
+            .height(300.dp)
+            .padding(1.dp),
+        motionScene = scene,
+        progress = abs(1 - pagerProgress)
+    ) {
+
+        Box(
+            modifier = Modifier
+                .layoutId(boxId)
+                .clip(RoundedCornerShape(20.dp))
+                .background(colorValue)
+        ) {
+            Text(text = "      $pagerProgress")
+        }
+    }
+}

demoProjects/ExamplesComposeMotionLayout/app/src/main/java/com/example/examplescomposemotionlayout/ReactionSelecor.kt

@@ -67,7 +67,7 @@ fun ReactionSelector() {
             }
         }
         ends.mapIndexed { index, end ->
-            transition("transition$index", start1, end) {
+            transition(start1, end,"transition$index") {
             }
         }
     }

demoProjects/ExamplesComposeMotionLayout/build.gradle

@@ -4,7 +4,7 @@ buildscript {
     }
 }// Top-level build file where you can add configuration options common to all sub-projects/modules.
 plugins {
-    id 'com.android.application' version '7.4.0-alpha09' apply false
-    id 'com.android.library' version '7.4.0-alpha09' apply false
-    id 'org.jetbrains.kotlin.android' version '1.6.21' apply false
+    id 'com.android.application' version '7.4.1' apply false
+    id 'com.android.library' version '7.4.1' apply false
+    id 'org.jetbrains.kotlin.android' version '1.7.0' apply false
 }