.

2.序列帧/ImageSequence

老赵发表于:2015年01月03日 20:34:39更新于:2019年11月21日 15:26:10

视频教程

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


时间

讲解内容

IMAGE SEQUENCE使用介绍




00:08

插入IMAGE SEQUENCE

01:04

常用交互效果设定

01:32

循环播放

02:13

自动播放

02:59

重力感应


一、案例效果

案例效果一


00157fd9bd48f06416fb0ec9df8cdce    00157fd98fc170aa005f882ec16e912

《我们之间就一个字》


案例效果二

0015cb04a5d70140d2915b7969dbb59

《2019HTML5数字营销大会》


二、应用场景

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


三、素材准备

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

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

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

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

image.png

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

用PS导出的操作步骤:

image.png

设置相关参数:

image.png

导出后的图片效果:

image.png

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

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


三、组件用法

基本用法

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

0015cb04dea8874e7bcae86ff747d95


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

(1)连续点击导入按钮

00157fdadf176fec1e197d3e208abfa


(2)选中多张图片,点击“插入/替换”。

00157fdaf86c47f2e4c1893e64c87f4


(3)按分类方式插入

00157fdaf996fdbb78250fe623694a6


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

(1)选中序列帧组件,勾选自动播放

00157fda1b3305e830deb032a8412ec


(2)可以给序列帧添加动画,播放或暂停播放或停止播放

00157fda245c436eadfeaf176851628


(3)触发器:序列帧播放控制

00157fda311aaa9dfb8c0559da82ebb


4.其他细节设置

(1)排序(正向或反向)

00157fda47517bfecf88f44907868a9


(2)循环播放

00157fda4ddb68f92841127949957e2


(3)可滑动

00157fda6313a075b24499bebc6b1a3


(4)重力感应

00157fda7e508b3adf3c34e55b53f36


(5)播放完返回开头

00157fda64bf044d3c430dbd6a18098


(6)滑动方向:横向/竖向

00157fda65b0baf9abc37bd8a0a2628


(7)播放模式:顺序/倒序/选择。顺序与倒序都是从头播到尾,选择是任意选择中间帧来播放。

00157fda672ebcce10393d60b03a95b     00157fda6896b33552601980bafdeef

使用方法

blob.png
  • 播放模式:
    - 顺序/倒序:播放的方向从前往后/从后往前
    - 选择播放:可指定播放区间

  • 循环播放:开始播放后可以反复播放

  • 自动播放:勾选后自动开始播放

  • 可滑动:可以用手势控制滑动

  • 重力感应:在移动端可以使用重力感应来影响序列帧播放(必须一起勾选可滑动才可以生效)

  • 播放完返回开头:播放完后返回到第一帧



高级用法

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

0015cb058a825ee3f4c9e94cb19d40a


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

0015cb05ae1076d8f42a2da2282deaf


附件:序列帧素材.zip • 4.92MB • 下载

--------- 不了解设计的程序员不是好客服 ---------------