Quick Start

update by @r1ader in 2022/04/01

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

    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

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:

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。

    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:

    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.

    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

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

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 :

{ width: '[100~200]px' } // width grows from 100px to 200px
{ transform: 'translate([0~100]px, [0~100]px)' }
// from 0，0 move to 100px，100px 
{ 
    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
{ 
    transform: 'translate([0~100]px, [0~100]px) scale([1~2])' 
}
//from 0，0 move to 100px，100px; meanwhile, double the size
{ 
    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:

{ width: '200px' } 
// The width changes from the element's current width value to 200px
{ 
    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

{ 
    width: '[100~200]px' ,
    duration: 3000
} 
// Width grows from 100px to 200px in 3 seconds

and the interpolated form of motion tweening ease

{ 
    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

ease also supports bezier mode

{ 
    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/

For more configuration items, you can check in the Api Doc

PreviousAbout r_animate.jsNextAPI Doc

Last updated