网站设计公司的设计师如何做网站动画？

今天给大家分享网站动画怎么做的经验，本文主要通过研究分析苹果产品官网的动效案例，从而提升设计师在网站动画设计中的能力。

Apple One网站里面有6款不同类型的应用捆绑在一起，页面开篇这6款应用图标横向平铺，随后依次翻转，接着Apple One也翻转出来，向用户强调它们被包含在该产品里。品牌图标演化出多种圆形内容，内容还会不断变化切换，最后又融合成品牌图标，简单明了直观告诉用户这个功能可以解决用户哪些问题。开篇在浅黄色背景上告诉用户智能家居应用被重新设计，随后不断加深的黄色房屋造型逐渐由大变小叠加起来组成了Home app的图标，引出介绍内容；通过放大品牌情感温度从而向用户传达品牌理念。

网站为了让更多的人使用Apple Pay，苹果向用户展示了真实的使用过程，降低认知成本，让用户更容易接受并使用。用全屏视频内容刺激用户感官，然后内容逐渐缩放到电视内，一开始就把试听体验注入到了用户脑海中。

背景颜色及内容伴随电视中的视频一同切换，让用户明确感知产品能做哪些内容。特写展示遥控器，随着遥控器角度变化，内容也跟着变化，就像有位销售拿着产品在你面前，详细为你讲解每一个按键的功能。

苹果网站钱包图标及文字逐渐放大向下移动，并将文字顶出屏幕以外；整体接着放大，钱包底子继续下移消失，只留下钱包内的彩色卡片，说明文字上升出现。

网站随着页面往下，蓝色卡片向上移动，卡片内文字渐显，页面整体变成蓝色，苹果巧妙的将图标元素与卖点内容结合，并通过不同颜色来区分不同内容。

滑到页面最底部，四张彩色卡片又逐渐插到钱包里，最后再强调用户去使用。

卖点先后出现，层层递进，随后产品被新功能及核心特点弹开， 将产品大、有多大、续航强以及新功能先后映射到了消费者脑海里。

网站Plus和电池一同进行充电动画，仅仅一个关键词和一个图标，就形象的描述了电池容量大的事实，紧接着更加具体的参数逐一显示，强化究竟有多大。

产品旋转运动最后合并成一个由大变小，最后出现价格，强调改产品很实惠。

手机旋转放大，原来的桌面壁纸变成了产品卖点的背景，将产品和卖点顺滑的联系在一起。

让每一句文案丝滑的连接出现，让用户能够感知出产品低延迟的优点，接着产品侧影出现将之前内容擦除，引出处理器的强大。

 水花下落被手机弹开，直观的告诉用户它是防水的。

网站漆黑的背景写着14Pro的标题，随后标题消失，同时产品从无限大缩小，看完这个动画才发现，原来之前漆黑背景是新款产品的灵动岛，随后灵动岛展示了在不同场景下的状态，吸引了用户注意。

产品说明内容使用新款手机墙纸进行渐变显示，加强了用户对新款产品的感知。

开篇全屏出现一朵具有科技感的3d花朵收拢绽放的视频，随后镜头后推，2台产品旋转展开，呈现出一个展翅翱翔的造型，传达出产品性能强劲展翅高飞的势能。

看了苹果公司网站中的动画，不难看出，动画的核心功能就是用关联的方式强调、强化卖点。

具体方法如下：

1、网站产品如果有多种颜色，那就尽量在画面中一起体现；

2、网站让产品自己说话，善于利用产品的不同角度、运动方式强化产品功能特征；

3、网站不做无用动画，让每一个动画表达明确的意图，不要让用户觉得它只是在动；

4、网站把控文案展现在用户眼前的先后顺序，用故事把它们串联在一起，从而掌控用户阅读节奏。