Example code for implementing timeline and animation effects using JavaScript (front-end componentization)

In the previous article "Implementing the Carousel Component with JSX", we implemented a "basic" carousel component. Why do we call it "foundation"? Because it seems to be able to meet the functions of our carousel component, but it still has many defects that we have not perfected.

Although we have implemented two functions in it, one is automatic carousel, and the other is gesture dragging. But in fact, it is still far from being truly usable.

First of all, our automatic carousel and dragging cannot be connected seamlessly, that is to say, after we finish dragging, our carousel should continue to rotate automatically. We have not yet achieved this. Our dragging itself also has some problems with details. For example, it currently only supports mouse dragging events and does not support touch screen dragging. This is also a problem we must face during web page development.

Second, our animation is implemented using CSS Animation , which does not have any customization or corresponding changes.

So let's implement our animation library together, but before implementing the animation library, we need to have a timeline library in the animation library. In this article, we will first look at how to implement a timeline class and a basic animation class to use this timeline.

Code cleaning

First of all, we found that the code of the Carousel component we wrote before is already very complicated, so we need to encapsulate it. Here we put it into a separate JavaScript file.

In the project root directory, create a carousel.js , and then move all the carousel component-related codes in our main.js to carousel.js.

In carousel.js, we just need to import Component and then export our Carousel class. The code structure is as follows:

import { Component } from './framework.js';

export class Carousel extends Component {/** Code inside Carousel*/}

Finally, we can re-import the Carousel component in main.js.

import { Component, createElement } from './framework.js';
import { Carousel } from './carousel.js';

let gallery = [
 'https://source.unsplash.com/Y8lCoTRgHPE/1600x900',
 'https://source.unsplash.com/v7daTKlZzaw/1600x900',
 'https://source.unsplash.com/DlkF4-dbCOU/1600x900',
 'https://source.unsplash.com/8SQ6xjkxkCo/1600x900',
];

let a = <Carousel src={gallery} />;

// document.body.appendChild(a);
a.mountTo(document.body);

After organizing our code, we can start writing our timeline library. This timeline is part of our animation library, so we put it in the JavaScript file of our animation library: animation.js .

We need to use this timeline to implement our subsequent animation library, and there is a very key concept in animation, which is " frame "

The most basic animation capability is to execute an event per frame.

"Frames" in JavaScript

Because we need "frames" to realize our animation, we need to first understand several frame processing solutions in JavaScript.

The highest frequency of animation that the human eye can recognize is 60 frames .

Some students may have seen the movies directed by Ang Lee. For example, "Billy Lynn's Long Halftime Walk" is the world's first movie shot and played at 120 frames.

Also because the frame rate has doubled, many places will feel very smooth. But generally speaking, our games, including our monitors, all support 60 frames. Although we may see 70 or 80 frames in the monitor settings, general software will align it with 60 frames.

If we need 60 frames in 1000 milliseconds (one second), how many milliseconds is one frame? That is 1000 / 60 = 16.666 1000 / 60 = 16.666 1000/60=16.666, so 16 milliseconds is roughly the time for one frame.

This is why we usually use 16 milliseconds as the length of a frame.

How to implement "frame"

Next, let's analyze what methods can be used to implement "frames" in JavaScript.

1. setInterval

The first one is setInterval , which we actually used when writing the carousel. To make a logic execute in every frame, it is like this:

setInterval(() => {/** What happens in one frame*/}, 16)

The time interval set here is 16 milliseconds, the length of one frame.

2. setTimeout

We can also use setTimeout to repeatedly process events in one frame. But because setTimeout is only executed once. So we need to give it a function name so that we can call it repeatedly later.

Generally, this kind of setTimeout used as a frame in the animation is named tick . Because tick in English is the sound made when the second hand of our clock moves one second. This sound is also used as a word to express one frame/one second.

The way we use it is to define a tick function and let it execute a logic/event. Then use setTimeout to add a delay of 16 milliseconds before executing itself again.

let tick = () => {
	/** Our logic/events*/
 setTimout(tick, 16);
}

3. requestAnimationFrame

Finally modern browsers support a requrestAnimationFrame (also called RAF). This is commonly used when writing animations, and it does not require defining the duration of a frame.

