当前位置：首页 > React

react实现ios动画效果

2026-01-27 09:36:35React

React 实现 iOS 动画效果

在 React 中实现 iOS 风格的动画效果，可以结合 CSS 动画、第三方库或原生 API。以下是一些常见方法和实现细节：

使用 CSS 过渡和动画

通过 CSS 的 transition 或 @keyframes 实现简单动画，适合按钮点击、页面切换等场景。

/* 按钮点击效果 */
.ios-button {
  transition: transform 0.1s ease;
}
.ios-button:active {
  transform: scale(0.95);
}

function IOSButton() {
  return <button className="ios-button">Click Me</button>;
}

使用 React Spring

React Spring 是一个基于物理的动画库，适合实现弹性动画、平滑过渡等 iOS 风格效果。

npm install react-spring

import { useSpring, animated } from 'react-spring';

function IOSBounce() {
  const props = useSpring({
    from: { transform: 'scale(1)' },
    to: async (next) => {
      while (true) {
        await next({ transform: 'scale(1.1)' });
        await next({ transform: 'scale(1)' });
      }
    },
    config: { tension: 200, friction: 10 },
  });

  return <animated.div style={props}>Bouncing Element</animated.div>;
}

使用 Framer Motion

Framer Motion 提供声明式动画 API，适合复杂交互和手势动画。

npm install framer-motion

import { motion } from 'framer-motion';

function IOSSwitch() {
  return (
    <motion.div
      whileTap={{ scale: 0.9 }}
      style={{ width: 50, height: 30, background: '#ddd', borderRadius: 15 }}
    >
      <motion.div
        layout
        style={{ width: 26, height: 26, background: '#4cd964', borderRadius: 13 }}
      />
    </motion.div>
  );
}

实现页面切换动画

模拟 iOS 页面左右滑动的过渡效果。

import { AnimatePresence, motion } from 'framer-motion';

function PageSwitcher({ currentPage }) {
  return (
    <AnimatePresence mode="wait">
      <motion.div
        key={currentPage}
        initial={{ x: 300, opacity: 0 }}
        animate={{ x: 0, opacity: 1 }}
        exit={{ x: -300, opacity: 0 }}
        transition={{ duration: 0.3 }}
      >
        {currentPage === 'home' ? <HomePage /> : <DetailPage />}
      </motion.div>
    </AnimatePresence>
  );
}

使用原生 Web Animations API

通过浏览器原生 API 实现高性能动画。

react实现ios动画效果

function useIOSAnimation(ref) {
  useEffect(() => {
    if (ref.current) {
      ref.current.animate(
        [
          { transform: 'translateY(0)', opacity: 1 },
          { transform: 'translateY(20px)', opacity: 0.5 },
        ],
        { duration: 300, fill: 'both' }
      );
    }
  }, [ref]);
}