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