When we request the browser to execute the next frame, the callback function passed into RAF will be executed. And the execution time of this function is related to the frame rate of the browser.

Therefore, if we want to perform some browser frame rate reduction or frequency reduction operations, then RAF can be reduced along with the browsing frame rate.

It is also very simple to use:

let tick = () => {
	/** Our logic/events*/
 setTimout(tick, 16);
}

Therefore, these three solutions are generally the most commonly used. If most of our users use modern browsers, requestAnimationFrame is recommended.

"Why not use setInterval?" Because setInterval is relatively uncontrollable, will the browser execute it according to the 16 milliseconds we set? It’s hard to say.

Another thing is that if our tick is not written well, setInterval may be backlogged. Because it is executed in a fixed 16 millisecond loop, the code of the second interval will enter the interval queue regardless of whether the code in the previous interval has been executed. This also depends on the underlying implementation of the browser. Each browser may choose a different strategy.

Because the animation library we implement here does not need to consider the compatibility of old browsers. We choose to use requestAnimationFrame here.

In the following timeline library, we will use requestAnimationFrame to perform a self-repeating operation.

Here we should also mention a cancelAnimationFrame corresponding to requestAnimationFrame. If we declare a variable to store requestAnimationFrame, we can pass this variable to cancelAnimationFrame to stop the animation.

let tick = () => {
	let handler = requestAnimationFrame(tick);
 cancelAnimationFrame(handler);
}

In this way we can avoid some waste of resources.

Implementing the Timeline

As we mentioned at the beginning, when making animation, we need to package the tick into a Timeline .

Next, let's implement this Timeline class together. Normally, a Timeline only needs to be start , and there is no stop state. Because a timeline will definitely play to the end, there is no such thing as stopping in the middle.

However, it has a combination of pause and resume . This group of states is also a very important function in Timeline. For example, if we write a lot of animations, we need to put them all into the same animation Timeline for execution. During the execution process, I can pause and resume playback of all these animations.

Another thing is the rate (playback rate), but this is not available for all timelines. rate has two methods, one is set and the other is get . Because the playback rate has a multiple, we can fast forward or slow down the animation.

When designing this animation library, there is also a very important concept called reset . This will clean up the entire timeline so that we can reuse some timelines.

The set and get rates implemented in this tutorial will not be implemented because this is a more advanced timeline function. If we want to do this, we need to learn a lot of relevant knowledge. But pause and resume are crucial to our carousel, so we must implement them here.

Having said so much, let’s get started! ~

Implementing the start function

In our start method, there will be a process to start tick . Here we will choose to make this tick a private method (hide it). Otherwise, anyone can call this tick, which can easily destroy the entire Timeline class state system by external users.

So how can we hide the tick perfectly? We will declare a constant called TICK in the global scope of the animation.js file. And use Symbol to create a tick. In this way, except for being able to obtain our tick in animation.js, the tick Symbol cannot be obtained anywhere else.

Similarly, requestAnimationFrame in tick can also create a global variable TICK_HANDLER to store it. This variable will also be wrapped in a Symbol so that it can only be used in this file.

For those who are not very familiar with Symbol, we can actually understand it as a kind of "special character". Even if we call both keys passed into the Symbol 'tick', the two values ​​created will be different. This is a feature of Symbol.

In fact, we have also talked about and used Symbol in detail in our previous article "Front-end Advanced". For example, we have used Symbol to represent the EOF (End Of File) file end symbol. Therefore, being a key to an object is not its only usage. The unique feature of Symbol is one of the meanings of its existence.

With these two constants, we can initialize the tick in the constructor of the Timeline class.

After initializing Tick, we can directly call the global TICK in the start function. This way, the time in our Timeline starts running at a playback rate of 60 frames.

The final code is as follows:

const TICK = Symbol('tick');
const TICK_HANDLER = Symbol('tick-handler');

export class Timeline {
 constructor() {
 this[TICK] = () => {
 console.log('tick');
 requestAnimationFrame(this[TICK]);
 };
 }
 start() {
 this[TICK]();
 }
 pause() {}
 resume() {}
 reset() {}
}

After completing this part, we can introduce this Timeline class into our main.js to try it out.

