# GIF Item 2

<scene-items-gifItem2 />

### 实现原理

放映机原理;设置一个可视窗口大小,不断更改背后的图片位置,快速刷新,达到动图的效果

### 实现步骤

前置条件: 编写好一个 GIF 的 Item(可查看下边的代码)

1.创建 canvas 标签,并实例化视图(view) 和 场景 (scene)

2.实例化 GifItem, 将图片传入

3.设置 GifItem 的窗口大小,也是每一帧的宽度和高度

4.将实例化好的 GifItem 添加到场景中

5.设置定时器,不断刷新视图(view)


::: details 查看代码
<<< @/docs/.vuepress/components/scene/items/gifItem2.vue
:::

::: tip 注意

1.本示例的图片素材源宽度为8000,高度为500,总共16帧

2.建议图片帧列为每一帧紧密排列,否则需要更改 Item 的绘制方法

3.绘制方法中的9个参数,依次是 图片-在画布上放置图像的 x 坐标位置-在画布上放置图像的 y 坐标位置-要使用的图像的宽度-要使用的图像的高度-开始剪切的 x 坐标位置-开始剪切的 y 坐标位置-被剪切图像的宽度-被剪切图像的高度,
其中前5个参数不建议修改,后边4个参数即可视窗口位置及大小;

4.如果图片帧列不是从左向右一列排序,则需要配合修改第3点中 (开始剪切的 x 坐标位置-开始剪切的 y 坐标位置) 这两个参数

:::