import { motion } from 'framer-motion';

const Example1 = () => {
  return (
    <div style={{ marginBottom: '50px' }}>
      <p className="mb-5">Example 1</p>
      <motion.div
        style={{
          background: 'linear-gradient(90deg,#ffa0ae 0%,#aacaef 75%)',
          height: '100px',
          width: '100px',
          borderRadius: '10px',
        }}
        /**
         下面，初始化和动画字段被设置为进行沿水平轴“x”的平移动画。
         因此我们在两个对象中都设置了一个“x”字段。
        **/
        initial={{
          x: -100,
        }}
        animate={{
          x: 100,
        }}
        /**
         以下代码指定了元素的过渡类型。
         您可以将下面的整个过渡属性注释掉， Framer Motion 将回退到“智能默认值”。

         在这种情况下，由于我们有一个平移动画，所以默认的过渡类型是弹簧(spring)，所以您应该会看到元素从左到右移动，并在达到目标状态时出现"弹跳"，就像弹簧一样！
        **/
        transition={{
          type: 'tween',
          ease: 'easeInOut',
          repeat: Infinity,
          repeatType: 'reverse',
          repeatDelay: 1,
          duration: 2,
        }}
      />
    </div>
  );
};

const Example2 = () => {
  return (
    <div style={{ marginBottom: '50px' }}>
      <p className="mb-5">Example 2</p>
      <motion.div
        style={{
          background: 'linear-gradient(90deg,#ffa0ae 0%,#aacaef 75%)',
          height: '100px',
          width: '100px',
          borderRadius: '10px',
        }}
        /**
         在 Framer Motion 中组合动画非常简单！
         您只需向初始和目标对象添加额外的字段即可。
         例如，在这里，我们的元素在 0 度和 180 度之间旋转，如果我们想同时进行水平平移，我们可以简单地添加一个"x"字段，就像上面的示例中一样。
         
         我在下面添加了这些字段，并进行了注释。如果您取消对它们的注释，您应该会看到我们的元素同时旋转和平移。
         
         您可以尝试将平移从水平变为垂直，只需将"x"字段替换为"y"字段即可。
        **/
        initial={{
          rotate: 0,
          // x: -100
        }}
        animate={{
          rotate: 180,
          // x: 100
        }}
        transition={{
          type: 'tween',
          ease: 'easeInOut',
          repeat: Infinity,
          repeatType: 'reverse',
          repeatDelay: 1,
          duration: 2,
        }}
      />
    </div>
  );
};

const Examples = () => (
  <div className="flex flex-col items-center p-2">
    <Example1 />
    <Example2 />
  </div>
);

export default Examples;

import { motion } from 'framer-motion';
import React from 'react';

const Example = () => {
  const [isClicked, setIsClicked] = React.useState(false);

  React.useEffect(() => {
    if (isClicked) {
      setTimeout(() => setIsClicked(false), 3000);
    }
  }, [isClicked]);

  const duration = 0.6;
  const buttonVariants = {
    hover: {
      /**
       * 在变体中组合不同的动画与内联动画对象的方式相同。
       * 对于第一个示例，要使按钮缩放，您只需取消下面的注释。
       * 完成后，将鼠标悬停在按钮上，注意它现在会变为原来的两倍大小！
       */
      // scale: 2,
      rotate: 360,
    },
    pressed: {
      scale: 0.95,
    },
    clicked: {
      scale: 1,
    },
    notClicked: {
      scale: 1,
    },
  };

  /**
   * 请将上面的buttonVariants对象注释掉，并取消下面的注释以尝试第二个示例：
   *
   * - 单击按钮后，按钮不会缩放回其基本大小。
   * - 单击后，悬停动画将不会发生。
   * - 它将使用下面传递给按钮组件的“isClicked”自定义属性。
   */

  /* 
  const buttonVariants = {
    hover: (isClicked) => ({
      scale: isClicked ? 2 : 3,
      rotate: isClicked ? 0 : 360,
    }),
    pressed: {
      scale: 0.95,
    },
    clicked: {
      scale: 2,
    },
    notClicked: {
      scale: 1,
    },
  };
  */

  return (
    <div className="py-16 flex items-center justify-center">
      <motion.button
        style={{
          background: 'linear-gradient(90deg,#ffa0ae 0%,#aacaef 75%)',
          color: 'black',
          border: 'none',
          height: '50px',
          width: '200px',
          borderRadius: '10px',
          cursor: isClicked ? 'default' : 'pointer',
          outline: 'none',
          boxShadow: '6px 4px 12px -6px rgba(0,24,40,0.25)',
        }}
        aria-label="Click Me!"
        title="Click Me!"
        onClick={() => {
          setIsClicked(true);
        }}
        /**
         * 在这里，我们将 buttonVariants 对象作为变体传递。
         * 它包含4个不同的目标对象：
         *
         * hover： 用于 whileHover 属性
         * pressed： 用于 whileTap 属性
         * clicked 和 notClicked： 分别用于按钮在点击和未点击时的 animate 属性（根据按钮的状态）
         * 对这些动画对象的引用以字符串形式传递给它们的属性。
         *
         * e.g. whileHover="hover"
         */
        variants={buttonVariants}
        animate={isClicked ? 'clicked' : 'notClicked'}
        whileHover="hover"
        whileTap="pressed"
        /**
         * 取消下面的注释，让我们的 buttonVariants 对象了解按钮的状态。
         * 
         * 这使我们能够根据按钮的状态重新定义变体。
         */
        // custom={isClicked}
        transition={{
          duration,
        }}
      >
        {isClicked ? 'Clicked!' : 'Click Me!'}
      </motion.button>
    </div>
  );
};

