guofei
/
addseed-web
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: change feat get json

main
guofei 2025-02-22 20:13:35 +08:00
parent 86fb427559
commit 8cabe71767
9 changed files with 202 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
src/app/[[...lang]]/page.tsx
View File

@ -4,8 +4,17 @@ import Header from "@/app/components/header";
import Footer from "@/app/components/footer";
import Examples from "../components/Examples";
import ChannelSwiper from "../components/ChannelSwiper";
import Anim1 from "../components/lottieAnims/Anim1";
import CustomAnim from "../components/lottieAnims/Anim2";
import dynamic from 'next/dynamic';
// 添加动态导入所有 Lottie 动画组件
const Anim1 = dynamic(() => import("../components/lottieAnims/Anim1"), {
ssr: false
});
const CustomAnim = dynamic(() => import("../components/lottieAnims/Anim2"), {
ssr: false
});
import ABAnim from "../components/lottieAnims/Anim3";
import MultiLanguage from "../components/lottieAnims/MultiLanguage";
import MultiChannel from "../components/lottieAnims/MultiChannel";

30
src/app/components/lottieAnims/Anim1.tsx
View File

@ -1,12 +1,36 @@
"use client";
import React from "react";
import React, { useState, useEffect } from "react";
import Lottie from "lottie-react";
const animationData = "https://www-soyootech.oss-cn-hangzhou.aliyuncs.com/public/lottie-json/logoAnim.json";
const animationDataURL = "https://www-soyootech.oss-cn-hangzhou.aliyuncs.com/public/lottie-json/logoAnim.json";
const logoAnim = () => {
const [animationData, setAnimationData] = useState(null);
useEffect(() => {
fetch(animationDataURL)
.then((response) => {
if (!response.ok) {
throw new Error("Failed to load animation data");
}
return response.json();
})
.then((data) => {
setAnimationData(data); // 设置动画数据
});
}, []);
// Lottie 配置
const defaultOptions = {
loop: true,
autoplay: true,
animationData: animationData, // 使用远程加载的 JSON 数据
rendererSettings: {
preserveAspectRatio: "xMidYMid slice",
},
};
return (
<div className="absolute w-[908px] h-[356px] right-[-40px]" style={{ transform: "translate(-40px, 4px)" }}>
<Lottie animationData={animationData} loop={true} autoplay />
<Lottie {...defaultOptions} loop={true} autoplay />
</div>
);
};

31
src/app/components/lottieAnims/Anim2.tsx
View File

@ -1,12 +1,37 @@
"use client";
import React from "react";
import React, { useState, useEffect } from "react";
import Lottie from "lottie-react";
const animationData = "https://www-soyootech.oss-cn-hangzhou.aliyuncs.com/public/lottie-json/custom.json";
const animationDataJSON = "https://www-soyootech.oss-cn-hangzhou.aliyuncs.com/public/lottie-json/custom.json";
const Anim1 = () => {
const [animationData, setAnimationData] = useState(null);
useEffect(() => {
fetch(animationDataJSON)
.then((response) => {
if (!response.ok) {
throw new Error("Failed to load animation data");
}
return response.json();
})
.then((data) => {
setAnimationData(data); // 设置动画数据
});
}, []);
// Lottie 配置
const defaultOptions = {
loop: true,
autoplay: true,
animationData: animationData, // 使用远程加载的 JSON 数据
rendererSettings: {
preserveAspectRatio: "xMidYMid slice",
},
};
return (
<div className="absolute top-[30px]">
<Lottie animationData={animationData} loop={true} autoplay className="translate-x-[24px] translate-y-[3 0px]" />
<Lottie {...defaultOptions} loop={true} autoplay className="translate-x-[24px] translate-y-[3 0px]" />
</div>
);
};

29
src/app/components/lottieAnims/Anim3.tsx
View File

@ -1,12 +1,37 @@
"use client";
import React from "react";
import React, { useState, useEffect } from "react";
import Lottie from "lottie-react";
const ABData = "https://www-soyootech.oss-cn-hangzhou.aliyuncs.com/public/lottie-json/AB.json";
const Anim1 = () => {
const [animationData, setAnimationData] = useState(null);
useEffect(() => {
// 使用 fetch 加载 JSON 数据
fetch(ABData)
.then((response) => {
if (!response.ok) {
throw new Error("Failed to load animation data");
}
return response.json();
})
.then((data) => {
setAnimationData(data); // 设置动画数据
});
}, []);
// Lottie 配置
const defaultOptions = {
loop: true,
autoplay: true,
animationData: animationData, // 使用远程加载的 JSON 数据
rendererSettings: {
preserveAspectRatio: "xMidYMid slice",
},
};
return (
<div className="absolute right-[-100px] w-[888px]">
<Lottie animationData={ABData} loop={true} autoplay className="translate-x-[-93px] translate-y-[-12px]" />
<Lottie {...defaultOptions} loop={true} autoplay className="translate-x-[-93px] translate-y-[-12px]" />
</div>
);
};

29
src/app/components/lottieAnims/LightWeight.tsx
View File