import { Timeline } from './animation.js';

let tl = new Timeline();

tl.start(); 

Build our code and run it in the browser. You can see in the console that our tick is running normally. This shows that the current logic of our Timeline is written correctly.

So far, we have implemented a very basic timeline operation. Next, let's implement a simple Animation class to test our timeline.

Implementing the Animation Class

Next we add an animation to Tick and execute it.

The timeline we made will eventually be used in the animation of our Carousel. The animation on the carousel is called "attribute animation" .

Because we are changing a property of an object from one value to another value.

In contrast to attribute animation, there is frame animation, which means that one picture is displayed every second. When it comes to frame animation, we should all know the animations of Mr. Hayao Miyazaki, such as the classic "My Neighbor Totoro", "Castle in the Sky" and so on. These animations are all drawn by Mr. Hayao Miyazaki one picture at a time, and then one picture is played per frame. In a fast playback process, we can see the people and objects in the pictures moving. There were animations even earlier than the anime era, which is what our ancients called the zoetrope.

The animations mentioned above are not done through attributes. But most of what we do in the browser are attribute animations. Each animation has an initial property value and an ending property value.

After understanding the theory of animation, we can start to implement the logic of this part. First of all, the logic of our Animation is relatively independent from Timeline, so we can encapsulate Animation into a separate class. ( We will further enhance the functionality of the animation library in our later articles on front-end componentization. )

export class Animation {
 constructor() {}
}

First, create an Animation. We need the following parameters:

• object : the element object to be animated
• property : The property to be animated
• startValue : animation starting value
• endValue : animation end value
• duration : animation duration
• timingFunction : animation and time curve

What we need to note here is that the property passed in generally comes with a unit, such as: px (pixel). Because our startValue and endValue must be a value in JavaScript. So if we want a complete Animation, we need to pass in more parameters.

But here we will not add it later, let's implement a simple Animation first.

When initializing our Animation object, we need to store all the passed in parameters into the properties of this object, so in the constructor we have to copy all the passed in parameters exactly as they are.

export class Animation {
 constructor(object, property, startValue, endValue, duration, timingFunction) {
 this.object = object;
 this.property = property;
 this.startValue = startValue;
 this.endValue = endValue;
 this.duration = duration;
 this.timingFunction = timingFunction;
 }
}

Next we need a function to execute the animation. We can call it exec or go. Here we will use the word run . Personally, I think it is more appropriate for the function.

This function needs to receive a time parameter, which is a virtual time. If we use real time, we don't even need to make a Timeline.

With this time, we can calculate how much the current animation property should change based on this time. To calculate the change of this property, we first need to know the total change range from the initial value to the final value of the animation.

Formula:變化區間(range) = 終止值(endValue) - 初始值(startValue)

After getting變換區間, we can calculate how much the animation should change in each frame. The formula is as follows:

變化值= 變化區間值(range) * 時間(time) / 動畫時長(duration)

The change value obtained here will calculate a progression (progress %) based on the current execution time and the total duration of the animation, and then use this progress percentage and the change range to calculate the difference between our initial value and the current progress value. This difference is our變化值.

This change value is equivalent to the linear animation curve in our CSS animation. This animation curve is a straight line. Here we use this to implement our Animation class first, without dealing with our timingFunction . We will deal with this dynamic animation curve later.

With this change value, we can use startValue (initial value) + change value to get the attribute value corresponding to the current progress. This is how our code works:

run(time) {
 let range = this.endValue - this.startValue;
 this.object[this.property] = this.startValue + (range * time) / this.duration;
}

This way the Animation can work. Next, we add this Animation to the Timeline's animation queue so that it can be executed in the queue.

As we mentioned above, the time received by the run method in this Animation is a virtual time. So when calling the run method in Timeline, we need to pass a virtual time to Animation so that our animation can work.

Okay, here we want to add animation to the timeline, first we need to have an animations queue. For this we will directly generate an animations Set.

This is the same as the storage method in other Timelines. We create a global ANIMATIONS constant to store it, and its value is wrapped in a Symbol. This can prevent the queue from being accidentally called externally.

const ANIMATIONS = Symbol('animations');

