简介

加载图片序列的 2 种方法封装:

- JsAnimationKeyframe 方法: 原生 js 加载图片序列
- ThreeAnimationKeyframe 方法: three.js 加载图片序列

如何开发

``bash


安装依赖

npm ci

发布前构建

npm run build

发布

npm publish
`

如何使用

#### 项目依赖安装

`bash


安装 three.js

npm install three --save

安装 @qt-react/animation-keyframe

npm install ync-react-animation-keyframe
`

#### 项目中调用

`js
import React, { useState, useEffect } from 'react';
import { JsAnimationKeyframe, ThreeAnimationKeyframe } from 'ync-react-animation-keyframe';

function App() {
let [images, setImages] = useState([]);

// == 图片动态加载
useEffect(() => {
Promise.all([
import('../../source/01/0.jpg'),
import('../../source/01/1.jpg'),
import('../../source/01/2.jpg'),
import('../../source/01/3.jpg'),
import('../../source/01/4.jpg'),
import('../../source/01/5.jpg'),
]).then((res) => {
setImages(res.map(i => i.default));
})
}, [])

return <>
seconds={150}
images={images}
style={{
width: '100%',
height: '100vh'
}}
/>
seconds={75}
images={images}
width={(window.innerHeight - 410) * (7/5.37)}
height={window.innerHeight - 410}
/>
;
}
``

JsAnimationKeyframe 参数描述

| 参数名 | 类型 | 是否必须 | 说明 | 默认值 |
| --- | --- | ---- | --- | --- |
| seconds | number | 否 | 每张图片切换时间，单位毫秒 | 150 |
| images | array | 否 | 动态 import 引入的图片列表 | [] |
| style | object | 否 | 被渲染的每张照片的样式对象 | {} |

ThreeAnimationKeyframe 参数描述

| 参数名 | 类型 | 是否必须 | 说明 | 默认值 |
| --- | --- | ---- | --- | --- |
| seconds | number | 否 | 每张图片切换时间，单位毫秒 | 150 |
| images | array | 否 | 动态 import 引入的图片列表 | [] |
| width | number | 否 | 图片宽度 | window.innderWidth |
| height | number | 否 | 图片高度 | window.innderHeight |
| style | object | 否 | 容器的样式 | {} |

demo 地址

- JsAnimationKeyframe 实现 demo
- ThreeAnimationKeyframe 实现 demo
- 年度听书报告

参考地址

- 帧动画多种实现方式
- 震惊！100张图片竟能这样加载
- 炫酷H5中序列图片视频化播放的高性能实现
- Three.js 动效方案
- lottie系列文章(一)：lottie介绍