画像ファイルをタイムラプスで描画するコンポーネント
npm install react-timelapse1. リポジトリのクローン
```
git clone https://github.com/ototonari/timelapse.git
cd timelapse/example
2. yarnを利用する場合
``
yarn install
yarn start
(2. npm を利用する場合)
``
npm install
npm run start
1. yarnを使う
``
yarn add react-timelapse
(1. npmを使う)
``
npm install --save react-timelapse
`jsx
import React, { useState } from 'react';
import { sampleImageCreator } from "./lib/Utils";
import { Timelapse } from "react-timelapse"
// たとえばこんな感じ(srcはurlでも可能)
const images = [
{
src: "../public/assets/sample/img0001.jpg"
alt: "sampleImage"
}
]
const App: React.FC = () => {
const [timelapseHandle, setTimelapseHandle] = useState
const startTimelapse = () => {
// 読み込みが終わり次第、再生する場合はこのようにする
setTimelapseHandle(true)
}
return (
timelapseHandle={timelapseHandle} // boolean を渡すことで再生、停止が行える(デフォルトはnull)
preloadedCallback={startTimelapse} // 画像の読み込みが終わった時に呼ばれる関数
images={images} // 描画する画像オブジェクトを渡す
width={864} // 描画ウィンドウの幅
height={540} // 描画ウィンドウの高さ
/>
);
}
export default App;
`
`
.
├── dist // npm モジュール公開
│ ├── index.js
│ └── package.json // npm publish
├── example // 動作確認
│ ├── public
│ ├── src
│ └── tsconfig.json // npm run start | yarn start
├── src // 開発環境
│ ├── component
│ ├── index.tsx
│ └── lib
└── tsconfig.json // tsx compile
``