基于 React 和 GSAP 实现数字动画

[felix-cao]

如上图，integer 整数和 float 是有滚动动画的，我喜欢用最少，最简洁的代码实现功能，这个 component 比较轻，所以使用了 React 16.8 增加的 Hooks Feature，直接上代码：

一、整数动画

import gsap from 'gsap';
import React, { useState } from 'react';
const XintegerByNumber = (props: any) => {
  const [stats, setStats] = useState({ value: 0 })
  let gsapId: any;
  useEffect(() => {
    const target = { value: stats.value };
    gsapId = gsap.to(target, {
      duration: 3,
      ease: "none",
      value: props.value,
      roundProps: "value",
      onUpdate: () => setStats({ value: target.value }),
    });
    return () => gsapId && gsapId.kill();
  }, []);

  return (
    <div style={{...props.style, display: 'inline'}}>
      <span>{stats.value}</span>
      {props.children}
    </div>
  );
};

• [gsap.to()](https://greensock.com/docs/v3/GSAP/gsap.to()), return 的是一个 Tween 实例，Tween 实例是需要 [kill](https://greensock.com/docs/v3/GSAP/Tween/kill()) 掉的，否则浪费资源，就像 setTimeout 一样
• useState,
• useEffect, 注意，useEffect 中, return 是为了cleanup, 即调用 Tween 实例的 kill 方法，否则会报错： Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function.

二、浮点数动画

import * as _ from 'lodash';
import gsap, { Linear, TweenMax } from 'gsap';
import React, { useState, useEffect, useRef } from 'react';
const XfloaterByText = (props: any) => {
  const decimal = props.decimal || 2;
  const span: any = useRef<HTMLDivElement>(null);
  useEffect(() => {
    const target = { value: 0 };
    TweenMax.to(target, 3, {
      value: props.value, 
      ease: Linear.easeNone, 
      onUpdate: () => _.set(span.current, 'innerHTML', target.value.toFixed(decimal)),
    });
  }, [])

  return (
    <div style={{...props.style, display: 'inline'}}>
      <span ref={span}>0</span>
      {props.children}
    </div>
  );
};