search

chanind / hanzi-writer

Chinese character stroke order animations and practice quizzes
https://hanziwriter.org
MIT License
3.44k stars 534 forks source link

Draw a specific stroke and make previous strokes to be already drawn #279

Open rodrigomorales1 opened 1 year ago

rodrigomorales1 commented 1 year ago

What I want to do

I want to only show the animation of the 3rd stroke of the character 迄 (i.e. the stroke "乙" that is below "𠂉"), and I want the previous strokes to be already drawn.

What I tried (attempt 1)

I obtained the desired behavior by drawing the previous strokes at a very fast speed and when the desired stroke is about to be drawn, the speed is changed to a slower speed.

<head>
  <script src="https://cdn.jsdelivr.net/npm/hanzi-writer@3.2/dist/hanzi-writer.min.js"></script>
</head>
<body>
  <div id="character-target-div"></div>
  <script>
    var writer = HanziWriter.create('character-target-div', '迄', {
      width: 100,
      height: 100,
      padding: 5,
    });

    writer.hideCharacter()
    writer._options.strokeAnimationSpeed = 1000

    writer.animateStroke(0, {
      onComplete: function() {
        writer.animateStroke(1, {
          onComplete: function() {
            writer._options.strokeAnimationSpeed = 0.1
            writer.animateStroke(2)
          }})
      }})

  </script>
</body>

As you can see above, the value of strokeAnimationSpeed is changed by accessing its value through _options. However, this method is not recommended, as mentioned in this reply in which @chaning mentioned that any instance var with a _ prefix is not considered part of the public API and could be removed in future versions.

What I tried (attempt 2)

I also tried specifying the option strokeAnimationSpeed to animateStroke, but there was no effect caused. Apparently the only option that animateStroke accepts is onComplete.

<head>
  <script src="https://cdn.jsdelivr.net/npm/hanzi-writer@3.2/dist/hanzi-writer.min.js"></script>
</head>
<body>
  <div id="character-target-div"></div>
  <script>
    var writer = HanziWriter.create('character-target-div', '迄', {
      width: 100,
      height: 100,
      padding: 5,
    });

    writer.hideCharacter()
    writer.animateStroke(0, {
      strokeAnimationSpeed: 1000,
      onComplete: function() {
        writer.animateStroke(1, {
          strokeAnimationSpeed: 1000,
          onComplete: function() {
            writer.animateStroke(2, {
              strokeAnimationSpeed: 0.1
            })
          }})
      }})

  </script>
</body>

Note

I'd appreciate if someone could suggest a better alternative. For the time being, I'll be using the method I described above in (attempt 1).