This queue also needs to be assigned an empty Set when the Timeline class is constructed.

constructor() {
 this[ANIMATIONS] = new Set();
}

If there is a queue, then we must have a method to join the queue, so we also need to add an add() method to the Timeline class. The implementation logic is as follows:

constructor() {
 this[ANIMATIONS] = new Set();
}

We need to pass the current execution duration to the Animation run in the Timeline. To calculate this duration, you need to record a start time at the beginning of the Timeline. Then, each time an animation is triggered,當前時間- Timeline 開始時間is used to get how long it has been running.

However, the previous tick was written in constructor , and the Timeline start time must be placed in the start method. So in order to obtain this time more conveniently, we can directly put the tick declaration in start.

Although this change will cause us to rebuild a tick object function every time the Timeline is started. However, this method will make it easier to quickly implement this function, but students who want better performance can also optimize this area.

After moving our tick, we can add animations that call the ANIMATIONS queue to the tick. Because there can be multiple animations in a Timeline, and each frame will push them to the next progress attribute state. So here we use a loop and call the run method of all the animations in our ANIMATIONS queue.

Finally, our code looks like this:

const TICK = Symbol('tick');
const TICK_HANDLER = Symbol('tick-handler');
const ANIMATIONS = Symbol('animations');

export class Timeline {
 constructor() {
 this[ANIMATIONS] = new Set();
 }
 start() {
 let startTime = Date.now();
 this[TICK] = () => {
 let t = Date.now() - startTime;
 for (let animation of this[ANIMATIONS]) {
 animation.run(t);
 }
 requestAnimationFrame(this[TICK]);
 };
 this[TICK]();
 }
 pause() {}
 resume() {}
 reset() {}
 add(animation) {
 this[ANIMATIONS].add(animation);
 }
}

export class Animation {
 constructor(object, property, startValue, endValue, duration, timingFunction) {
 this.object = object;
 this.property = property;
 this.startValue = startValue;
 this.endValue = endValue;
 this.duration = duration;
 this.timingFunction = timingFunction;
 }

 run(time) {
 console.log(time);
 let range = this.endValue - this.startValue;
 this.object[this.property] = this.startValue + (range * time) / this.duration;
 }
}

We add a console.log(time) in the run method of animation to facilitate debugging.

Finally, in main.js, we add the animation to our Timeline.

import { Component, createElement } from './framework.js';
import { Carousel } from './carousel.js';
import { Timeline, Animation } from './animation.js';

let gallery = [
 'https://source.unsplash.com/Y8lCoTRgHPE/1600x900',
 'https://source.unsplash.com/v7daTKlZzaw/1600x900',
 'https://source.unsplash.com/DlkF4-dbCOU/1600x900',
 'https://source.unsplash.com/8SQ6xjkxkCo/1600x900',
];

let a = <Carousel src={gallery} />;

// document.body.appendChild(a);
a.mountTo(document.body);

let tl = new Timeline();
// tl.add(new Animation({}, 'property', 0, 100, 1000, null));

tl.start(); 

We found that the animation can indeed work and the time can be obtained. But a problem was also found, the Animation kept playing without stopping.

Then we have to add a termination condition to it. Our conditional judgment should be placed before executing animation.run, if the current time has exceeded the duration of the animation. At this time we need to stop the animation.

First, we need to modify the animation loop call in start function and add a conditional judgment before executing animation.run. Here we need to determine if the current time is greater than the duration of the animation. If the animation is established, it can be stopped and the animation needs to be removed from the ANIMATIONS queue.

export class Timeline {
 constructor() {
 this[ANIMATIONS] = new Set();
 }
 start() {
 let startTime = Date.now();
 this[TICK] = () => {
 let t = Date.now() - startTime;
 for (let animation of this[ANIMATIONS]) {
 if (t > animation.duration) {
  this[ANIMATIONS].delete(animation);
 }
 animation.run(t);
 }
 requestAnimationFrame(this[TICK]);
 };
 this[TICK]();
 }
 pause() {}
 resume() {}
 reset() {}
 add(animation) {
 this[ANIMATIONS].add(animation);
 }
}

