视频教程

【老版】无广告视频网址 优酷视频网址

一、案例效果

案例效果一

《我们之间就一个字》

案例效果二

《2019HTML5数字营销大会》

二、应用场景

序列帧是可实现多张相同尺寸图片连续播放的组件，例如电影是25帧，就是每秒播放25张连续的图片。主要用于：模拟视频动画、展示三维模型等。可以代替GIF图，简短的视频特效画面，主要用于：模拟视频动画、展示三维模型等。

三、素材准备

序列帧素材在文末附件可以下载。

很多派友为了方便，会直接放一张GIF素材在H5中。殊不知，一旦GIF过大， 对于手机性能的要求就非常高了，为了大部分的手机可以流畅播放H5，进行交互，就需要对GIF图片进行处理，导出序列帧图片，然后再上传到编辑器中进行设置。

不管是视频还是GIF图，他们都是由一张张不同动作的图片组成的，这每一张图片，我们称之为视频或者GIF的帧或者帧图片。我们所说的导出序列帧，就是导出这一张张的图片。

但又有一个问题，我们导出多少张图片才最合适呢？需要简单了解下帧速率，帧速率是指1S播放多少张帧图片，播放的帧图片越多，形成的视频或者动图更加细腻，成品质量越高。但同时也对手机性能要求较高。

我们需要兼顾两者，经过意派设计师多次测试，帧速率设置为8～15帧是较合适的，整个序列帧素材大小不至于过大，以免造成播放卡顿，也能让整个作品的动态质量相对较高。

用PS导出的操作步骤：

设置相关参数：

导出后的图片效果：

图片会自动编号，所以不用担心会出现错乱的问题，另外，建议图片名称中不要带有文字，防止出现排序错误。

导出后的序列帧图片不宜太大，尽量压缩（可用TinyPng在线压缩）；一般序列在8-22帧，可根据需求加减。

三、组件用法

基本用法

1.鼠标移动到图片组件的位置，出现多个组件，移动到序列帧组件的位置，点击添加序列帧素材。

2.点击序列帧后显示素材弹窗，有多个方式可以添加序列帧的素材。

（1）连续点击导入按钮

（2）选中多张图片，点击“插入/替换”。

（3）按分类方式插入

3.播放序列帧的方式有多种。

（1）选中序列帧组件，勾选自动播放

（2）可以给序列帧添加动画，播放或暂停播放或停止播放

（3）触发器：序列帧播放控制

4.其他细节设置

（1）排序（正向或反向）

（2）循环播放

（3）可滑动

（4）重力感应

（5）播放完返回开头

（6）滑动方向：横向/竖向

（7）播放模式：顺序/倒序/选择。顺序与倒序都是从头播到尾，选择是任意选择中间帧来播放。

使用方法

播放模式： － 顺序／倒序：播放的方向从前往后/从后往前 － 选择播放：可指定播放区间 循环播放：开始播放后可以反复播放 自动播放：勾选后自动开始播放 可滑动：可以用手势控制滑动 重力感应：在移动端可以使用重力感应来影响序列帧播放（必须一起勾选可滑动才可以生效） 播放完返回开头：播放完后返回到第一帧

高级用法

1. 序列帧每一帧都可以做帧触发

2.跟序列帧有关的触发行为。

有关序列帧组件的作品导出后的问题解决方案：

序列帧图片加载方式为Ajax，要求作品案例必须是通过发布网址打开才能正常播放。

【解决方式】

方式1：如果导出的包是需要放自己服务器发布的，那放到服务器上后就能正常显示了;

方式2：如果是离线播放，可以把序列帧换成幻灯;

方式3：谷歌浏览器启动打开时，带上参数 --allow-file-access-from-files 可解决这个问题。参考资料：谷歌浏览器请求本地文件--allow-file-access-from-files-CSDN博客windows电脑的话，在桌面chrome图标这里，加上这个参数后，重新打开chrome浏览器，就能正常加载本地跨域的图片了。