如何在 React 中为 state 值变化设置动画？

Question

I have a PdfViewer dialog in my webapp created in React, it displays pdf-s using this package: https://github.com/wojtekmaj/react-pdf , it has a scale property to define the scale of the pdf viewer component as such:

<Page pageNumber={pageNumber} scale={scale} height={props.height} />

The scale property is held in a state and is changed by controls on the page. It is working correctly, the only problem is that it doesn't animate the transition when changing the scale. What is the proper way of setting the scale state smoothly?

Answer 1

I haven't found such option in their github, so you would need to implement it yourself.

You will need:

• Two state values - one for target scale, and one for current scale.
• Knowledge of setTimeout
• A bit of arithmetic

Basic and very slow example:

  // initially we set both states to same value
  let [target_scale, set_target_scale] = React.useState(1);
  let [current_scale, set_current_scale] = React.useState(1);
  let [step, set_step] = React.useState(0);

  // we need to get our step. We calculate it when target changes
  React.useEffect(
    function () {
      // step is amount that we want to animate on each frame
      // 1000 is animation duration (in this case it is one second), and 16 is amount of ms to get 60fps
      // 1000 / 16 will give us amount of steps to perform animation. In this case it would be 62.5 frames. Math floor wil make it 62 frames
      // Note that if current_scale is larger then target scale, we will get negative value
      set_step((target_scale - current_scale) / Math.ceil(1000 / 16));
    },
    [target_scale]
  );

  // Now we need and effect that will look for state changes and run our animation
  React.useEffect(
    function () {
      // we don't need it to run if both scales are the same
      // because all numbers in JS are doubles, we want to round it up, to not miss this point
      if (current_scale.toFixed(2) === target_scale.toFixed(2)) return;
      let timeout_id = window.setTimeout(
        () => set_current_scale(current_scale + step),
        16
      );
      return () => window.clearTimeout(timeout_id);
    },
    [target_scale, current_scale, step]
  );

Here is working sample:

https://jsfiddle.net/136wjope/1/

Awesome part here is that React will greatly optimize this stuff. Bad part is that it is messy and, probably, buggy. Also there is no nice easing here. But at least you know how to do it you need. So, to not waste work time, I suggest you to use react-spring library. It is velocity based and it makes your animations feel good. Also it can animate arbitrary values, which is also very awesome.

Here all the above remade for react-spring: https://codesandbox.io/s/clever-grothendieck-bxo6g?file=/src/App.js

Disclaimer : I have practically zero experience with react-spring, so you definitely should read documentation and look at examples.