Just like that, we have added the stop condition without any complicated logic. Finally, in main.js, we change the first parameter of Animation. Adding a setter to the object passed in allows us to have our animation print out the time. This makes debugging easier.

tl.add(
 new Animation(
 {
 set a(a) {
 console.log(a);
 },
 },
 'property',
 0,
 100,
 1000,
 null
 )
); 

We can see that the animation is indeed stopped, but there is still a problem. We set the duration of the animation to 1000 milliseconds, but the last one here is 1002, which obviously exceeds our animation duration.

Therefore, when we encounter the animation end condition, we need to pass its duration (the value of the animation duration) to the animation. Here we should write:

start() {
 let startTime = Date.now();
 this[TICK] = () => {
 let t = Date.now() - startTime;
 for (let animation of this[ANIMATIONS]) {
 let t0 = t;
 if (t > animation.duration) {
  this[ANIMATIONS].delete(animation);
  t0 = animation.duration;
 }
 animation.run(t0);
 }
 requestAnimationFrame(this[TICK]);
 };
 this[TICK]();
 }
 pause() {}
 resume() {}
 reset() {}
 add(animation) {
 this[ANIMATIONS].add(animation);
 }
} 

In this way, our preliminary Timeline and Animation capabilities are established.

Design timeline updates

Next, we will add more functions to this Timeline to make our Animation library truly usable.

In CSS Animation, we know that it has a duration (animation duration), but in fact it also has a delay (animation delay time).

So first let's try to add this feature.

Added support for Delay property

During development, when we want to add functions to the original library. Our first consideration is “find a reasonable place to add this functionality”.

In fact, intuitively speaking, our first instinct is to put this delay into the Animation class, after all, this function is part of the animation. But there is a better idea, which is to put the delay into the Timeline.

We can understand it this way: the start time, end time, and time control of an animation are all Timeline-related matters, which are actually different from what Animation focuses on. As for Animation, I think it focuses more on the effects and operation of animation.

Therefore, it is obviously more appropriate to put delay in Timeline.

In the add() method of Timeline, when adding the animation to the queue, add a delay to it.

While adding the delay logic, we can also solve a problem. That is, when we add an animation to the queue, the Timeline may already be executing. In this way, when we add the animation, the start time of our animation is wrong.

Another problem is that in the start method, our t start time and t0 are not necessarily the same. Because our startTime can be manually defined based on delay. Therefore, we need to rewrite the logic for this value.

Okay, so when implementing our delay function, we can take both of these factors into account.

First, let's add a delay parameter:

export class Animation {
 constructor(object, property, startValue, endValue, duration, delay, timingFunction) {
 this.object = object;
 this.property = property;
 this.startValue = startValue;
 this.endValue = endValue;
 this.duration = duration;
 this.timingFunction = timingFunction;
 this.delay = delay;
 }

 run(time) {
 console.log(time);
 let range = this.endValue - this.startValue;
 this.object[this.property] = this.startValue + (range * time) / this.duration;
 }
}

All we do here is add a delay parameter to the constructor and store it in the class's attribute object.

Because each Animation added to the Timeline queue may have a different delay, which means a different start time for the animation. So we need to create a START_TIMES storage space under the constructor of the Timeline class to store the start time of all our Animations.

export class Animation {
 constructor(object, property, startValue, endValue, duration, delay, timingFunction) {
 this.object = object;
 this.property = property;
 this.startValue = startValue;
 this.endValue = endValue;
 this.duration = duration;
 this.timingFunction = timingFunction;
 this.delay = delay;
 }

 run(time) {
 console.log(time);
 let range = this.endValue - this.startValue;
 this.object[this.property] = this.startValue + (range * time) / this.duration;
 }
}

Then in the add method of adding animation to Timeline, add the start time of the animation to the START_TIMES data. If the user does not pass in the startTime parameter to the add method, then we need to give it a default value of Date.now() .

add(animation, startTime) {
 if (arguments.length < 2) startTime = Date.now();
 this[ANIMATIONS].add(animation);
 this[START_TIMES].set(animation, startTime);
}

Next we can transform the logic of the start time:

• The first case: If the start time of our animation is less than the start time of the Timeline, then the time progress of our current animation is當前時間- Timeline 開始時間
• The second case: The start time of the animation is greater than the start time of the Timeline, then the time progress of the current animation is當前時間- 動畫的開始時間

