文件

交互.framerx.zip

代码

import { Override, Data, useTransform, motionValue } from "framer";
const appState = Data({
  tapState: false,
  tapStartState: false,
  position: 0,
});
const transition = {
  duration: 0.25,
  ease: "easeInOut",
};
const transition1 = {
  duration: 0.2,
  ease: "easeInOut",
};
const positionX = motionValue(0);
export function TapFrame(): Override {
  return {
    onTap: () => {
      appState.tapState = !appState.tapState;
    },
    animate: {
      backgroundColor: appState.tapState ? "#EA3348" : "#E5E5E5",
    },
    transition: transition1,
  };
}
export function Circle(): Override {
  const width = useTransform(positionX, [0, 7, 14], [14, 18, 14]);
  return {
    animate: {
      x: appState.tapState ? 14 : 0,
    },
    x: positionX,
    backgroundColor: appState.tapState ? "#fff" : "transparent",
    transition: transition,
    width: width,
  };
}