@ -1,12 +1,37 @@
"use client";
import React from "react";
import React, { useState, useEffect } from "react";
import Lottie from "lottie-react";
const LightWeight = "https://www-soyootech.oss-cn-hangzhou.aliyuncs.com/public/lottie-json/LightWeight.json";
const LightWeightAnim = () => {
const [animationData, setAnimationData] = useState(null);
useEffect(() => {
// 使用 fetch 加载 JSON 数据
fetch(LightWeight)
.then((response) => {
if (!response.ok) {
throw new Error("Failed to load animation data");
}
return response.json();
})
.then((data) => {
setAnimationData(data); // 设置动画数据
});
}, []);
// Lottie 配置
const defaultOptions = {
loop: true,
autoplay: true,
animationData: animationData, // 使用远程加载的 JSON 数据
rendererSettings: {
preserveAspectRatio: "xMidYMid slice",
},
};
return (
<div className="absolute w-[908px] h-[356px] left-[-40px] top-[-30px]">
<Lottie animationData={LightWeight} loop={true} autoplay style={{ transform: "scale(0.98) translate(10px, 0)" }} />
<Lottie {...defaultOptions} loop={true} autoplay style={{ transform: "scale(0.98) translate(10px, 0)" }} />
</div>
);
};

30
src/app/components/lottieAnims/MultiChannel.tsx
View File

@ -1,12 +1,38 @@
"use client";
import React from "react";
import React, { useState, useEffect } from "react";
import Lottie from "lottie-react";
const MultiChannl = "https://www-soyootech.oss-cn-hangzhou.aliyuncs.com/public/lottie-json/MultiChannl.json";
const Anim1 = () => {
const [animationData, setAnimationData] = useState(null);
useEffect(() => {
// 使用 fetch 加载 JSON 数据
fetch(MultiChannl)
.then((response) => {
if (!response.ok) {
throw new Error("Failed to load animation data");
}
return response.json();
})
.then((data) => {
setAnimationData(data); // 设置动画数据
});
}, []);
// Lottie 配置
const defaultOptions = {
loop: true,
autoplay: true,
animationData: animationData, // 使用远程加载的 JSON 数据
rendererSettings: {
preserveAspectRatio: "xMidYMid slice",
},
};
return (
<div className="absolute right-0 w-[742px] h-[317px]">
<Lottie animationData={MultiChannl} loop={true} autoplay style={{ transform: "translate(-45px, 4px)" }} />
<Lottie {...defaultOptions} loop={true} autoplay style={{ transform: "translate(-45px, 4px)" }} />
</div>
);
};

29
src/app/components/lottieAnims/MultiLanguage.tsx
View File

@ -1,12 +1,37 @@
"use client";
import React from "react";
import React, { useState, useEffect } from "react";
import Lottie from "lottie-react";
const MultiLanguage = "https://www-soyootech.oss-cn-hangzhou.aliyuncs.com/public/lottie-json/MultiLanguage.json";
const Anim1 = () => {
const [animationData, setAnimationData] = useState(null);
useEffect(() => {
fetch(MultiLanguage)
.then((response) => {
if (!response.ok) {
throw new Error("Failed to load animation data");
}
return response.json();
})
.then((data) => {
setAnimationData(data);
});
}, []);
// Lottie 配置
const defaultOptions = {
loop: true,
autoplay: true,
animationData: animationData,
rendererSettings: {
preserveAspectRatio: "xMidYMid slice",
},
};
return (
<div className="absolute w-[731px] left-[-33px] top-[-20px]">
<Lottie animationData={MultiLanguage} loop={true} autoplay style={{ transform: "translate(35px, 74px)" }} />
<Lottie {...defaultOptions} loop={true} autoplay style={{ transform: "translate(35px, 74px)" }} />
</div>
);
};

19
src/app/globals.css
View File

@ -169,3 +169,22 @@ html {
justify-content: center;
}
}
/* 优化图片加载 */
img {
content-visibility: auto;
}
/* 添加渐入动画 */
.fade-in {
animation: fadeIn 0.3s ease-in;
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}

9
src/app/layout.tsx
View File

@ -15,6 +15,12 @@ function RootLayout({ children }: { children: ReactNode }): ReactElement {
<html lang="zh">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link
rel="preload"
href="https://www-soyootech.oss-cn-hangzhou.aliyuncs.com/public/lottie-json/logoAnim.json"
as="fetch"
crossOrigin="anonymous"
/>
<meta name="baidu-site-verification" content="codeva-ET8AOZwhkG" />
<meta name="sogou_site_verification" content="5WfNfjHc6j" />
<meta name="360-site-verification" content="c2f6de2ca12d108936ee7a52fcbf72dc" />
@ -49,8 +55,9 @@ function RootLayout({ children }: { children: ReactNode }): ReactElement {
`,
}}
/>
{/* 延迟加载非关键脚本 */}
<script defer src="https://www.googletagmanager.com/gtag/js?id=G-3VNFGQNP7Z"></script>
{/* google Analytics */}
<script async src="https://www.googletagmanager.com/gtag/js?id=G-3VNFGQNP7Z"></script>
<script
dangerouslySetInnerHTML={{
__html: `