@ray-js/mini-lottie v0.1.0

English | 简体中文

@ray-js/mini-lottie

mini program Lottie

Installation

$ npm install @ray-js/mini-lottie
# or
$ yarn add @ray-js/mini-lottie

Usage

Basic Usage

import RayMiniLottie from '@ray-js/mini-lottie';

const lottieSource = require('xxx.json');

const [play, setPlay] = useState(false);

useEffect(() => {
  // Simulate click to play
  setTimeout(() => {
    setPlay(true);
  }, 3000);
}, []);

<RayMiniLottie
  source={lottieSource}
  width={375}
  height={135}
  loop={false}
  autoplay={false}
  play={play}
  style={{
    background: '#eee',
  }}
  onRenderFinished={() => {
    console.log('render finished');
  }}
/>;

Advance Usage 1: Switch the playback source and status.

<RayMiniLottie
  source={lottieSourceList[0]}
  className="mini-lottie111"
  width={355}
  height={105}
  play={play}
  style={{
    background: '#999',
    borderRadius: '10px',
  }}
  onRenderFinished={() => {
    console.log('onRenderFinished run');
  }}
/>

Advance Usage 2: Display in Popup

import RayMiniLottie from '@ray-js/mini-lottie';
import lottieSource from './example/path/xxx.json';
// Note: Since the Popup component is not displayed immediately, an isVisible check is required
{
  isVisible && (
    <Popup
      show={isVisible}
      overlayStyle={{
        backgroundColor: 'rgba(0, 0, 0, 0.4)',
      }}
      onClickOverlay={() => {
        setIsVisible(false);
      }}
      customStyle={{ backgroundColor: 'transparent' }}
    >
      <RayMiniLottie
        source={LottieSource}
        width={300}
        height={95}
        style={{
          background: '#eee',
        }}
      />
    </Popup>
  );
}

FAQ:

• 1. Uncaught (in promise) DOMException: Failed to execute 'drawImage' on 'CanvasRenderingContext2D': The HTMLImageElement provided is in the 'broken' state.
  • Lottie json file with base64 image data is not supported