如何用JavaScript制作静态图片局部流动的长尾动画效果？

本文共计2531个文字，预计阅读时间需要11分钟。

目录+背景+效果+实现+HTML+页面结构+CSS+样式+JavaScript+方法+总结+背景+如果你玩过《王者荣耀》、《阴阳师》等手游，一定注意到它们的启动动画、皮肤立绘等场景，通常采用静态图片。

目录

• 背景
• 效果
• 实现
• HTML 页面结构
• CSS 样式
• JavaScript 方法
• 总结

背景

如果你有玩过《王者荣耀》、《阴阳师》等手游，一定注意到过它的启动动画、皮肤立绘卡片等场景，经常采用静态底图加局部液态流动效果的简单动画，这些流动动画可能出现在缓缓流动的水流、迎风飘动的旗帜、游戏角色衣袖、随着时间缓动的云、雨、雾天气效果等。这种过渡效果不仅节省了开发全量动画的成本，而且使得游戏画面更加热血、冒险、奥德赛、高级，也更加容易吸引玩家氪金。

本文使用前端开发技术，结合SVG和CSS来实现类似的液化流动效果。