writer.animator.animateCharacter in hide HanziWriter.Outline ，Animation stop

[wjg55555]

import React, { useEffect, useState } from "react";
import { SafeAreaView } from "react-native-safe-area-context";
import { Button, Text, View, ScrollView, TouchableOpacity } from "react-native";
import { GestureHandlerRootView } from "react-native-gesture-handler";
import { HanziWriter, useHanziWriter } from "@jamsch/react-native-hanzi-writer";

let num = 0;
let showOutline1 = true;
export default function ExamIndex(): React.JSX.Element {
const [showOutline, setShowOutline] = useState(true); //
const [num1, setNum1] = useState(1); //

const writer = useHanziWriter({ character: "好" });

const animatorState = writer.animator.useStore(s => s.state); //

const quizActive = writer.quiz.useStore(s => s.active); //

useEffect(() => {
console.log("animatorState :", animatorState);
}, [animatorState]);

const startAnimation = () => {
setNum1(num1 + 1);
writer.animator.animateCharacter({
delayBetweenStrokes: 800,
strokeDuration: 600,
onComplete() {
console.log("Animation complete!");
},
});
};
// 开始书写汉字
const startWrite = () => {
if (quizActive) writer.quiz.stop();
else
writer.quiz.start({
/** Optional. Default: 1. This can be set to make stroke grading more or less lenient. Closer to 0 the more strictly strokes are graded.

     */
    leniency: 1,
    /** Optional. Default: 0. */
    quizStartStrokeNum: 0,
    /** Highlights correct stroke (uses <QuizMistakeHighlighter />) after incorrect attempts. Set to `false` to disable. */
    showHintAfterMisses: 2,
    onComplete({ totalMistakes }) {
      console.log(`Quiz complete! You made a total of ${totalMistakes} mistakes`);
    },
    onCorrectStroke() {
      console.log("onCorrectStroke");
    },
    onMistake(strokeData) {
      console.log("onMistake", strokeData);
    },
  });

};
const showHideOutline = () => {
console.log("animatorState --:", animatorState, num, showOutline, new Date().valueOf());

showOutline1 = !showOutline1;
setShowOutline(!showOutline);

};

return (
<SafeAreaView edges={["top"]}>

<GestureHandlerRootView style={{ flex: 1, backgroundColor: "#adf" }} key={num1}>

{/** Include all the HanziWriter.XXX components here /}
{/* Optional, grid lines to help draw the character */}
<HanziWriter.GridLines color="#ddd" />

        <HanziWriter.Svg>
          {/* The outline is laid under the character  */}
          {showOutline ? <HanziWriter.Outline color="#ccc" /> : <></>}
          {/** The character is displayed on top. Animations run here. Quizzing will hide it  */}
          <HanziWriter.Character color="#555" />
          {/** Quiz strokes display after every correct stroke in quiz mode */}
          <HanziWriter.QuizStrokes />
          {/** The mistake highligher will animate and fade out a stroke in quiz mode*/}
          <HanziWriter.QuizMistakeHighlighter color="#539bf5" strokeDuration={400} />
        </HanziWriter.Svg>
      </HanziWriter>
    </GestureHandlerRootView>
    <View style={pubSty.f_r}>
      <TouchableOpacity
        onPress={() => startAnimation()}
        style={[pubSty.f_1, pubSty.f_r_c, { backgroundColor: "#adf", padding: 10, margin: 10 }]}
      >
        <Text>开始{num1}</Text>
      </TouchableOpacity>
      <TouchableOpacity
        onPress={() => startWrite()}
        style={[pubSty.f_1, pubSty.f_r_c, { backgroundColor: "#adf", padding: 10, margin: 10 }]}
      >
        <Text>输入</Text>
      </TouchableOpacity>
      <TouchableOpacity
        onPress={() => showHideOutline()}
        style={[pubSty.f_1, pubSty.f_r_c, { backgroundColor: "#adf", padding: 10, margin: 10 }]}
      >
        <Text>
          {showOutline ? "隐藏" : "显示"}
          {num}
        </Text>
      </TouchableOpacity>
    </View>
  </ScrollView>
</SafeAreaView>

);
}