我想用 framer-motion 创建一个自定义单选按钮

问题描述

我们正在使用 react 和 typescript。
设计库是 chakra-ui。
我们正在使用 framer-motion 制作动画。
我想做什么
我想创建原始单选按钮。 单选按钮行为
当用户悬停按钮时 → 单选按钮变为蓝色（不显示复选图标。）
按下单选按钮时 → 单选按钮变为蓝色，并显示复选图标（应用帧运动中实现的动画。）

当前单选按钮行为
当按钮悬停时 → 颜色不会变为蓝色。
按下单选按钮时 → framer-motion 实现的动画不适用于复选图标。

如果有人可以帮助我，请回答。

import React from 'react';
import { Center,vstack,HStack } from '@chakra-ui/layout';
import { Radio } from 'components/Radio';
import { useRadioGroup } from '@chakra-ui/radio';

export const Index: React.FunctionComponent = () => {
  const options = ['1','2','3'];
  const { getRootProps,geTradioProps } = useRadioGroup({
    name: 'framework',defaultValue: 'react',onChange: console.log,});
  const group = getRootProps();
  return (
    <Center paddingX={4}>
        <HStack {...group} gridGap={12}>
          {options.map((value) => {
            const radio = geTradioProps({ value });
            return <Radio key={value} {...radio}></Radio>;
          })}
        </HStack>
    </Center>
  );
};

import { useState } from 'react';
import { RadioProps,useRadio } from '@chakra-ui/radio';
import { Icon,Box } from '@chakra-ui/react';
import { motion,useMotionValue,HTMLMotionProps } from 'framer-motion';
import { HTMLChakraProps,chakra } from '@chakra-ui/react';
type Merge<P,T> = Omit<P,keyof T> & T;
type MotionBoxProps = Merge<HTMLChakraProps<'div'>,HTMLMotionProps<'div'>>;

export const MotionBox: React.FC<MotionBoxProps> = motion(chakra.div);

export const Radio: React.FunctionComponent<RadioProps> = (props) => {
  const { getInputProps,getCheckBoxProps } = useRadio(props);

  const input = getInputProps();
  const checkBox = getCheckBoxProps();
  const [isChecked,setIsChecked] = useState(false);
  return (
    <>
      <MotionBox
        position="relative"
        as="label"
        whileTap={{
          scale: 0.95,borderRadius: '100%',}}
        whileHover={{
          scale: 1.05,}}
        onTap={() => setIsChecked(!isChecked)}
      >
        <input {...input} />
        <Box
          {...checkBox}
          cursor="pointer"
          borderWidth="1px"
          borderRadius="100%"
          BoxShadow="md"
          _checked={{
            bg: 'blue.100',color: 'white',borderColor: 'blue.100',}}
          _focus={{
            BoxShadow: 'outline',}}
          _hover={{
            background: 'blue.100',}}
          px={7}
          py={7}
        >
          {props.children}
        </Box>
        <MotionBox
          position="absolute"
          top={3}
          left={3}
          style={{
            originX: 0,originY: 1,}}
          initial={{ opacity: 0,scale: 0.1 }}
          animate={{
            opacity: 1,scale: 1,}}
          transition={{
            duration: 3,}}
        >
          <Icon fontSize={'35px'}>
            <path
              d="M9.07903 14.9692L6.17405 12.1096C5.67622 11.6195 4.8712 11.6195 4.37337 12.1096C3.87554 12.5997 3.87554 13.3921 4.37337 13.8822L8.18311 17.6325C8.68094 18.1225 9.48597 18.1225 9.98379 17.6325L19.6266 8.14012C20.1245 7.65006 20.1245 6.8576 19.6266 6.36754C19.1288 5.87749 18.3238 5.87749 17.8259 6.36754L9.07903 14.9692Z"
              fill="#ffffff"
              strokeWidth="0.5"
              stroke="#ffffff"
            />
          </Icon>
        </MotionBox>
      </MotionBox>
    </>
  );
};

解决方法

您需要将代码重新设置为使用 motion.div。

例如，要更改背景颜色。

<div className="App">
  <motion.div  whileHover={{ backgroundColor: 'rgb(100,0)' }} style={{ backgroundColor: 'rgb(255,0)'}}>
    Hover Me
  </motion.div>
</div>

如果你使用下面的，div背景会改变，但不会影响按钮的背景，除非你设置style {{backgroundColor: 'inherit'}}

// following button background won't change color

<div className="App">
  <motion.div  whileHover={{ backgroundColor: 'rgb(100,0)'}}>
    <button>I am a button</button>
  </motion.div>
</div>

//following background of button will change color

<div className="App">
  <motion.div  whileHover={{ backgroundColor: 'rgb(100,0)'}}>
    <button style={{ backgroundColor: 'inherit' }}>I am a button</button>
  </motion.div>
</div>

简单示例 https://codesandbox.io/s/cocky-kapitsa-nl5bs

对于 SVG 来说也是一样。

 <motion.svg initial={{.... }} animate={{ ..... }} whileHover={{ ..... }}>
     <path d="M9.07903 14.9692L6.17405 12.1096C5.67622 11.6195 4.8712 11.6195 4.37337 12.1096C3.87554 12.5997 3.87554 13.3921 4.37337 13.8822L8.18311 17.6325C8.68094 18.1225 9.48597 18.1225 9.98379 17.6325L19.6266 8.14012C20.1245 7.65006 20.1245 6.8576 19.6266 6.36754C19.1288 5.87749 18.3238 5.87749 17.8259 6.36754L9.07903 14.9692Z"
     fill="#ffffff"
     strokeWidth="0.5"
     stroke="#ffffff"
     />
   </motion.svg>

如果要为单个路径设置动画，则需要将其转换为 motion.path

<motion.svg initial={{.... }} animate={{ ..... }} whileHover={{ ..... }}>
     <motion.path d="M9.07903 14.9692L6.17405 12.1096C5.67622 11.6195 4.8712 11.6195 4.37337 12.1096C3.87554 12.5997 3.87554 13.3921 4.37337 13.8822L8.18311 17.6325C8.68094 18.1225 9.48597 18.1225 9.98379 17.6325L19.6266 8.14012C20.1245 7.65006 20.1245 6.8576 19.6266 6.36754C19.1288 5.87749 18.3238 5.87749 17.8259 6.36754L9.07903 14.9692Z"
      initial={{ opacity: 0 }}
      animate={{ fill: "#ffffff",opacity: 1 }}
      strokeWidth="0.5"
      stroke="#ffffff"
                />
 </motion.svg>