@@ -31,30 +31,60 @@ To see how publishing is achieved, see the [`pages.yml` workflow](.github/workfl
3131
3232This library is all about building _ ** storyboards** _ .
3333A storyboard is analogous to a slide show in other presentation software.
34- While other software may have _ ** slides** _ , Storyboard has two different terms it uses.
35-
36- When building a storyboard, you will create a sequence of _ ** scenes** _ ,
37- and each scene may contain any number of _ ** states** _ .
38- The states of a scene is just a list of class instances, specified when creating the scene.
39- This combination of _ ** scenes** _ and _ ** states** _ is analogous to _ ** slides** _ in other presentation software.
34+ While other software may have _ ** slides** _ with _ ** advancements** _ ,
35+ Storyboard uses the terms _ ** scenes** _ and _ ** states** _ respectively.
36+ Building on the _ ** state** _ -driven nature of Compose UI,
37+ Storyboard provides a _ ** state** _ -based way to build your presentation,
38+ and requires each scene to provide a list of states.
39+ When a storyboard advances, it simply moves to the next state specified for your scene,
40+ or the first state of the next scene.
4041
4142For the purpose of rendering, the states of a scene are converted into _ ** frames** _ .
4243If a scene comes after another scene, a _ ** start** _ frame will be added as the first frame.
4344If a scene comes before another scene, an _ ** end** _ frame will be added as the last frame.
45+ Frames are used to control the transitions between scenes and states.
4446
45- For example, there is a storyboard of three scenes with one, three, and two states respectively.
46- The frames of the storyboard could be displayed as the following :
47+ For example, imagine there is a storyboard with three scenes, each with one, three, and two states respectively.
48+ The frames of this storyboard could be displayed as follows :
4749
4850``` text
49511-1, 1-End, 2-Start, 2-1, 2-2, 2-3, 2-End, 3-Start, 3-1, 3-2
5052```
5153
52- A storyboard is rendered based on the current frame, but states determine when a storyboard pauses .
54+ This sequence of frames is what controls the advancement of a storyboard.
5355Start and end frames are only used for intermediate rendering when transitioning between scenes.
5456This enables start and end animations for a scene and smooth transitions between scenes.
5557This also enables the use of scenes which do not have any states to create more complex transitions.
5658
57- ### Libraries
59+ ### Compose
60+
61+ Along with defining a list of states, [ a scene must also define a ` @Composable ` lambda] [ StoryboardBuilder ] ,
62+ which takes a [ ` SceneScope ` ] [ SceneScope ] as a receiver.
63+ The SceneScope providers a number of properties to the scene Composable,
64+ including a [ ` Transition ` ] [ Transition ] instance that defines the current and target frames.
65+ This allows animating values between the states of the scene and synchronizing with the storyboard advancement.
66+ And because of the start and end frame, scene start and end animations are also easy to achieve.
67+
68+ An [ ` AnimatedContentScope ` ] [ AnimatedContentScope ] and [ ` SharedTransitionScope ` ] [ SharedTransitionScope ] are also
69+ provided by the SceneScope.
70+ (These will eventually be context parameters)
71+ These scopes are provided for animating and sharing elements between scenes.
72+
73+ Along with the Composable lambda and states, a scene is also able to define a enter and exit transition.
74+ These transitions determine how the scene transitions into view
75+ and can be based on the current advancement direction of the storyboard.
76+ For example, these transitions can be used to create a carousel like animation between scenes.
77+
78+ [ When building a storyboard] [ Storyboard ] , a custom ` DpSize ` may be provided; otherwise the default size is used.
79+ The ` DpSize ` of the storyboard determines the _ ** constant render size** _ of all scenes.
80+ This makes it so the scenes of the storyboard automatically scale according the available space,
81+ while maintaining a constant pixel space for defining the size and spacing of elements.
82+
83+ A [ SceneDecorator] [ SceneDecorator ] may also be provided when building a storyboard.
84+ This decorator will be applied around all scenes
85+ and can be used to adjust theming, provide composition locals, or add a shared background.
86+
87+ ## Libraries
5888
5989There are two main libraries in Storyboard: Core and Easel.
6090The Core library contains the building blocks for Storyboards,
@@ -106,5 +136,17 @@ Want to see Storyboard in action?
106136* ** Kotlin + Power-Assert = Love** _ (KotlinConf 2024)_ - [ YouTube] ( https://www.youtube.com/watch?v=N8u-6d0iCiE )
107137* ** Writing Your Third Kotlin Compiler Plugin** _ (KotlinConf 2025)_ - [ _ Coming Soon!_ ] ( https://kotlinconf.com/schedule/?session=9df8d3fd-5dc8-5d72-a362-c83079285174 )
108138
109- [ // ] : # ( Links )
139+ [ // ] : # ( Storyboard Links )
140+
141+ [ SceneScope ] : /storyboard-core/src/commonMain/kotlin/dev/bnorm/storyboard/core/SceneScope.kt
142+ [ SceneDecorator ] : /storyboard-core/src/commonMain/kotlin/dev/bnorm/storyboard/core/SceneDecorator.kt
143+ [ Storyboard ] : storyboard-core/src/commonMain/kotlin/dev/bnorm/storyboard/core/Storyboard.kt
144+ [ StoryboardBuilder ] : storyboard-core/src/commonMain/kotlin/dev/bnorm/storyboard/core/StoryboardBuilder.kt
145+
146+ [ // ] : # ( Compose Links )
147+
110148[ compose ] : https://www.jetbrains.com/lp/compose-multiplatform
149+
150+ [ AnimatedContentScope ] : https://developer.android.com/reference/kotlin/androidx/compose/animation/AnimatedContentScope
151+ [ SharedTransitionScope ] : https://developer.android.com/reference/kotlin/androidx/compose/animation/SharedTransitionScope
152+ [ Transition ] : https://developer.android.com/reference/kotlin/androidx/compose/animation/core/Transition
0 commit comments