The code is implemented as follows:

start() {
 let startTime = Date.now();
 this[TICK] = () => {
 let now = Date.now();
 for (let animation of this[ANIMATIONS]) {
 let t;

 if (this[START_TIMES].get(animation) < startTime) {
 t = now - startTime;
 } else {
 t = now - this[START_TIMES].get(animation);
 }

 if (t > animation.duration) {
 this[ANIMATIONS].delete(animation);
 t = animation.duration;
 }
 animation.run(t);
 }
 requestAnimationFrame(this[TICK]);
 };
 this[TICK]();
}

In this way, Timline supports adding an animation to it at any time. To facilitate testing of this new feature, we mount both tl and animation on window .

Here we change the code in main.js :

start() {
 let startTime = Date.now();
 this[TICK] = () => {
 let now = Date.now();
 for (let animation of this[ANIMATIONS]) {
 let t;

 if (this[START_TIMES].get(animation) < startTime) {
 t = now - startTime;
 } else {
 t = now - this[START_TIMES].get(animation);
 }

 if (t > animation.duration) {
 this[ANIMATIONS].delete(animation);
 t = animation.duration;
 }
 animation.run(t);
 }
 requestAnimationFrame(this[TICK]);
 };
 this[TICK]();
}

After we repackage with webpack, we can execute the following command in the console to add an animation to the Timeline:

tl.add(animation); 

Okay, this is the updated design of Timeline. But at this point, we haven't actually set the value of the delay parameter to delay the animation.

In fact, all we need to do here is to calculate t and then subtract animation.delay from it.

if (this[START_TIMES].get(animation) < startTime) {
 t = now - startTime - animation.delay;
} else {
 t = now - this[START_TIMES].get(animation) - animation.delay;
}

However, we need to pay attention to a special case. If the time obtained by t - 延遲時間is less than 0, it means that our animation has not reached the time required to be executed. The animation only needs to be executed when t > 0. So finally, add a judgment to the logic of executing the animation.

if (t > 0) animation.run(t);

Then let's try to implement its pause and resume capabilities.

Implementing pause and restart functions

First, let's try adding a pause function.

Implementing Pause

To implement the Pause feature for the Timeline, we first need to cancel the tick. That is to say, our Timline time stops. If the second hand of a clock or watch stops moving, then time will naturally stop.

To cancel a tick, we first need to know what is happening when the tick is triggered. Needless to say, it is our requestAnimationFrame .

Remember TICK_HANDLER we declared at the beginning? This constant is used to store our current tick event.

So the first step is to use TICK_HANDLER to store our requestAnimationFrame. The tick is started in the start method of our Timeline class, so here we need to change requestAnimationFrame in the start method:

start() {
let startTime = Date.now();
 this[TICK] = () => {
 let now = Date.now();
 for (let animation of this[ANIMATIONS]) {
 let t;

 if (this[START_TIMES].get(animation) < startTime) {
 t = now - startTime - animation.delay;
 } else {
 t = now - this[START_TIMES].get(animation) - animation.delay;
 }

 if (t > animation.duration) {
 this[ANIMATIONS].delete(animation);
 t = animation.duration;
 }
 if (t > 0) animation.run(t);
 }
 this[TICK_HANDLER] = requestAnimationFrame(this[TICK]);
 };
 this[TICK]();
}

We then call the following cancelAnimationFrame in pause() method.

pause() {
 cancelAnimationFrame(this[TICK_HANDLER]);
}

Pause is relatively simple, but resume is more complicated.

Implementing Resume

Then the first step to implement resume must be to restart tick. But the t (animation start time) in tick is definitely wrong, so we need to find a way to handle the logic in pause.

Before we implement Resume, we need to get some DOM stuff going to test it. So we first create a new HTML and create a div element in it.

<!-- Create a new animation.html (put it in the dist folder) -->

<style>
.box {
 width: 100px;
 height: 100px;
 background-color: aqua;
}
</style>

<body>
 <div class="box"></div>
 <script src="./main.js"></script>
</body>

Then we don't need main.js anymore, and create another animation-demo.js to implement our animation calls. This way we don't have to mess with our carousel.

