【干货】H5动态设计窍门，全在这里！

动态图像设计（Motion Graphics Design）是将原本静态的平面图像经过动态的设定，呈现出动感。动态图像应用在设计中的很多方面，如：产品展示、品牌建设、动效原型、趣味应用等。

动态图像的特点：

1.与影片不同，MG是短小精炼的。如电影的片头，logo的演绎，视频常见的角标动画等。

2.传统影片通过角色来演绎剧情，MG则不然。角色的目的是为了传达信息或表达氛围。

3.通常结合了许多不同的元素（二维/三维动画，视频，字体排版，插画，摄影，音乐等）。

4.时间不会太长，可循环\单次播放。

5.有一定的指引（引导）。

6.富有趣味性，更强的视觉表现力，更优质的细节展现。

 

通常我们会采用哪些处理方式将动态设计应用在H5项目中？

一、文字

文字是我们最经常需要设计的元素，栏目logo、主标题副标题，甚至内容等等。通常我们会根据以下几点进行设计。看一下例子：

1.自身变化(颜色、形状、出现方式）

2.文字与图形的结合

3.文字与场景之间的转换

二、影像

1.为给照片赋予新的生命

2.用插画构建新的世界

3.用影片来协助设计

4.创造3d的虚拟空间

结合H5中常见的应用场景，动效设计通常应用在：

1.Loading

2.封面

3.转场

4.其他（指引/说明等）

在动画的制作中可以根据不同的使用场景可以将动画设定为可循环和不可循环。其中可循环动画也可以分为单频率动画，即所有动态元素遵循一个节奏运动。或多频动画，即所有动态元素遵循两个或两个以上节奏运动。

只要有好的创意，都可以实现一个不错的展示效果！