得到

Jetpack-Compose-Playground/docs/animation/crossfade.md

@@ -0,0 +1,63 @@
+<!---
+This is the API of version 1.2.0
+-->
+# Crossfade
+
+Crossfade can be used to switch between Composables with an crossfade animation.
+
+<div>
+<video height="500" align="center" controls>
+  <source src="{{ site.images }}/animation/crossfade/crossfadedemo.webm" type="video/webm" align="center">
+</video>
+</div>
+Example video of the code below. On every button click, the content of the screen will change with an animation duration of 3 seconds.
+
+```kotlin
+enum class MyColors(val color: Color) {
+    Red(Color.Red), Green(Color.Green), Blue(Color.Blue)
+}
+
+@Composable
+fun CrossfadeDemo() {
+    var currentColor by remember { mutableStateOf(MyColors.Red) }
+    Column {
+        Row {
+            MyColors.values().forEach { myColors ->
+                Button(
+                        onClick = { currentColor = myColors },
+                        Modifier.weight(1f, true)
+                                .height(48.dp)
+                                .background(myColors.color),
+                                colors = ButtonDefaults.buttonColors(backgroundColor = myColors.color)
+                ) {
+                    Text(myColors.name)
+                }
+            }
+        }
+        Crossfade(targetState = currentColor, animationSpec = tween(3000)) { selectedColor ->
+            Box(modifier = Modifier.fillMaxSize().background(selectedColor.color))
+        }
+    }
+}
+```
+
+## How does it work?
+As you can see in the video above, this demo consists of a screen with 3 buttons at the top. On a button click, the screen below will change to the selected color.
+
+```kotlin
+Crossfade(targetState = currentColor, animationSpec = tween(3000)) { selectedColor ->
+   Box(modifier = Modifier.fillMaxSize().background(selectedColor.color))
+}
+```
+
+Crossfade expects some kind of state to detect when it should recompose. In this example, this is **currentColor**, which is a state with the selected color enum. This state will be set to the **current** parameter.
+
+With the **animationSpec** parameter, you can set which animation should be used to switch between the Composables. The default parameter here is the **tween** animation. You can choose between any class that implements **AnimationSpec**.
+The **3000** in this example is the duration that the tween animation will have.
+
+The last parameter is the body of the Crossfade Composable. Here you have to create the UI that you want to display. **selectedColor** is the current value of **currentColor**. In this example i'm using a Box to display the colors.
+Everytime one of the 3 buttons is clicked, the value of currentColor will change and the Crossfade will recompose with an animation between the old and new UI.
+
+
+## See also:
+* [Full Example Code]({{ site.samplefolder }}/animation/crossfade/CrossfadeDemo.kt)

Jetpack-Compose-Playground/docs/animation/transistion.md

@@ -0,0 +1,70 @@
+# Transistion
+
+WORK IN PROGRESS
+
+# Working with Transistion
+
+<video width="320" height="240" controls>
+  <source src="{{ site.images }}/animation/transistion/rotation.mp4" type="video/webm">
+Your browser does not support the video tag.
+</video>
+
+## What will we build?
+This is might not be a spectacutlar use case for Transistion, but it should give an idea, how to use Transistion.
+This is example consist of a **Text** which will print the active value of the Transition state and a padding which will change depending on this state.
+The value of the Transistion state will change from 0 to 200 over and over again.
+
+## Create a transistion definition
+Transistion requires a TransitionDefinition, so let's build that first.
+
+```kotlin
+private val paddingTransitionDefinition = transitionDefinition {
+...
+}
+```
+
+Inside the TransitionDefinition, we have to define all possible transition states and which transition should be used between two transition states.
+In this example we want to create transition between 0 and 200, so let's create two states for that.
+
+```kotlin
+private val paddingPropKey = FloatPropKey()
+
+private val paddingTransitionDefinition = transitionDefinition {
+ state("A"){ this[paddingPropKey] = 0f }
+ state("B") { this[paddingPropKey] = 200f }
+...
+}
+```  
+
+Inside **transitionDefinition** you have to use the **state()** to define a transition state. It requires a name and a function to initialize a state.
+**paddingPropKey** is a **FloatPropKey**, it's like a state with a float value. It will be constantly updated with the latest value inside the transition.
+
+Now we have two states. One with the Name **A** and a paddingPropKey value of **0f** and one with the Name **B** and a paddingPropKey value of **200f**. Next we have to define a transistion between **A** and **B**.
+
+```kotlin
+private val paddingPropKey = FloatPropKey()
+
+private val paddingTransitionDefinition = transitionDefinition {
+ state("A"){ this[paddingPropKey] = 0f }
+ state("B") { this[paddingPropKey] = 200f }
+
+ transition("A" to "B") {
+        paddingPropKey using repeatable {
+            animation = tween {
+                duration = 1000
+                easing = FastOutLinearInEasing
+            }
+            iterations = Infinite
+        }
+    }
+}
+
+```
+
+With
+```kotlin
+ transition("A" to "B")
+```
+a transistion between state **A** and state **B** is definied. Inside the transition you have to define **how**, **how long** and **how often** the transition should happen.
+
+paddingPropKey using repeatable