广州网站开发动效怎么做？交互动画与性能平衡

动效是官网里最容易做过头的一类东西。演示时很好看，上线后首页多花两秒才动起来，老设备直接发烫掉帧。网站开发动效 的价值在于引导视线和反馈操作，一旦变成装饰，它就是纯粹的负担。

图：长曝光下的光轨，动效的观感与之类似但需克制

一、动效该解决什么问题

加动效之前先问一句：它解决了什么。

1、有用的动效是反馈和引导

鼠标悬停时按钮变色、提交后按钮变成加载中、滚动到某个区块时标题渐显——这些动效传递的是状态信息，删掉页面就不好用。

2、纯装饰的动效要克制

光标拖尾、粒子背景、全屏转场这类动效不传递任何信息，只增加渲染压力。企业官网里这类动效的性价比很低。

3、动效不能替代内容

有些站点内容薄弱，就用动效撑场面。结果访客看完动画还是不知道这家公司做什么。动效解决的是呈现方式，不能解决内容本身的问题。整站的信息层级怎么排，在广州企业官网设计要点里讲过，动效只是其中一层。

二、网站开发动效的取舍原则

四条原则守住，基本不会过头。

1、能不用就不用

每加一处动效，都要能说清它的作用。说不清的就不加。这条原则执行下去，多数官网的动效会从十几处减到三四处，页面反而更顺。

2、时长控制在零点三秒上下

状态反馈类的动效在零点二到零点三秒之间最舒服：快到不打断操作，慢到能被感知。超过零点五秒就会有拖沓感，访客会以为页面卡了。

3、同一屏不超过一处

一屏之内出现两处以上同时运动的动效，视线就会打架，哪一处都看不清。整屏只让一个元素动，其余保持静止。

4、要能关掉

部分人群对动效敏感，会有不适反应。网站应遵循系统的「减少动态效果」偏好设置，在该偏好开启时自动降级为静态。这不是加分项，是无障碍访问的基本要求。

三、网站开发动效 的性能优化：哪些最耗

1、慎用改变布局的动画

改变元素位置和尺寸的动画会触发布局重算，代价远高于只改变透明度和位移的动画。能用后者实现的效果，就不要用前者。

2、全屏粒子和视频背景最重

全屏粒子背景、自动播放的视频背景，是两类最吃资源的做法。中低端设备上掉帧非常明显，移动端还会额外耗电。要用就要给移动端降级方案。

3、滚动监听要节制

每一处滚动动效都要监听滚动事件，监听多了会拖慢滚动本身。滚动动效集中在一两个关键区块，其余保持静态。加载层面的优化顺序在网站打开速度慢怎么优化里讲得比较完整，动效属于其中一环。

4、用真机测，不用电脑测

电脑上跑得流畅，不代表手机上流畅。动效上线前要用中低端手机实测，重点看滚动是否掉帧、机身是否发热。多端的性能差异在响应式网站设计里也有涉及，动效是其中受影响最大的部分。

四、常见的几种过度做法

1、首屏不要等动效

首屏内容要立刻呈现，动效只是让它更好看，不能成为内容出现的条件。让访客等动画播完才看到业务信息，是典型的本末倒置。

2、动效要能被打断

滚动到一半反向滚回去时，动效要能立即响应而不是等上一段播完。不能打断的动效会让操作变得迟钝。

3、别让动效影响点击

元素在运动过程中被点击，容易点错或点不到。动效结束后元素位置要稳定，重要按钮不要在动画期间改变位置。

4、定期复查

改版、换模板、加模块之后，动效数量往往会不知不觉增加。每次大改之后重新数一遍，把说不清作用的删掉。跳出率异常时也可以查一下是不是动效拖慢了页面，排查顺序在网站跳出率高怎么办里有说明。

延伸问答：网站开发动效 与交互动画设计 的常见疑问

1、动效会影响排名吗

动效本身不是排名因素，但它影响加载速度和停留时间，这两项会间接影响表现。动效做到拖慢页面，就是负面作用。

2、要不要做整站转场动画

不建议。转场动画会延长页面切换的等待感，企业官网访客的目的是找信息，不是欣赏转场。

3、数据滚动效果值得做吗

数据类内容值得，它能强调数量和增长。但只给两三个关键数据做，全部数据都滚动会显得廉价。

总结：动效是调味，不是主菜

网站开发动效 的分寸在于：有用的保留，装饰的删掉，时长压短，同一屏只动一处，并且能被系统偏好关掉。这五条做到，动效就是加分项。优诺网络做官网定制时把动效清单单独列出来评审，上线前用中低端手机实测，避免演示好看、真机卡顿。这类取舍属于网站建设服务方案阶段就该定下的内容。