最近因为鸿星尔克给河南捐了5000万物资，真的是看哭了很多的网友，于是我想到了给鸿星尔克做了一个线上的看鞋展厅，鸿星尔克 TO BE No.1！

拥有了强大的Canvas，我们可以使用JavaScript来控制它从而轻易地绘制出各种各样想要的图形，还可以利用JavaScript将用户的交互与canvas的绘制紧密地连接起来，甚至大可发挥我们的脑洞去做各种各样天马星空的事情。 如上所述，动画就是一张张静态的图片以一定的速度…

Lottie 是一个复杂帧动画的解决方案，它提供了一套从设计师使用 AE（Adobe After Effects）到各端开发者实现动画的工具流。在设计师通过 AE 完成动画后，可以使用 AE 的扩展程序 Bodymovin 导出一份 JSON 格式的动画数据，然后开发同学可以通…

Shader 动画和 Canvas 动画原理是一样的，通过定时器循环渲染，并改变画布中图形的属性来实现动画。 一些 Shader 编辑器都已经实现好了定时器的功能，同时会传递一些跟时间相关的值给到着色器代码中，如 ShaderToy 中与时间相关的属性是 iTime/iTime…

一个跨浏览器的动效基础库，是许多基础动效的解决方案。从经典的弹跳动效到独特的扭曲动效，一应俱全。 文件大小：55.2 kB. 和其他的同类工具不同的地方在于，它不仅仅是一个库，而是有这用户可以直接操作的实际功能，它带有一个完整的网页构建器。Bounce.js 是为数不多的可以直…

PS:为了简单也可以用视频，但除非动画的播放场景固定，不然移动端视频在不同app、不同机型、不同系统的播放显示都不太一样，容易踩不少坑。 不管采用什么方式来制作动画，最终呈现到前端页面的无非三种形式：canvas、div、SVG。 一般情况下，随着屏幕大小的增大，canvas将…