> For the complete documentation index, see [llms.txt](https://r1ader.gitbook.io/r_animate/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://r1ader.gitbook.io/r_animate/get_start.md).
# Quick Start
## Introduction
**`r_animate.js`** helps us producing animation with functional programming
Most of methods in **`r_animate.js`** ，has the form like **`Things`**.**`do`**(**`something`**)
Take the fade-out animation as an example：
if **`element`** is the subject of the animation , then ths code should be
```javascript
import { r, act } from 'r_animate'
const element = document.getElementById('element_id')
r(element).r_animate(act.OUT.BLUR) // key code
```
Let's focus on the last line of code，
There are three subjects **`element`**, **`r_animate`** , **`act.OUT.BLU`**
They correspond to **`Things`**，**`do`** 和 **`something`**
In the following, these three subjects will be explained separately
* [r(element) -> Thing](#r-element-greater-than-thing)
* [r\_animate -> do](#r_animate-greater-than-do)
* [act.OUT.BLUR -> something](#r_animate-greater-than-do)
## r(element) -> Thing
For **`r_animate.js`** ， only the registered DOM **`Element`** Object, can make animation。
DOM **`Element`** is the Objects we get from
* `doument.getElementById` in browser
* `this.$refs` in vue
* ...
But what is registered ?
> Please imagine that on a movie set, there are many people: actors, directors, assistants, etc., but only the actors can perform.
So correspondingly, an ordinary **`Element`** object also needs to be registered as an **`Actor`** object to start the animation.
To register an **`Element`** , we us **`r`** to wrap it:
```javascript
import { r } from 'r_animate'
const element = document.getElementById('element_id')
r(element)
// then doing something
.r_animate(...)
```
After register, you can call the **`.r_animate(...)`** to start the animation.
About **`r_animate`** ，continue to view 👇
## r\_animate -> do
**`r_animate`** is our most common method。
```javascript
element.r_animate(something)
```
The above code will make **`element`** perform **`something`** animation
> Notice：The details of **`something`** will be explained in detail in the third part. Currently, it can be directly understood as an animation such as zooming in and zooming out.
With functional programming, we can call **`r_animate`** for several times like this:
```javascript
element.r_animate(something_1).r_animate(something_2)
```
The above code will make **`element`** perform **`something_2`** animation after **`something_1`** is finished.
So it can go on and go on.
```javascript
element.r_animate(something_1)
.r_animate(something_2)
.r_animate(something_3)
.r_animate(something_4)
.r_animate(something_5)
.r_animate(something_6)
// ...
```
Take the fade-in and fade-out animation as an example, if we need such an animation：
The opacity of the ball first changes to 0 and then back to 1
Then the code is like this
```javascript
r(ball).r_animate(act.OUT.OPACITY)
.r_animate(act.IN.OPACITY);
```
> check and run the code in stackblitz
About the parameter accepted by the **`r_animate`** , continue to view. 👇
## act.OUT.OPACITY -> something
**`act.OUT.OPACITY`** is a parameter accepted by **`r_animate`**
In the **`act`** library, many animations are predefined for developers to call directly.
like
* act.OUT.OPACITY
* act.OUT.BLUR
* act.IN.SCROLL\_DOWN
* act.EMPHASIZE.SHAKE\_X
* ...
Click to see more [predefined animations](https://r1ader.github.io/Doc/)
Of course, most cases require custom animations.
So let's take the real structure of **`act.OUT.OPACITY`** as an example to see how to customize the animation.
```
console.log(act.OUT.OPACITY)
// { opacity: '[1~0]' }
```
Yes, it's actually that simple.
```
{
act_key: act_value
}
```
This is the basic structure of an act.
act\_key is the css property value that needs to be changed, such as **opacity**, **width**, **top**, etc.
act\_value is a string composed of the initial value start and the end value end in the form of
> **`[`** **`start`** **`~`** **`end`** **`]`**
> Notice: start and end can only be numbers.
>
> px, em, deg and other units need to be placed after brackets **`]`**
Here are some examples of **`act`** :
```javascript
{ width: '[100~200]px' } // width grows from 100px to 200px
```
```javascript
{ transform: 'translate([0~100]px, [0~100]px)' }
// from 0，0 move to 100px，100px
```
```javascript
{
width: '[100~200]px',
transform: 'translate([0~100]px, [0~100]px)'
}
// from 0，0 move to 100px，100px; meanwhile, width grow from 100px to 200px
```
```javascript
{
transform: 'translate([0~100]px, [0~100]px) scale([1~2])'
}
//from 0，0 move to 100px，100px; meanwhile, double the size
```
```javascript
{
transform: 'translate([0~100]px, [0~100]px) scale([1~2]) rotateZ([0~90]deg)'
}
// from 0，0 move to 100px，100px;
// meanwhile, double the size and rotate 90 degrees
```
Of course, if you don't need to consider the initial value, act\_value also supports a more concise syntas:
```javascript
{ width: '200px' }
// The width changes from the element's current width value to 200px
```
```javascript
{
transform: 'translate(100px, 100px)'
} // element moves from the current position to 100px, 100px
```
It helps a lot when you are not certain about the start value of the animation.
Beside,
You may also need to configure the **`duration`** of the animation
```javascript
{
width: '[100~200]px' ,
duration: 3000
}
// Width grows from 100px to 200px in 3 seconds
```
and the interpolated form of motion tweening **`ease`**
```javascript
{
width: '[100~200]px' ,
duration: 3000,
ease: 'easeOutExpo'
}
// Width grows from 100px to 200px in 3 seconds
// first fast then slow
```
> About ease function ，check [https://easings.net](https://easings.net)
**`ease`** also supports bezier mode
```javascript
{
width: '[100~200]px' ,
duration: 3000,
ease: 'cubic-bezier(.09,.77,.89,.3)'
}
// Width grows from 100px to 200px in 3 seconds
// Faster, slower, faster
```
> about cubic-bezier，check [https://cubic-bezier.com/](https://cubic-bezier.com)
For more configuration items, you can check in the [Api Doc](/r_animate/api_doc.md#pei-zhi-shu-xing)