页面动效都有哪些方案？

Question

问题描述：如果我需求在页面触发某种交互时展现一段动效，且可以在需要的时候结束这个动效。那么都可以用哪些方案（不考虑业务场景的也行，欢迎大佬集思广益）？

问题背景:
完整版：
这个页面处在一个绝对不能用loading来预加载的场景，因为他是首页的开场动画而这个页面也决不允许长时间白屏，但如果进入页面动画素材没加载完一定会卡帧，这就是传统动画方案无法满足这个需求的问题，有大佬可以解决这个场景问题也欢迎给出方案，欢迎各种奇思妙想及方案加入肯（方）德（案）基豪华套餐

简单版：

• 是首屏动画，进入页面就展示的那种
• 加载完图片资源再显示页面，会影响首屏加载不被允许
• 不加载完图片资源直接显示，动画卡帧不被允许

问题探讨：
来说说我在动效方面用过的方案及遇到对应的问题
1、gif动画：不好控制（这就没救了，如果有大佬能让gif随心所欲控制欢迎指点），在业务场景下我觉得最大的有点就是资源请求少。

2、css/canvas/js动画： 多图！对这个场景来说就只有这个致命缺点。也是我提这个问题的初衷。

以上，希望各位大佬能给我帮助。

问题总结：

1、有没有大佬有类似业务场景可以给些提示，对动画接触不多，以往都是预加载来解决多图问题的，希望得到大佬的指点。
2、有没有方案可以随心所欲控制gif动画？
3、css/canvas/js动画有多图资源的问题，对加载造成了很大的问题，一般的优化方案压缩，减少细节、尽量预加载方案都已经尝试了但仍达不到想要的效果，有没有其他的优化方案？

Answer 1

页面绝对不能loading是恐怕没有那么绝对的，只能说尽量去优化吧，如果用户网络特别慢，那一样是会有白屏加载的时间的，不知道你的运用平台是啥，如果是app的话，可以在webview层面去优化这些。

1、随心所欲控制动效可以使用开源的js动画库，svg等等

• https://animejs.com/ （相对来说我比较喜欢用这个，因为它体积小但是强大）
• https://greensock.com/gsap/ （这个就不用说了，非常强大）

2、有没有方案可以随心所欲控制gif动画？

• 你可以使用video标签去替代，用ffmpeg等工具将gif转成mp4，不管是体积还是性能都是不错的，而且还可以控制暂停、播放等等

3、多图资源的问题

• 如果问题是多，那就是考虑合成精灵图，图大的话就压缩

Answer 2

1. 用 CSS 动画
2. 再怎么优化 GIF 也不可能比同效果的 CSS 小
3. 又看了一遍问题，你的问题在于对这几个技术都不够了解，建议好好学习一下先

Answer 3

先显示 css 首屏马上就要展示的动画。然后加载后面的动画。后面的动画建议都用 css

Answer 4

svg 动画试过么