web animation methods All In One

web 动画技术汇总

gif 动画、css 动画、svg 动画、video 动画、flash 动画(已废弃)、js 图片动画、js canvas 动画

https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API/Using_the_Web_Animations_API

https://developer.mozilla.org/en-US/docs/Web/API/Window/requestAnimationFrame

https://developers.google.com/web/fundamentals/performance/rendering/optimize-javascript-execution?hl=zh-cn

TL;DR

对于动画效果的实现，避免使用 setTimeout 或 setInterval，请使用 requestAnimationFrame。
将长时间运行的 JavaScript 从主线程移到 Web Worker。
使用微任务来执行对多个帧的 DOM 更改。
使用 Chrome DevTools 的 Timeline 和 JavaScript 分析器来评估 JavaScript 的影响。

Technologies for creating web animations

So, you already know the most amazing and popular website animation styles and types. Now, it’s time to learn how you can add them to a website. Once designers have created or chosen the animation, they forward it to front-end developers – programming magicians who should put it on a site. Here we will consider the best technologies and frameworks used for web animation.

CSS

The first thing worth mentioning is the CSS animation. It helps front-end developers make transitions between different states using keyframes. This type of animation is lightweight, high-performing, and doesn’t require any external libraries for implementation.

Developers can add animation to a web page by using DOM (Document Object Model) and setting customized properties. Another advantage of CSS animations is excellent compatibility with different screen sizes, which is the number one factor that makes a great website. The only disadvantage is that you can imitate realistic motion using this animation type.

JavaScript

This powerful programming language is also beneficial when it comes to website animation. It gives much more flexibility compared to CSS animations.

JavaScript’s only con is that it implements all animation through external libraries, impacting animation performance and loading time. It is mostly applied when you need to pause, slow down, or stop the animation.

SVG

Do you know what the abbreviation SVG means? It’s Scalable Vector Graphics. You can understand even from the name that SVG is a perfect solution for creating easily scalable animation. It looks excellent on a website, even if you zoom on it since SVG doesn’t have pixel restrictions.

Developers can use CSS to make SVG elements. Also, it has its own animation functionality that allows creating more complicated animations.

Canvas

Canvas is great for implementing complicated animations and rendering large-scale visuals. It’s a pixel-based solution empowering you to make complicated images with different shades, colors, and motion. And what’s most important – it doesn’t affect the animation performance.

WebGL

WebGL is usually used to generate sophisticated animation effects and 3D rendering. The most impressive fact about WebGL is that it can render animation at 60 frames/second (just imagine!). For WebGL, developers should also use Canvas, but it’s quite a complicated process.

https://fireart.studio/blog/10-best-website-animation-techniques-for-your-web-design/#:~:text=Technologies for creating,a complicated process.

refs

web 动画应用场景

https://fireart.studio/blog/10-best-website-animation-techniques-for-your-web-design/

?xgqfrms 2012-2020

www.cnblogs.com/xgqfrms 发布文章使用：只允许注册用户才可以访问！

原创文章，版权所有??xgqfrms, 禁止转载 ???，侵权必究??！