This commit is contained in:
Will McGugan
2022-10-07 17:20:26 +01:00
parent f7089c861f
commit 66a4e08955
3 changed files with 10 additions and 6 deletions

View File

@@ -1,11 +1,11 @@
# Animation # Animation
Ths chapter discusses how to use Textual's animation system. Ths chapter discusses how to use Textual's animation system to create visual effects such as movement, blending, and fading.
## Animating styles ## Animating styles
Textual's animator can change an attribute from one value to another in fixed increments over a period of time. You can apply this to [styles](styles.md) such `offset` to move widgets around the screen, and `opacity` to create fading effects. Textual's animator can change an attribute from one value to another in fixed increments over a period of time. You can apply animations to [styles](styles.md) such `offset` to move widgets around the screen, and `opacity` to create fading effects.
Apps and widgets both have an [animate][textual.app.App.animate] method which will animate properties on those objects. Additionally, `styles` objects have an identical `animate` method which will animate styles. Apps and widgets both have an [animate][textual.app.App.animate] method which will animate properties on those objects. Additionally, `styles` objects have an identical `animate` method which will animate styles.
@@ -55,7 +55,14 @@ For instance, if you animate a value at 0 to 10 with a speed of 2, it will compl
The easing function determines the journey a value takes on its way to the target value. The easing function determines the journey a value takes on its way to the target value.
It could move at a constant pace, or it might start off slow then accelerate towards its final value. It could move at a constant pace, or it might start off slow then accelerate towards its final value.
Textual supports a number of [easing functions](https://easings.net/). Run the following from the command prompt to preview them. Textual supports a number of [easing functions](https://easings.net/).
<div class="excalidraw">
--8<-- "docs/images/animation/animation.excalidraw.svg"
</div>
Run the following from the command prompt to preview them.
```bash ```bash
textual easing textual easing

View File

@@ -6,8 +6,6 @@
See [getting started](../getting_started.md#installation) for details. See [getting started](../getting_started.md#installation) for details.
Textual comes with a command line application of the same name. The `textual` command is a super useful tool that will help you to build apps. Textual comes with a command line application of the same name. The `textual` command is a super useful tool that will help you to build apps.
Take a moment to look through the available sub-commands. There will be even more helpful tools here in the future. Take a moment to look through the available sub-commands. There will be even more helpful tools here in the future.

View File

@@ -2,7 +2,6 @@
In this chapter will explore how you can apply styles to your application to create beautiful user interfaces. In this chapter will explore how you can apply styles to your application to create beautiful user interfaces.
## Styles object ## Styles object
Every Textual widget class provides a `styles` object which contains a number of attributes. These attributes tell Textual how the widget should be displayed. Setting any of these attributes will update the screen accordingly. Every Textual widget class provides a `styles` object which contains a number of attributes. These attributes tell Textual how the widget should be displayed. Setting any of these attributes will update the screen accordingly.