// Create an `animation-demo.js` in the root directory
import { Timeline, Animation } from './animation.js';

let tl = new Timeline();

tl.start();
tl.add(
 new Animation(
 {
 set a(a) {
 console.log(a);
 },
 },
 'property',
 0,
 100,
 1000,
 null
 )
);

Because we modified the js entry file used by our page. So here we need to go to webpack.config.js and change the entry to animation-demo.js .

module.exports = {
 entry: './animation-demo.js',
 mode: 'development',
 devServer: {
 contentBase: './dist',
 },
 module: {
 rules:
 {
 test: /\.js$/,
 use: {
  loader: 'babel-loader',
  options:
  presets: ['@babel/preset-env'],
  plugins: [['@babel/plugin-transform-react-jsx', { pragma: 'createElement' }]],
  },
 },
 },
 ],
 },
}; 

Currently our JavaScript is a simulated animation output. Next we'll try to give the animation the ability to manipulate an element.

We first add an id="el" to the element to make it easier for us to get this element in the script.

<div class="box" id="el"></div>

Then we can animate this prototype. First we need to go back to animation-demo.js and change the first parameter of Animation instantiation to document.querySelector('#el').style .

Then the property of the second parameter is changed to "transform" . But please note that the following start time and end time cannot be used for the transform attribute.

So we need a conversion template , and use this template to convert time into the corresponding value of transform.

The template value here is directly written as a function:

 v => `translate(${$v}px)`;

Finally, our code looks like this:

tl.add(
 new Animation(
 document.querySelector('#el').style,
 'transform',
 0,
 100,
 1000,
 0,
 null,
 v => `translate(${v}px)`
 )
);

After adjusting this part, we need to go to animation.js to make corresponding adjustments.

The first step is to add the template parameter to the constructor of the Animation class. Like other properties, it is just a storage operation in the constructor.

Then in the run method of the Animation, the value in this.object[this.property] should call the template method to generate the property value. Instead of directly assigning it to a certain attribute as before.

export class Animation {
 constructor(
 object, 
 property,
 startValue,
 endValue,
 duration,
 delay,
 timingFunction,
 template
 ) {
 this.object = object;
 this.property = property;
 this.startValue = startValue;
 this.endValue = endValue;
 this.duration = duration;
 this.timingFunction = timingFunction;
 this.delay = delay;
 this.template = template;
 }

 run(time) {
 let range = this.endValue - this.startValue;
 this.object[this.property] = 
 this.template(
 this.startValue + (range * time) / this.duration
 );
 }
}

The final effect is as follows:

We found that we can already use our Animation library to control the animation of elements.

First, let's adjust the parameters of these animations, change the start and end positions to 0 to 500, and then change the animation duration to 2000 milliseconds. This setting will help us debug the following functions.

tl.add(
 new Animation(
 document.querySelector('#el').style,
 'transform',
 0,
 500,
 2000,
 0,
 null,
 v => `translate(${v}px)`
 )
);

Okay, next let's add a Pause button.

<body>
 <div class="box" id="el"></div>
 <button id="pause-btn">Pause</button>
 <script src="./main.js"></script>
</body>

Then we go back to animation-demo.js to bind this element. And let it execute the pause method in our Timeline.

document.querySelector('#pause-btn').addEventListener(
 'click',
 () => tl.pause()
); 

We can see that the pause function is now available, but how should we make the animation continue? That is to realize the function of a resume.

Before implementing the logic of the resume function, we first create a resume button in the same way. And let this button call resume() method in our Timeline.

<!-- animation.html -->

<body>
 <div class="box" id="el"></div>
 <button id="pause-btn">Pause</button>
 <button id="resume-btn">Resume</button>
 <script src="./main.js"></script>
</body>

// Add resume button event binding to animation-demo.js.

document.querySelector('#resume-btn').addEventListener(
 'click',
 () => tl.resume()
);

According to the logic we talked about above, the most basic understanding of resume is to restart our tick. Then let's try to execute this[TICK]() directly in the resume method.

resume() {
 this[TICK]();
} 

In the animation, we can see that if we execute the tick directly in resume, the box that restarts the animation does not continue playing the animation at the original pause position. Instead, he jumped to the back.

