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

| Name | Type | Default | Description | | ------------------------------ | ---------------- | -------------- | ------------------------------------------------------------------------------------------------------------------------------------------ | | containerStyle | object | null | Style props for canvas | | easing | func | null | Easing function for the animation | | duration | number | 250 | Timing for the kanji animation every stroke (in ms) |
| element | string | REQUIRED | Kanji character to be drawn | | guideProps | object | null | Properties for Animation Guide based on Path Component of react-native-svg. Click here for more information. Recommended to use only stroke, strokeWidth, and strokeLinecap. | | onLongPress | func | null | Called when the character is long pressed |
| onPress | func | null | Called when the character is pressed |
| pathProps | object | null | Properties for Kanji stroke based on Path Component of react-native-svg. Click here for more information. Recommended to use only stroke, strokeWidth, and strokeLinecap. | | placeholder | bool | false | Kanji character to be drawn unaffected by the animation | | placeholderProps | object | null | Properties for Placeholder Kanji stroke based on Path Component of react-native-svg. Click here for more information. Recommended to use only stroke, strokeWidth, and strokeLinecap. |
| previousStep | bool | true | Show the previous stroke of the selected step. Will show the first until n-th stroke if it's true or only the n-th stroke if it's false | | size | number | 109 | The size (width and height) of the kanji character | | step | number | null | 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 it will point to the last stroke. |

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());