export default Example;

import { motion, useMotionValue, useTransform } from 'framer-motion';

const Example = () => {
  const blockVariants = {
    initial: {
      rotate: 0,
    },
    target: {
      rotate: 360,
    },
  };

  const rotate = useMotionValue(0);
  /**
   * 在这里，我们将 "scale" 的值与 "rotate" 的值关联起来。
   * 缩放将随着旋转增加，从 0 到旋转达到 270 度（[0, 270]），此时缩放属性将等于 1（[0, 1]）。
   * 在旋转完成过渡时，缩放将停止增加。
   * 
   * 您可以尝试修改下面的值，看看它对最终的过渡有什么影响。
   */
  const scale = useTransform(rotate, [0, 270], [0, 1]);

  return (
    <div className="py-16 flex items-center justify-center">
      <motion.div
        style={{
          background: 'linear-gradient(90deg,#ffa0ae 0%,#aacaef 75%)',
          height: '100px',
          width: '100px',
          borderRadius: '10px',
          rotate,
          scale,
        }}
        variants={blockVariants}
        initial="initial"
        animate="target"
        transition={{
          ease: 'easeInOut',
          duration: 4,
        }}
      />
    </div>
  );
};

export default Example;

import { motion } from 'framer-motion';

const Example = () => {
  const blockVariants = {
    initial: {
      y: -50,
    },
    target: {
      y: 100,
    },
  };

  return (
    <div className="py-16 flex items-center justify-center">
      <motion.div
        style={{
          background: 'linear-gradient(90deg,#ffa0ae 0%,#aacaef 75%)',
          height: '100px',
          width: '100px',
          borderRadius: '50%',
        }}
        variants={blockVariants}
        initial="initial"
        animate="target"
        transition={{
          ease: 'easeInOut',
          duration: 0.7,
          delay: 1,
          repeat: 3,
          // repeat: Infinity,
          repeatType: 'mirror',
          repeatDelay: 0,
        }}
      />
    </div>
  );
};

export default Example;

import { motion } from 'framer-motion';

const Example = () => {
  const replies = [
    {
      id: '1',
      photo: '🐶',
    },
    {
      id: '2',
      photo: '🐱',
    },
    {
      id: '3',
      photo: '🐰',
    },
    {
      id: '4',
      photo: '🐭',
    },
    {
      id: '5',
      photo: '🐹',
    },
    {
      id: '6',
      photo: '🦊',
    },
    {
      id: '7',
      photo: '🐻',
    },
    {
      id: '8',
      photo: '🐼',
    },
    {
      id: '9',
      photo: '🐨',
    },
  ];

  const list = {
    visible: {
      opacity: 1,
      transition: {
        // delayChildren: 1.5,
        staggerChildren: 0.1,
      },
    },
    hidden: {
      opacity: 0,
    },
  };

  const item = {
    visible: { opacity: 1, x: 0 },
    hidden: { opacity: 0, x: -10 },
  };

  return (
    <div className="p-4">
      <h4>Already {replies.length} furry friends liked this post!</h4>
      <motion.ul
        style={{
          display: 'flex',
          flexWrap: 'wrap',
          marginLeft: '0px',
          marginBottom: '8px',
          marginTop: '15px',
          paddingLeft: '0px',
        }}
        initial="hidden"
        animate="visible"
        variants={list}
      >
        {replies.map((reply) => (
          <motion.li
            style={{
              listStyle: 'none',
              marginRight: '-10px',
            }}
            key={reply.id}
            data-testid={reply.id}
            variants={item}
            whileHover={{
              // scale: 1.2,
              marginRight: '5px',
              transition: { ease: 'easeOut' },
            }}
          >
            <div
              style={{
                background: 'linear-gradient(90deg,#ffa0ae 0%,#aacaef 75%)',
                height: '50px',
                width: '50px',
                borderRadius: '50%',
                border: '3px solid #4C79DF',
                display: 'flex',
                alignItems: 'center',
                justifyContent: 'center',
                cursor: 'pointer',
                fontSize: '38px',
              }}
            >
              <span role="img" style={{ paddingRight: 0 }}>
                {reply.photo}
              </span>
            </div>
          </motion.li>
        ))}
      </motion.ul>
    </div>
  );
};

export default Example;