新媒体运营新 课件：H5的动画设计 模块1.H5动画设计.pptVIP

环节9 SVG 矢量图形 AI，CDR、PS、FLASH 制作SVG动画需要满足什么条件： 颜色纯色，不透明度为100% 图形路径必须是复合路径 SVG动画设置要点： 新建SVG容器来放置需要用到的SVG 描绘、出现、擦除 慕课视频片段 视频名称：环节9SVG.mp4 温馨提示：此视频框在点击“上传手机课件”时会进行转换，用手机进行观看时则会变为可点击的视频。此视频框可被拖动移位和修改大小 谢谢 * * H5中出现频率最高的组件是什么？我会毫不犹?地给出答案 — 动效。阅尽万千案例，很难找到一个完 全不带动效的H5。作为H5制作中最基础也最实用的一项技巧，动效的添加可以渲染出更加逼真的材质感和空间感，营造 出一种“流动之美”。它效果多样，变化万千，使用又极为便利，无论对基础使用者还是H5高手而言，都是一项不可多得 的利器。 * 目前，使用Gif素材取代传统的静态素材来制作H5微海报，已经成为H5经典技法之一。下面先让我们来欣赏几个精 * 由于原Gif素材为自动播放、循环播放，iH5工具完全保留了原素材的动画属性，将进行自动、 循环播放，由此产生了非常流畅、逼真的动画体验。 在本例中，我们使用Gif素材自带的动画效果，营造出了极具科技感的光效。除此之外，Gif动画还可以充当页面的装 饰，尤其适合模拟人物表情、肢体动作等小动画，甚至可以取代小视频来丰富案例的故事表现力。合理利用Gif素材，可以 营造更具冲击力的视效，提升案例的趣味性，还请读者熟练掌握这一技法。 * * 新媒体运营A 王小红/ 项目四 H5制作与营销 任务1 H5的营销价值 任务2 提升H5的传播力 任务3 H5策划与运营 模块1 H5动画设计 所谓动效设计， 就是精准设定四大要素的过程 动效 类型 方向 延时 时长 1.依照案例格调选择匹配的动效类型 作为一个地产广告，使用舒缓的音乐、优雅的文案营造出??的家居氛围。相应地，设计师大量选用了淡入、长距离淡入等节?缓慢、情绪平和的动效，从而更好地烘托出案例的氛围。 一个运动品牌的营销广告，为了突出产品的青春活力，要求动画段落感强、有力度和速度感，设计师采用了飞入、长距离飞入等动画效果。 动效有时也能够承担一些拟物动画。此时就需要根据素材的实际运动状态来选取合适的动效了，其中面包的上下跳动、左右晃动，音符的飞出，汗珠的旋转离开等都是使用动效营造出的动画效果。 2.按照案例节奏设置动效时长 系统为所有动效设定了1s的初始时长，通过调整实际时长，我们可以自由控制动效的播放时长，从而影响到它的播放速度。通过创新性地调节动效的速度、时长，以匹配音乐、视频、文案或动画的节?，或与不同动效进行衔接， 可以实现动人的节奏感。 3.兼顾动效方向的多样性 iH5为每一种动效都提供了多达四个方向的可选效果，那么在实际使用中，如果能创新性地进行选取，一方面可避免同质动效过多造成的视觉疲劳，同时还能模拟出更逼真的动态效果。在有些案例中，我们需要处理同组、多个相似素材的进场，如果采用同向成批发送的形式，将会非常刻板。所以此时我们可以选用两批或多批相对发送的形式。同理，对于组成同一张图片的素材碎片，也可以使用多向进入的手法，营造出更具有视觉冲击力的效果 4.动效的创新性应用技巧 任何酷炫的动画效果都是通过元动效的组合和编排而成。动效的组合，既包括同一个页面中多种动效的组合，也包括为同一个对象添加的一组动效序列。一旦页面中存在多个动效，就需要对其出场顺序和时机进行编排。 动效 慕课视频片段 视频名称：环节1动效.mp4 温馨提示：此视频框在点击“上传手机课件”时会进行转换，用手机进行观看时则会变为可点击的视频。此视频框可被拖动移位和修改大小 环节2 Gif动画 制作工具：AE、Photoshop、Flash 一些常用的Gif资源网站 soogif：/ 也许是最好用的中文gif网站。保存gif图时还可以选择“表情包”“公众号”“原图下载”三个选项，可以自动帮你保存为合适的大小。自带“gif压缩”“gif裁剪”“gif编辑”工具，可以很方便地处理你的动图。 Giphy：/ 功能强大的Gif素材搜索引擎，支持分类索引。并提供一个简单易用的Gif在线制作工具。 Make a Gif：/ 提供基本的Gif素材库和在线制作工具。 Gifparanoia：/index.php 一个由两位艺术家经营的Gif画廊，展出一些新锐而极具艺术气息的Gif作品（非开源）。 此外，读者还可以通过录屏、视频截图等方法得到Gif文件。 Gif动画 慕课视频片段 视频名称：环节2GIF.mp4 温馨提示：此视频框在点击“上传手机课件”时会进行转换，用手机进行观看时则会变为可点击的视频。此视频框可被拖动移位和