【Foreword】
This article summarizes 9 common implementation methods of web animation
【main body】
With the gradual popularization of HTML5, the ways of implementing animation on Web pages have also increased, but it has also brought some compatibility problems. This article makes a summary.
At present, no one way is perfect.
①GIF compatibility is the best, but the picture quality is poor and there is no interaction.
②Canvas is very popular, powerful, and difficult to program. Old IE does not support it.
③SVG is good at dealing with vector graphics, easy to interact, and old IE does not support it.
④ CSS3 is very shiny, but the function is limited, the old IE does not support.
⑤APNG, SMIL still need to see the support progress of each browser in the future.
⑥Video is also gorgeous, but it's annoying to prepare multiple file formats for one video.
⑦ Javascript is a panacea, as long as there is interaction, he is still a general.
⑧ Flash is very powerful, but the future is bleak, and the mobile terminal is not strong.
No. Name Format Desktop Compatibility Mobile Capacitive Interaction Efficiency Resource Occupancy
| GIF animation | binary | very good | very good | support | without | high | Low |
| Flash / SilverLight 等 | binary | very good | Very difference | support | easy | high | high |
| Javascript + HTML | Plain Text | very good | very good | support | easy | Low | middle |
| Javascript + Canvas | Plain Text | generally | Okay | not support | difficult | high | middle |
| Javascript + SVG | Plain Text | generally | Okay | not support | easy | Low | middle |
| SVG + SMILE | Plain Text | Difference | Very difference | not support | easy | high | middle |
| APNG | binary | Very difference | Very difference | not support | without | high | Low |
| CSS3 | Plain Text | generally | Okay | not support | without | high | Low |
| Video | binary | generally | generally | not support | difficult | high | middle |
.