Apparently, when we click resume, our animation doesn't remember where we were when we paused. So when our animation is paused, we need to record暫停的開始時間and暫停時間.

Because these two variables need to be used in the Animation class, they should be defined in the global scope. Then we use the two constants PAUSE_START and PAUSE_TIME to save them.

const PAUSE_START = Symbol('pause-start');
const PAUSE_TIME = Symbol('pause-time');

The next step is to record the time when we pause:

pause() {
 this[PAUSE_START] = Date.now();
 cancelAnimationFrame(this[TICK_HANDLER]);
}

Why do we actually record the start time of the pause? This is to let us know how long the time is from when we start to pause when we continue to play the animation.

What is the phenomenon we just saw in the animation? That is, when we restart the tick, the start time of the animation uses the current time. The "current" time mentioned here refers to where the Timeline has reached. Obviously this start time is incorrect.

If we pause, we record the time of that moment. Then when you click resume, calculate the duration from the start of the pause to the time you click resume. In this way, we can use t（動畫開始時間）- 暫停時長= 當前動畫應該繼續播放的時間.

Using this algorithm, we can make our animation continue playing precisely at the original pause position.

Next, let's take a look at how the code logic is implemented:

We have just added the pause time to the time recording logic. Next, we need to record the pause duration. Before recording the pause duration, we need a place to assign this value an initial value of 0.

The best place to start is by assigning this default value at the beginning of the Timeline. After our PAUSE_TIME has an initial value, when we execute resume, we can use Date.now() - PAUSE_START to get the total duration of the paused animation to the present.

There is a point here that we need to pay attention to. Our animation may be paused multiple times and resumed multiple times. In this case, if we use this formula to calculate the new pause duration every time and then overwrite the value of PAUSE_TIME, it is actually incorrect.

Because once our Timeline is started, it will not stop, and time will keep passing. If we only calculate the current pause duration each time, the fallback time is actually incorrect. The correct way is to add the duration of the previous pause each time you pause. This way the final rollback time is accurate.

So when we assign a value to PAUSE_TIME, we use += instead of overwriting the value.

Finally, our modified Timeline looks like this:

export class Timeline {
 constructor() {
 this[ANIMATIONS] = new Set();
 this[START_TIMES] = new Map();
 }
 start() {
 let startTime = Date.now();
 this[PAUSE_TIME] = 0;
 this[TICK] = () => {
 let now = Date.now();
 for (let animation of this[ANIMATIONS]) {
 let t;

 if (this[START_TIMES].get(animation) < startTime) {
  t = now - startTime - animation.delay - this[PAUSE_TIME];
 } else {
  t = now - this[START_TIMES].get(animation) - animation.delay - this[PAUSE_TIME];
 }

 if (t > animation.duration) {
  this[ANIMATIONS].delete(animation);
  t = animation.duration;
 }
 if (t > 0) animation.run(t);
 }
 this[TICK_HANDLER] = requestAnimationFrame(this[TICK]);
 };
 this[TICK]();
 }
 pause() {
 this[PAUSE_START] = Date.now();
 cancelAnimationFrame(this[TICK_HANDLER]);
 }
 resume() {
 this[PAUSE_TIME] += Date.now() - this[PAUSE_START];
 this[TICK]();
 }
 reset() {}
 add(animation, startTime) {
 if (arguments.length < 2) startTime = Date.now();
 this[ANIMATIONS].add(animation);
 this[START_TIMES].set(animation, startTime);
 }
}

Let's run the code to see if it's correct:

In this way, we have completed the Pause and Resume functions.

Here we have implemented a usable Timeline. In the next article, we will focus on enhancing the functionality of the animation library.

If you are a developer, having a personal blog is also a great addition to your resume. And if you have a super cool blog, it will be even brighter and it will simply shine.

Theme Github address: https://github.com/auroral-ui/hexo-theme-aurora
Theme documentation: https://aurora.tridiamond.tech/zh/

This concludes this article about using JavaScript to implement timeline and animation effects sample code (front-end componentization). For more relevant js implementation of timeline animation content, please search 123WORDPRESS.COM's previous articles or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!