在一般的业务网站建设开发环境下, 所有的动效是否全部由程序实现, 这是需要按照不同的情况设计实现手段进行判断的, 一个很小的特殊效果让前端日以继夜地堆代码是一种价效比极低的方法。很多情况下, 对于不需要太多互动操作的动态效果, 实际上是前端提供一个画布区域设计师通过逐帧动画的设计其实现效果, 会更有效地提升产品开发效率。这里给大家提供三个价效比相当高的方法：
(1)GIF 动画 大家对 GF 图片应用并不陌生, 今天主要跟大家普及 GIF 的压缩技巧。我们在做多用户走访的时候发现, 很多 B 类多用户办公条件都不具备高速的频宽, 所以我们必须考虑到 GIF 的体量。拿我们在父亲节做的一个情感化的小动效来说, 在 PS 无压缩的情况下是 67k, 我们可以通过对帧速率进行压缩, 每两帧抽减一帧, 为保持回圈周期不变, 新的每帧持续时间需要设定成原来的两倍, 这样压缩之后体量就会减少为原来的 1/2, 但是效果比起来, 有一点点卡顿的感觉, 效果没有原来的流畅了。 这里给大家推荐另外一种网站建设方法, 扁平化的动效设计可以对颜色和损耗做适当的压缩, 并且删掉回圈中重复或者是非常相近的帧, 注意删掉某一帧之后, 要把它替代装的时间补全, 保证回圈周期不变, 这样也可以有效地压缩 GF 体量, 但是需要注意一点的是颜色压缩只活用于无渐变的动效。 GIF 的应用范围比较小, 由于它比较难以控制播放, 所以基本上都是用在像 LOGO 区这样不需要太多操作的区域。 (2)webM 视讯 压缩方式对比 webM 是一个视讯格式, 并且是一个可以控制播放的容器, 它的体量是 GI 的 1/3, 相容响应式的设计, 优点是减少网站建设设计成本, 全面相容浏览器, 硬体要求低尝试在 B 类营销场景中插入动态背景视讯, 原视讯 367MB 压缩为 GIF 的 6.9MB, 转换为 webM 的 1.8MB, 体量完全符合多用户要求, 并且影象的损失也在可控范围内; 在产品区域的应用, 由于可控播放的优点, 未来我们的产品完全可以 360 度地展现。 (3)PNG 序列 最后来看一下 PNG 序列, 对于游戏类可以进行预载入的网页应用, 在开发时间较短的, 可以使用 PNG 序列来展现应用想要呈现的效果, 通过时间点和动效周期的精, 可以让多用户有非常流畅的互动体验。比如, 我们在拳击体感游戏 “啪啪快打” 专案中尝试用 PNG 序列来实现一个体感游戏, 多用户可以通过手机连线电脑, 通过手势控制来进行打斗的操作。具体的动效设计用雪碧图来实现。 这些都是我们 web 端无法比拟的，我们在做网站建设网页动效设计的时候必须考虑频宽，主流两个作业系统使用的最小时间单位都是毫秒，所以我们的桢间隔单位按照毫秒取整。