feat: animate background

src/pages/components/animate/index.tsx

@@ -1,18 +1,14 @@
 import { Tabs, TabsProps } from 'antd';
 
 import BackgroundView from './views/background';
-import DialogView from './views/dialog';
 import Inview from './views/inview';
-import OtherView from './views/other';
 import ScrollView from './views/scroll';
 
 export default function Animate() {
   const TABS: TabsProps['items'] = [
     { key: 'inview', label: 'In View', children: <Inview /> },
     { key: 'scroll', label: 'Scroll', children: <ScrollView /> },
-    { key: 'dialog', label: 'Dialog', children: <DialogView /> },
     { key: 'background', label: 'Background', children: <BackgroundView /> },
-    { key: 'other', label: 'Other', children: <OtherView /> },
   ];
 
   return <Tabs items={TABS} />;

src/pages/components/animate/views/background/container.tsx

@@ -0,0 +1,35 @@
+import { m } from 'framer-motion';
+import { useEffect, useMemo } from 'react';
+
+import Cover3 from '@/assets/images/cover/cover_3.jpg';
+import MotionContainer from '@/components/animate/motion-container';
+import { getVariant } from '@/components/animate/variants';
+import { useThemeToken } from '@/theme/hooks';
+
+type Props = {
+  variant: string;
+};
+export default function ContainerView({ variant }: Props) {
+  const { colorBgLayout } = useThemeToken();
+  const varients = useMemo(() => getVariant(variant), [variant]);
+  const isKenburns = variant.includes('kenburns');
+
+  useEffect(() => {
+    console.log(varients);
+  });
+  return (
+    <div
+      key={variant}
+      className="h-[480px] overflow-scroll rounded-lg"
+      style={{ backgroundColor: colorBgLayout }}
+    >
+      <MotionContainer className="flex h-full w-full flex-col items-center gap-6">
+        {isKenburns ? (
+          <m.img src={Cover3} className="h-full w-full object-cover" variants={varients} />
+        ) : (
+          <m.div {...varients} className="h-full w-full" />
+        )}
+      </MotionContainer>
+    </div>
+  );
+}

src/pages/components/animate/views/background/index.tsx

@@ -0,0 +1,55 @@
+import { Card, Row, Col } from 'antd';
+import { useMemo, useState } from 'react';
+
+import ControlPanel from '../../control-panel';
+
+import ContainerView from './container';
+import Toolbar from './toolbar';
+
+export default function BackgroundView() {
+  const defaultValue = useMemo(() => {
+    return {
+      selectedVariant: 'kenburnsTop',
+    };
+  }, []);
+  const [selectedVariant, setSelectedVariant] = useState(defaultValue.selectedVariant);
+
+  const onRefresh = () => {
+    setSelectedVariant(defaultValue.selectedVariant);
+  };
+  return (
+    <Card>
+      <Row>
+        <Col xs={24} md={18}>
+          <Toolbar onRefresh={onRefresh} />
+        </Col>
+      </Row>
+      <Row justify="space-between">
+        <Col xs={24} md={18}>
+          <ContainerView variant={selectedVariant} />
+        </Col>
+        <Col xs={24} md={5}>
+          <ControlPanel
+            variantKey={variantKey}
+            selectedVariant={selectedVariant}
+            onChangeVarient={(varient) => setSelectedVariant(varient)}
+          />
+        </Col>
+      </Row>
+    </Card>
+  );
+}
+const variantKey = [
+  {
+    type: 'kenburns',
+    values: ['kenburnsTop', 'kenburnsBottom', 'kenburnsLeft', 'kenburnsRight'],
+  },
+  {
+    type: 'pan',
+    values: ['panTop', 'panBottom', 'panLeft', 'panRight'],
+  },
+  {
+    type: 'color change',
+    values: ['color2x', 'color3x', 'color4x', 'color5x'],
+  },
+];

src/pages/components/animate/views/background/toolbar.tsx

@@ -0,0 +1,12 @@
+import { ReloadOutlined } from '@ant-design/icons';
+
+type Props = {
+  onRefresh: VoidFunction;
+};
+export default function Toolbar({ onRefresh }: Props) {
+  return (
+    <div className="mb-4 flex items-center justify-end">
+      <ReloadOutlined className="cursor-pointer text-lg" onClick={onRefresh} />
+    </div>
+  );
+}