Skip to content

Commit 4afdb5b

Browse files
committed
README improvements
* Compose scene states to slide advancements in other presentation software. While these are similar in concept, states have a lot more power. Where you might need multiple slides in other presentation software, something similar could be created with a single scene and a complex state class in Storyboard. * Add notes about various Compose details and how Storyboard works from that perspective. In particular, mention that a Transition is what synchronizes all the animations between scene frames.
1 parent d6d5bf0 commit 4afdb5b

1 file changed

Lines changed: 53 additions & 11 deletions

File tree

README.md

Lines changed: 53 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -31,30 +31,60 @@ To see how publishing is achieved, see the [`pages.yml` workflow](.github/workfl
3131

3232
This library is all about building _**storyboards**_.
3333
A 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

4142
For the purpose of rendering, the states of a scene are converted into _**frames**_.
4243
If a scene comes after another scene, a _**start**_ frame will be added as the first frame.
4344
If 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
4951
1-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.
5355
Start and end frames are only used for intermediate rendering when transitioning between scenes.
5456
This enables start and end animations for a scene and smooth transitions between scenes.
5557
This 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

5989
There are two main libraries in Storyboard: Core and Easel.
6090
The 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

Comments
 (0)