Animation 动画

介绍

通过 JavaScript 控制动画，以支持动画精确控制。

基础动画

import { useAnimation } from '@vital-design/use';
import { easing } from '@vital-design/shared';

const { current, start, pause, stop, restart } = useAnimation({
  from: 0,
  to: 100,
  duration: 2000,
  easing: easing('ease'), // 使用预置动画
});

复数动画

import { useAnimation } from '@vital-design/use';
import { bezier } from '@vital-design/shared';

const { current, start, pause, stop, restart } = useAnimation({
  from: {
    background: '#ee0a24',
  },
  to: {
    width: '300px',
    background: '#66ccff',
  },
  delay: 0,
  duration: 2000,
  easing: bezier(0.25, 0.1, 0.25, 1), // 自定义贝塞尔曲线动画
});

动画回调

import { useAnimation } from '@vital-design/use';
import { easing } from '@vital-design/shared';

const { start, pause, stop, restart, onAnimation } = useAnimation({
  from: {
    background: '#ee0a24',
  },
  to: {
    width: '300px',
    background: '#66ccff',
  },
  delay: 0,
  duration: 2000,
  easing: easing('ease'),
});

// 滚动动画回调
onAnimation(type => {
  // 开始
  if (type === 'start') {}
  // 数值改变
  else if (type === 'change') {}
  // 暂停
  else if (type ==='pause') {}
  // 停止
  else if (type === 'stop') {}
  // 完成
  else if (type === 'complete') {}
});