H5面创意设计课件 项目5 H5面的动效设计

项目5H5页面的动效设计目录Content5.1H5页面动效设计基础5.2H5页面的内页动效设计5.3

H5页面的转场动效设计5.4

项目实训5.1.1H5页面动效的作用动效具有渲染氛围、引导H5的功能进行展现、引导用户交互（如引导用户进行点击、翻页等）的作用，能吸引用户并让其视线长时间停留，增加用户对H5的好感。下图所示的H5页面采用多种纯色渐变作为背景，加上类似水波纹的效果，配合上古琴的声音，从视觉和听觉上都让人很享受，仿佛在一个虚拟的空间中徜徉、漫步、飞翔。5.1.2H5页面动效的主要类型在H5页面中，内页动效常用于依次展现H5页面的内容，使整个内容更具有动感和趣味。下图所示为使用淡入的内页动效，整个H5页面具有趣味性。1.内页动效5.1.2H5页面动效的主要类型在H5页面中，转场动效常用于内容的承上启下、描述场景的过渡或空间的转换，能让内容过渡得更加自然、用户体验更加流畅。右图所示为招聘H5页面的转场动效，将上页内容和下页内容进行自然地转换。2.转场动效5.1.2H5页面动效的主要类型3.内容动效无交互内容动效有交互内容动效AB无交互内容动效指以动画或是视频的形式，将动效置入H5页面中，使其按照制作的特定效果进行播放。有交互内容动效在无交互内容动效的基础上加入了交互的按钮或是动作，让用户的操作与H5页面的动效产生关联，以增加页面的互动性。5.1.2H5页面动效的主要类型辅助动效在H5页面中所占比例较小，具有持续时间短、渲染力强、突出细节的作用，能增强页面细节的表现力，提升整个H5页面的趣味性。右图所示的H5页面采用辅助动效，在内容的展现中添加闪烁的星光等，增强整个页面的细节表现力。4.辅助动效5.1.2H5页面动效的主要类型功能动效常用于测试类H5页面，起到内容引导和提示的作用，具有持续时间短、展示面积小、动效效果弱的特点。右图所示的H5页面采用功能动效。该H5页面中的“点击进入”按钮、“女声诊室”按钮、“男声诊室”按钮、点击选中按钮等都属于功能动效，这些按钮不仅具有引导性，而且能增加用户与页面的互动性。5.功能动效目录Content5.1H5页面动效设计基础5.2H5页面的内页动效设计5.3

H5页面的转场动效设计5.4

项目实训5.2.1内页的动效选择在制作内页动效前，设计人员需要先选择合适的动效。根据对象大小选择动效内页动效需要根据对象的大小来选择，设置动效的对象面积越大，设置的动效速度越慢，动效幅度越小，反之对象面积越小，设置的动效速度越快，动效幅度也就越大。根据使用场景选择动效在H5页面中，动效的作用是吸引用户的注意力、调动情绪，使其跟随内容情节的推进而产生变化。根据对象的物理特征选择动效除了根据对象大小和使用场景之外，设计人员还可以根据现实中对象的物理特征选择动效。5.2.2内页动效的层级设计人员在编辑内页动效时，往往会需要一组一组地展现内容，使内容流畅而赋有动感，此时就需要设计人员确定内容的展现顺序，如可将展现的内容分为不同的组，根据分组的先后顺序进行动效的展现，再根据展现的内容来调整展现速度的快慢。另外，在展现时，每个动效的展现时间最好控制在2~5秒，不要过于迅速，避免信息展示过快，造成用户无法完整查看；也不要过于缓慢，避免让用户感觉拖沓，留下不好的印象。5.2.3设计案例：制作微信红包H5页面的内页动效本例将使用MAKA制作微信红包H5页面的内页动效。在生成过程中可添加动效，使页面更具吸引力。在添加内页动效前需要先将红包页面导入H5编辑器中，进行动效的设计与制作。具体操作如下。创建“翻页H5”5.2.3设计案例：制作微信红包H5页面的内页动效选择“导入PSD文件”选项导入文件5.2.3设计案例：制作微信红包H5页面的内页动效调整图像位置选择图层设置动画5.2.3设计案例：制作微信红包H5页面的内页动效设置红包动画设置金币动画5.2.3设计案例：制作微信红包H5页面的内页动效设置大红包动画预览效果目录Content5.1H5页面动效设计基础5.2H5页面的内页动效设计5.3H5页面的转场动效设计5.4

项目实训5.3.1设计转场动效的注意事项设计人员在设计转场动效时，需要注意以下3点。转场过渡自然转场速度要合适转场动效样式要与H5内容相符5.3.2设计案例：制作微信红包H5页面的转场动效完成单个内页的动效设计后，可添加其他内页，并制作转场动效，让内页与内页间过渡自然。本例将在微信红包H5页面中添加其他页面，并制作退场动效，然后添加音乐和转场效果，使整个微信红包H5页面更加完整。具体操作如下。继续编辑微信红包H5页面添加“H5红包页面2”素材文件选择退场动画5.3.2设计案例：制作微信红包H5页面的转场动效5.3.2设计案例：制作微信红包H5页面的转场动效添加“H5红包页面3”素材并设置动效5.3.2设计案例：制作微信红包H5页面的转场动效选择音乐

设置页面效果预览页面效果目录Content5.1H5页面动效设计基础5.2H5页面的内页动效设计5.3

H5页面的转场动效设计5.4项目实训实训

使用MAKA制作招聘H5页面动效实训要求运用本项目所学知识，使用MAKA制作招聘H5页面动效。在设计时需要凸显招聘内容，然后使用动效让整个页面更具动感。完成后的参考效果如右图所示。实训

使用MAKA制作招聘H5页面动效制作思路（1）登录MAKA官方网站，进入MAKA首页，在左侧列表中单击“我的作品”超链接进入创建作品页面，在左侧选择“创建”选项卡，在右侧的面板中选择“翻页H5”选项，单击”创建“按钮。（2）进入空白模板编辑页面，在页面左上角单击“文件”，选择“导入PSD文件”选项，打开“导入文件”对话框，将“H5招聘页面1.psd”素材文件（配套资源：\素材\项目5\H5招聘页面1.psd）添加到页面中，等待上传结束后，单击“完成”按钮。（3）在页面下方单击按钮，使用相同的方法添加“H5招聘页面2.psd、H5招聘页面3.psd”素材文件（配套资源：\素材\项目5\H5招聘页面2.psd、H5招聘页面3.psd）。（4）选择第2张页面，选择“周末双休”图层，在页面右侧列表中选择“动画”/“元素动画”选项卡，在“进场动画”栏中单击“添加动画”按钮，在打开的下拉列表中选择“淡入”选项，设置“速度”为“4”，“延迟”为“3”。实训

使用MAKA制作招聘H5页面动效（5）选择其他文字图层，设置“进场动画”为“向左飞入”，“速度”为“4”，“延迟”为“2”。（6）选择第3张页面，依次选择文字图层，在页面右侧列表中选择“动画”/“元素动画”选项卡，在“进场动画”栏中单击“添加动画”按钮，在打开的下拉列表中选择“淡入”选项，设置“速度”为“3”，“延迟”为“2”。（7）单击“页面设置”超链接，设置“