Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

react component for sequence playing in <div>

NotificationsYou must be signed in to change notification settings

kimcoder/react-sequence-player

Repository files navigation

ReactJsTypescriptDownload Count

Install

// npmnpm install react-sequence-player --save// yarnyarn add react-sequence-player

Usage

import SequencePlayer from 'react-sequence-player';import SequenceImage from 'your sequence image';const SomeComponent = () => {    const playerRef = React.useRef(null);    const handleControl = (action) => () => {      switch (action) {        case 'play': playerRef.current.play(); break;        case 'pause': playerRef.current.pause(); break;        case 'resume': playerRef.current.resume(); break;        case 'reverse': playerRef.current.reverse(); break;      }    };    return (        <div>            <button onClick={handleControl('play')}>PLAY</button>            <button onClick={handleControl('pause')}>PAUSE</button>            <button onClick={handleControl('resume')}>RESUME</button>            <button onClick={handleControl('reverse')}>REVERSE PLAY</button>            <SequencePlayer                image={SampleImage}                data={[                    { x: -700, y: 0 },                    { x: -600, y: 0 },                    { x: -500, y: 0 },                    { x: -400, y: 0 },                    { x: -300, y: 0 },                    { x: -200, y: 0 },                    { x: -100, y: 0 },                    { x: 0, y: 0 }                ]}                playerSize={{ width: 100, height: 230 }}                imageSize={{ width: 800, height: 230 }}                ref={playerRef}            />        </div>    );};

If You want to see more detail source,

Props

NameTypeRequiredDescriptionDefault
imageStringRequiredimage resource
dataArray<{ x: number; y: number; }>Requiredimage sequence position array
[{ x: 0, y: 0 }, { x: 100, y: 0 }, { x: 100, y: 0 }]
playerSize{ width: number; height: number; }Requiredimage sprite contrainer(=div) size
imageSize{ width: number; height: number; }Requiredimage resource's size0.5
delayNumberOptionalsequence update delay50
loggingBooleanOptionalconsole logging in player componentfalse
styleReact.CSSPropertiesOptionalstyle object for image sprite contrainerundefined
forMobileBooleanOptionalToggle GPU Renderfalse
onLoad() => voidOptionalimage onLoad event callbackundefined
onStart() => voidOptionalsequence event callback when startedundefined
onPaused() => voidOptionalsequence event callback when pausedundefined
onComplete() => voidOptionalsequence event callback when completedundefined

Development

directory & source

  • ./example/ : storybook source for testing component
  • ./src/ : component source
  • ./dist/ : component distribution
  • ./rollup.config.js : rollup configure.

scripts

// npmnpm run dev             // developing a componentnpm run build           // build a component by rollupnpm run build:watch     // build watch mode// yarnyarn exampleyarn buildyarn buidl:watch

About

react component for sequence playing in <div>

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Contributors2

  •  
  •  
[8]ページ先頭
©2009-2025 Movatter.jp