序列帧播放器

线上预览地址：https://jianli.pnote.net/viewer/

基于图片序列帧，3D可视化播放器

• 移动端触控
• 鼠标滚轮
• 自动播放
• 惯性播放
• 控制播放速度

Example

import Viewer from "viewer";    //  Import as a module

const images = ['images url', 'images url', '...'];
const viewer = new Viewer({
    el: document.querySelector('#base'),
    images,
    interval: 1,
    autoplay: false,
    minScale: 1,
    maxScale: 5,
    animate: true
});

await viewer.load();

Constructor

Viewer(Options)

interface Options {
    el: HTMLDivElement,      //  容器元素
    images: string[];       //  序列帧链接
    interval?: number;     //  滑动间隔（切换图片的速率）
    autoplay?: boolean;   //  是否自动播放
    autoplaySpeed?: number;   //  自动播放速度
    minScale?: number;    //  缩放最小比例
    maxScale?: number;   //  缩放最大比例
    animate?: boolean;  //  缩放是否使用动画
    zoomDisableRotation?: boolean;    //  模型放大后是否禁用旋转功能
}

Properties

• scale:number：设置缩放比例，默认值1

Methods

• load() ：异步加载images图片资源，并初始化容器元素
• togglePlay() ：开始||停止自动播放序列
• fullscreen() ：全屏容器元素
• prev() ：加载到上一帧序列
• next() ：加载到下一帧序列

Events

• onFrameUpdate(index: number, direction: FrameStatus) ：切换序列帧时触发，返回索引和方向
• onScaleUpdate(index: number, scale: number) ：缩放比例变更时触发，返回索引和比例大小
• onTransform({x, y, scale}: { x: number, y: number, scale: number }) ：实时返回当前序列索引、平移坐标、比例大小