search

chanind / hanzi-writer

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

How to loop the animation of a specific stroke? #278

Closed rodrigomorales1 closed 1 year ago

rodrigomorales1 commented 1 year ago

What I want to do

I want to infinite loop the 3rd stroke of the character 迄 (i.e. the stroke "乙" that is below "𠂉").

What I've tried

I'm aware of the function animateStroke. By using this function, I can animate the stroke "乙" of the character "迄" (see minimal working example below)

<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.animateStroke(2); // stroke numbers are 0-indexed
  </script>
</body>

I'm also aware that the function animateStroke accepts an onComplete callback. By using this callback, I was able to repeat the desired stroke a specific number times (not infinite repetitions). See minimal working example below.

<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.animateStroke(2, {
      onComplete: function() {
        writer.animateStroke(2, {
          onComplete: function() {
            writer.animateStroke(2)
          }
        })
      }
    });
  </script>
</body>

As you can see above, by using nested onComplete, the stroke is repeated 3 times. However, as I mentioned, I want the stroke to be infinitely repeated.

rodrigomorales1 commented 1 year ago

The following does the job.

<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,
    });

    function foo() {
      writer.animateStroke(2, {
        onComplete: foo
      })
    }

    foo()
  </script>
</body>

Alternatively, you can also set a delay between the animation of that specific stroke.

<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,
    });

    var delayBetweenAnimations = 1000;

    function foo() {
      writer.animateStroke(2, {
        onComplete: function() {
          setTimeout(
            function() {
              foo()
          }, delayBetweenAnimations);
        }
      })
    }

    foo()
  </script>
</body>