ync-react-animation-keyframe
v1.2.0
Published
React,animation,keyframe
Downloads
5
Readme
简介
加载图片序列的 2 种方法封装:
- JsAnimationKeyframe 方法: 原生 js 加载图片序列
- ThreeAnimationKeyframe 方法: three.js 加载图片序列
如何开发
# 安装依赖
npm ci
# 发布前构建
npm run build
# 发布
npm publish如何使用
项目依赖安装
# 安装 three.js
npm install three --save
# 安装 @qt-react/animation-keyframe
npm install ync-react-animation-keyframe项目中调用
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 <>
<JsAnimationKeyframe
seconds={150}
images={images}
style={{
width: '100%',
height: '100vh'
}}
/>
<ThreeAnimationKeyframe
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 | 否 | 容器的样式 | {} |