时间戳

首页 > 解决方案 > 我想在按下按钮时减慢 Box 的动画

reactjs - 我想在按下按钮时减慢 Box 的动画

问题描述

我正在使用 react.js、Typescript、脉轮和动画成帧器。有一个 MotionSwipe 组件可以让你左右滑动。可以拖动它来滑动子元素的 Box。我们希望 Box 不仅可以通过拖动，还可以通过按下按钮来向右或向左移动。在按下按钮时调用的 onClickSwipe 函数中，我执行了 animateCardSwipe 函数以使其向右滑动。但是，动画太快了，我看不到。当按下按钮时，我想减慢 Box 向右移动的动画。

import { Button,Box  } from '@chakra-ui/react';
import { PanInfo, useMotionValue, useTransform } from 'framer-motion';
import { NextPage } from 'next';
import { MotionSwipe } from 'components/MotionSwipe';
import React, { useState } from 'react';

const Component: React.VoidFunctionComponent = () => {
  const [cards, setCards] = useState([
    { text: 'Up or down', background: 'red' },
    { text: 'Left or right', background: 'green' },
    { text: 'Swipe me!', background: 'gray' },
  ]);

  const [dragStart, setDragStart] = useState<{ axis: string | null; animation: { x: number; y: number } }>({
    axis: null,
    animation: { x: 0, y: 0 },
  });

  const x = useMotionValue(0);
  const y = useMotionValue(0);

  const onDirectionLock = (axis: string | null) => setDragStart({ ...dragStart, axis: axis });

  const animateCardSwipe = (animation: { x: number; y: number }) => {
    setDragStart({ ...dragStart, animation });

    setTimeout(() => {
      setDragStart({ axis: null, animation: { x: 0, y: 0 } });
      x.set(0);
      y.set(0);
      setCards([...cards.slice(0, cards.length - 1)]);
    }, 200);
  };

  const onDragEnd = (info: PanInfo) => {
    if (dragStart.axis === 'x') {
      if (info.offset.x >= 400) animateCardSwipe({ x: 300, y: 0 });
      else if (info.offset.x <= -400) animateCardSwipe({ x: -300, y: 0 });
    } else {
      if (info.offset.y >= 100) animateCardSwipe({ x: 0, y: 100 });
      else if (info.offset.y <= -100) animateCardSwipe({ x: 0, y: -100 });
    }
  };

  const rotate = useTransform(x, [-700, 700], [-90, 90]);

  const onClickSwipe = () => {
    animateCardSwipe({ x: 500, y: 0 });
  };

  return (
    <>
      <Box display="flex" justifyContent="center" width="300px">
        {cards.map((card, index) =>
          index === cards.length - 1 ? (
            <MotionSwipe
              animate={dragStart.animation}
              card={card}
              key={index}
              onDirectionLock={(axis: string) => onDirectionLock(axis)}
              onDragEnd={(e: MouseEvent, info: PanInfo) => onDragEnd(info)}
              style={{ x, y, zIndex: index, rotate: rotate }}
            >
              <Box background={card.background} height="300px" width="300px"></Box>
            </MotionSwipe>
          ) : (
            <MotionSwipe
              card={card}
              key={index}
              style={{
                zIndex: index,
              }}
            >
              <Box background={card.background} height="300px" width="300px"></Box>
            </MotionSwipe>
          ),
        )}
      </Box>
      <Button onClick={onClickSwipe}>
        ○
      </Button>
      <Button>✖︎</Button>
    </>
  );
};

const SwipeBox: NextPage = () => {
  return <Component />;
};

export default SwipeBox;


interface Props {
  animate?: { x: number; y: number };
  onDirectionLock?: (axis: 'x' | 'y') => void;
  onDragEnd?: (e: MouseEvent, info: PanInfo) => void;
  style: { x?: MotionValue; y?: MotionValue; zIndex: number; rotate?: MotionValue };
  card: { text: string; background: string };
}

export const MotionSwipe: React.FunctionComponent<Props> = (props) => {
  return (
    <MotionBox
      animate={props.animate}
      background="white"
      borderTopRadius="8px"
      className="card"
      display="grid"
      drag
      dragConstraints={{ left: 0, right: 0, top: 0, bottom: 0 }}
      dragDirectionLock
      left={0}
      onDirectionLock={props.onDirectionLock}
      onDragEnd={props.onDragEnd}
      placeItems="center center"
      position="absolute"
      style={{ ...props.style }}
      top={0}
      transition={{ ease: [0.6, 0.05, -0.01, 0.9], duration: 3 }}
    >
      {props.children}
    </MotionBox>
  );
};

标签： reactjstypescriptframer-motionchakra-ui

解决方案

是的，当它快速移动时没关系。如何改变：

  1. 设置useState变量以检查按钮是否被按下。例如：const [pressed, setPressed] = useState(false);
  2. 如果按钮被按下，你设置setPressed(true)
  3. 如果pressed(true)你用. transition_animationduration

如果您没有duration，您的元素将在按钮单击后立即触发。

推荐阅读