react-native-kanji-animation v1.3.0

react-native-kanji-animation

Installation

react-native-kanji-animation depends on react-native-svg for animation. If you have not installed react-native-svg, follow these instructions to install.

Install the library using npm or yarn:

# using npm
$ npm install react-native-kanji-animation --save

# using yarn
$ yarn add react-native-kanji-animation

Usage

import { Kanji } from 'react-native-kanji-animation';

render() {
  return (
    <Kanji
      ref={el => kanjiExample = el}
      element="書"
      size={90}
      placeholder={true}
      duration={700}
      step={6}
      onPress={() => kanjiExample.animate()}
    />
  );
}

Another Example

<Kanji
  ref={e => kanjiExample = e}
  element={'字'}
  size={200}
  pathProps={{
    strokeLinecap: 'square',
    strokeWidth: 5,
    stroke: 'red'
  }}
  placeholder={true}
  placeholderProps={{
    strokeLinecap: 'round',
    strokeWidth: 8,
    stroke: 'green'
  }}
  guideProps={{
    strokeWidth: 15,
    stroke: 'blue',
    strokeOpacity: 0.7
  }}
  duration={1000}
  step={0}
  onPress={() => {
    kanjiExample.animate({
      previousStep: false,
      step: 4
    });
  }}
/>

Reference

Props

Methods

animate(options?, animationEndCallback?)

Starts the kanji stroke animation with an options and callback after the animation ends.

Options: | Name | Type | Description | | ------------------------------ | ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------ | | hideGuide | bool | Set to true to hide the Guide when the animation occurs | | previousStep | bool | Will show the animation of first until n-th stroke if it's true or only the n-th stroke if it's false. By default will be the same as props. | | step | number | Indicating the current stroke. Show the first until n-th stroke (previousStep is true) or only the n-th stroke (previousStep is false). By default will be the same as props. |

Example:

this.kanji.animate({
  step: 5,
  previousStep: true,
  hideGuide: true
}, () => console.log("animation finished"));

numOfStrokes()

Return number. Obtain the total number of stroke of the current kanji element.

Example:

console.log(this.kanji.numOfStrokes());

strokeProperties()

Return Array of SVGPathProperties. Obtain the SVG Path Properties for each stroke with the following methods:

• getTotalLength: () => number;
• getPointAtLength: (fractionLength: number) => Point;
• getTangentAtLength: (fractionLength: number) => Point;
• getPropertiesAtLength: (fractionLength: number) => PointProperties;
• getParts: () => PartProperties[];

Example:

console.log(this.kanji.strokeProperties()[0].getTotalLength());