feat(component): refine carousel 3d component

hankliu62 · Mar 17, 2024 · e16c71b · e16c71b
1 parent f3afc01
commit e16c71b
Show file tree

Hide file tree

Showing 13 changed files with 715 additions and 209 deletions.
diff --git a/.gitignore b/.gitignore
@@ -34,4 +34,6 @@ yarn-error.log*
 # typescript
 *.tsbuildinfo
 next-env.d.ts
-/src/app/components.css
+/src/app/components.css
+
+.vscode
diff --git a/package.json b/package.json
@@ -31,6 +31,9 @@
     "next": "13.4.7",
     "postcss": "8.4.24",
     "qrcode.react": "^3.1.0",
+    "rc-banner-anim": "^2.4.5",
+    "rc-queue-anim": "^2.0.0",
+    "rc-tween-one": "^3.0.6",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-fullpage": "^0.1.19",

diff --git a/src/components/Carousel3d/index.tsx b/src/components/Carousel3d/index.tsx
@@ -2,6 +2,7 @@
 import classNames from "classnames";
 import React, {
   CSSProperties,
+  memo,
   ReactElement,
   useCallback,
   useEffect,
@@ -36,7 +37,7 @@ interface ICarousel3dProps {
 // const defaultDpr = 2; // sketch 里用的是 iphone 6 尺寸;
 const dpr = 0.5; // currentDpr / defaultDpr;
 
-export default function Carousel3d({
+export default memo(function Carousel3d({
   onChange = () => {},
   className,
   tilt = "15rem",
@@ -224,7 +225,10 @@ export default function Carousel3d({
               style={{ ...animStyle }}
             >
               {/* transform 与 filter 的距阵冲突，图层分离 */}
-              <div className="transition-[opacity] duration-[0.65s]">
+              <div
+                className="transition-[opacity] duration-[0.65s]"
+                style={{ opacity: current === i ? 1 : 1 }}
+              >
                 {item}
               </div>
             </div>
@@ -246,7 +250,7 @@ export default function Carousel3d({
         [className!]: className,
       })}
     >
-      <div className="absolute left-0 right-0 m-auto h-[80vh] w-[60vw]">
+      <div className="absolute left-0 right-0 m-auto -mt-[360px] h-[80vh] w-[60vw] pt-[360px]">
         <div
           className="relative m-auto h-full w-full"
           style={{
@@ -271,4 +275,4 @@ export default function Carousel3d({
       </div>
     </div>
   );
-}
+});
diff --git a/src/components/CarouselThreeD/index.less b/src/components/CarouselThreeD/index.less
@@ -1,26 +1,12 @@
-.carouselDemoWrapper {
-  position: relative;
-  /* background: #3949C0; */
-  background: rgba(0, 0, 0, 0.4);
-  overflow: hidden;
-  height: 380px;
-}
-
-.carouselDemo {
-  width: 100%;
-  height: 100%;
-}
-
 .carouselWrapper {
   position: absolute;
-  width: 140px;
-  height: 600px;
+  width: 60vw;
+  height: 80vh;
   margin: auto;
   left: 0;
   right: 0;
-  top: 60px;
-  padding-top: 350px;
-  margin-top: -350px;
+  padding-top: 360px;
+  margin-top: -360px;
 }
 
 .carousel {
@@ -54,9 +40,3 @@
 .itemWrapper .rotateLayer .bgAndBlurLayer .contentLayer {
   transition: opacity 0.65s;
 }
-
-.imgWrapper {
-  height: 300px;
-  background-size: cover;
-  background-position: center;
-}
diff --git a/src/components/CarouselThreeD/index.tsx b/src/components/CarouselThreeD/index.tsx
@@ -9,6 +9,17 @@ import React from "react";
 // const defaultDpr = 2; // sketch 里用的是 iphone 6 尺寸;
 const dpr = 0.5; // currentDpr / defaultDpr;
 
+function isEqual(source: object, target: object) {
+  const keys = Object.keys(source);
+  return (
+    keys === Object.keys(target) &&
+    keys.every((key) =>
+      source[key] instanceof Object
+        ? isEqual(source[key], target[key])
+        : source[key] === target[key]
+    )
+  );
+}
 class CarouselThreeD extends React.PureComponent {
   static propTypes = {
     children: PropTypes.any,
@@ -72,6 +83,18 @@ class CarouselThreeD extends React.PureComponent {
     }
   }
 
+  shouldComponentUpdate(nextProps, nextState) {
+    if (isEqual(nextState, this.state)) {
+      return true;
+    }
+
+    if (isEqual(nextProps, this.props)) {
+      return false;
+    }
+
+    return true;
+  }
+
   onTouchStart = (e) => {
     if ((e.touches && e.touches.length > 1) || this.length <= 1) {
       return;
@@ -177,12 +200,13 @@ class CarouselThreeD extends React.PureComponent {
         length > childMaxLength ? childMaxLength : length
       );
       const style = {
+        transformStyle: "preserve-3d",
         transform,
         // opacity: animStyle.opacity, 留坑，preserve-3d 不可以与 opacity 同时使用，排查了一下午
       };
       return (
         <div
-          className="itemWrapper"
+          className="itemWrapper absolute left-0 top-0"
           key={item.key}
           style={style}
         >
@@ -194,12 +218,12 @@ class CarouselThreeD extends React.PureComponent {
             }}
           >
             <div
-              className="bgAndBlurLayer"
+              className="bgAndBlurLayer m-auto overflow-hidden rounded-lg transition-[filter] duration-[0.45s]"
               style={{ ...animStyle }}
             >
               {/* transform 与 filter 的距阵冲突，图层分离 */}
               <div
-                className="contentLayer"
+                className="contentLayer transition-[opacity] duration-[0.65s]"
                 style={{ opacity: this.state.current === i ? 1 : 1 }}
               >
                 {item}
@@ -239,10 +263,11 @@ class CarouselThreeD extends React.PureComponent {
         onMouseMove={this.onTouchMove}
         onTouchEnd={this.onTouchEnd}
         onMouseUp={this.onTouchEnd}
+        className="relative h-full w-full"
       >
-        <div className="carouselWrapper">
+        <div className="carouselWrapper absolute left-0 right-0 m-auto -mt-[360px] h-[80vh] w-[60vw] pt-[360px]">
           <div
-            className="carousel"
+            className="carousel relative m-auto h-full w-full"
             style={{
               ...style,
               perspective: perspectiveDpr,
@@ -252,8 +277,9 @@ class CarouselThreeD extends React.PureComponent {
             }}
           >
             <div
-              className="carouselContent"
+              className="carouselContent w-full"
               style={{
+                transformStyle: "preserve-3d",
                 transform: `translateY(${tilt}) rotateY(${this.state.rotate}deg)`,
                 transition: this.state.transition,
               }}