Animation for front-end developers - course RUB 31,380. from HTML Academy, training, Date: November 28, 2023.
Miscellaneous / / November 30, 2023
The course takes place in an asynchronous format. You can start training at any time and move through the program at a speed that suits you.
The main value of the course is a large amount of feedback from a mentor who will analyze your code in detail, identify gaps in understanding the material and help you cope with everything.
The course is designed for experienced developers who want to improve their skills. To master it, you need skills in layout and programming in JavaScript. The course is also suitable for beginners who have successfully completed the HTML and CSS courses. Adaptive layout and automation" and "JavaScript. Professional development of web interfaces."
In the course, we use the most effective formats for training professionals: texts, simulators, screencasts and demonstrations. We don't overuse video and only use it where it's needed.
Our goal is to turn any newcomer into a full-fledged and sought-after specialist, ready to work in the web industry.
In 2013, Sasha and Lesha launched HTML Academy. From the very beginning, we decided to teach how to work with live code, solving problems that are close to real ones. We provide an opportunity to gain not only knowledge, but also skills. In the learning process, we confront the student with tests, the principle of which is “match as shown in the model.” This is the principle by which most layout designers work.
We consider layout to be a very useful skill for any IT specialty. Therefore, we try to make our simulators as interesting, addictive, interactive, unusual, and somewhat game-like as possible.
We have prepared simulators that cover various aspects of the work of a layout designer. This is enough to get thoroughly acquainted with the layout. And for those who want to grow into a professional, we have prepared six online courses. These unique educational programs allow you to prepare specialists with the skills necessary for the web industry. And mentors help us with this. Now more than three hundred mentors work with us.
If simulators and courses are not enough for you, then you can look at the bookshelf, where we are gradually collecting books on web development. Or visit our forum and discuss the issue that concerns you.
After completing the course, you will be able to create animations of any complexity in the browser. Through the proper use of animations, you can improve the UX quality and attractiveness of the sites you develop. The course includes more than 40 practical tasks and 10 consultations with a mentor.
In the first section we will look at the history of animation. How to create the illusion of movement, the main differences between classical and computer animation. What abstractions are there for constructing computer animation? What is the difference between linear animation and frame-by-frame animation? We'll also look at 12 principles of expressive animation. After this we will create simple animated transitions in CSS.
- Pipeline for executing code in the browser.
- CSS transition and animation: differences.
- Time functions: built-in, cubic-bezier.
In this chapter, we'll move on to introduce a lower-level abstraction: frame-by-frame animation. Let's study what FPS is and standard FPS values: 24, 30, 60. What is floating FPS. Let's look at examples of frame-by-frame animation:
- animation of the state of characters in games - a method on the web Sprite Sheets - prepared animations, 360 model (for example, a car).
- computer animation, motion design - a method in the web JS Tween and JS Morph - animation using libraries, for example, CreateJS, AnimateJS, GSAP.
- games that track player actions in real time - racing, Tetris - a method of creating models with an interaction interface - in web interactive elements and games.
We will also continue to study in depth the principles of expressive animation: stage presence, attractiveness, professional drawing - the developer’s attention to detail, the quality of the final picture.
In the practical part we will learn to use:
- window.requestAnimationFrame.
- Canvas and its parameters and methods.
- Cycle of drawing animation of a simple element. Transformations. Drawing a picture. Masking. The abstract object class is riga. Class extension. Parametric trajectory specification. Examples: ellipse, spiral, parabola, sine wave, damped sine wave, etc.
- Manipulations with trajectories: addition, multiplication, parallel transfer, sinusoid phase shift.
- Update() and render() methods.
In this chapter we will continue to work with frame-by-frame animation. Let's learn what WebGL and OpenGL are. Let's look at the difference between working in the context of 2D and webgl. Let's explore what raster effects are:
- color filters
- OpenGL
- masks – Lumination, Alpha
- color overlays - blending
- noises
- offsets
- blur
We will also study the animation of raster effects: constant movement and changing parameters.
In practice, let's look at:
- What are vertex and fragment shaders.
- How to use WebGL 3d for 2d effects.
- What is geometry.
- Pipeline WebGL.
- Interaction between JS and WebGL.
- Data types in WebGL.
- Writing GLSL - the basics.
In this chapter we will talk again about coordinate systems, points and vectors. Let's study 3D transformation matrices, quaternions and Euler angles, matrix multiplication.
Let's consider 2 options for creating models with a user control interface:
- Direct setting of parameters: speed or acceleration (movement or rotation).
- Setting a goal - a value to which you need to gradually approach: the element is attracted to the cursor.
- Let's study the engine's work cycle, the invalidate(), update() and render() methods, and the features of working with floating FPS. Let's learn how to do calculations inside update().
In the practical part, we will start working with the Three.js library. Let's study:
- Ways to describe objects: position, geometry and materials.
- Geometry: parametric built-in, arbitrary loadable. Geometry buffer.
- What materials are there, types of materials, rendering modes, custom materials.
- Flags for update.
- The render loop.
- Position animations. Morph animation method.
- Stage + camera. Adding objects to the scene. Grouping.
- Light. Types of light sources. Matcap material.
In this part we will look at what a camera is in WebGL, and in Three in particular. JS:
- Camera control.
- Basic camera movements.
- Rigs of cameras.
- Different rig designs for different types of control.
In the practical part:
- Let's see what types of cameras there are in Three. JS, camera parameters, resize when switching to the mobile version.
- Let's explore approaches to camera animation. Let's look at the reaction to user actions - a smooth change in perspective. Controlling with a rig: camera rig render cycle. Creating a flight animation.
- Rigs of cameras.
- Let's consider switching between cameras - editing. Installation rules.
In the final part of the course, we will look at those APIs that are not yet ready for use in production, but are worth starting to study now in order to improve the efficiency of your work in the future.
- Let's see how the Web Animation API differs from regular CSS animation and what additional capabilities it provides.
- Let's learn the basics of the Houdini API.
- Let's talk about libraries that will help simplify work with animations, timelines, SVG, canvas, WebGL.
- Let's consider programs for working with animation and graphics for the web: Google Web Designer, Adobe Animate, Adobe After Effects, 3d graphics programs: Cinema 4d, Blender.
- Let's take a short overview of approaches to creating dynamically generated animation and graphics. Let's look at what tools can be used to build cross-platform software with 3D.
- Let's talk about how you can further develop in creating animation.
In this course, you will learn the fundamental principles that go into developing front-end applications.
In this course you will learn the Redux Toolkit. You'll learn more about organizing state in a React application. Ultimately, you will learn how to manage complex state and design react applications.
Master an in-demand profession from scratch.