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

feat: 增加动画效果

feature/ae-lottie
guofei 2025-02-21 19:09:15 +08:00
parent 92d407e3ac
commit 94dd5ce631
15 changed files with 128 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
public/aeJson/AB.json 100644
View File

File diff suppressed because one or more lines are too long

1
public/aeJson/LightWeight.json 100644
View File

File diff suppressed because one or more lines are too long

1
public/aeJson/MultiChannl.json 100644
View File

File diff suppressed because one or more lines are too long

1
public/aeJson/MultiLanguage.json 100644
View File

File diff suppressed because one or more lines are too long

1
public/aeJson/custom.json 100644
View File

File diff suppressed because one or more lines are too long

1
public/aeJson/data.json
View File

File diff suppressed because one or more lines are too long

1
public/aeJson/logoAnim.json 100644
View File

File diff suppressed because one or more lines are too long

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

@ -5,6 +5,11 @@ 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 ABAnim from "../components/lottieAnims/Anim3";
import MultiLanguage from "../components/lottieAnims/MultiLanguage";
import MultiChannel from "../components/lottieAnims/MultiChannel";
import LightWeight from "../components/lottieAnims/LightWeight";
export default async function Home(props: { params: { lang: string[] } }) {
const lang = props.params.lang || ["zh"];
@ -18,7 +23,9 @@ export default async function Home(props: { params: { lang: string[] } }) {
<div className="w-[1440px] relative pt-[80px]">
<div className="main">
<div className="w-full h-[740px] pl-[72px] relative" id="home">
<img className="absolute right-[-40px] w-[1520px] " src="https://www-soyootech.oss-cn-hangzhou.aliyuncs.com/public/home/img_header.png" alt="" />
{/* <img className="absolute right-[-40px] w-[1520px] " src="https://www-soyootech.oss-cn-hangzhou.aliyuncs.com/public/home/img_header.png" alt="" /> */}
<Anim1 />
<div className="text-[46px] leading-[62px] w-[639px] text-center pt-[279px] absolute">
<h2
className="font-black"
@ -44,32 +51,41 @@ export default async function Home(props: { params: { lang: string[] } }) {
</div>
</div>
<div className="w-full h-[428px] relative" id="service">
<img className="absolute left-[-214px] w-[969px] h-[428px]" src="https://www-soyootech.oss-cn-hangzhou.aliyuncs.com/public/home/img_bg2.png" alt="" />
<h2 className="absolute w-[770px] text-[32px] top-[184px] right-[95px] text-[#333333] text-right font-semibold">{dict.customized}</h2>
{/* <img className="absolute left-[-214px] w-[969px] h-[428px]" src="https://www-soyootech.oss-cn-hangzhou.aliyuncs.com/public/home/img_bg2.png" alt="" /> */}
<CustomAnim />
<h2 className="absolute w-[770px] text-[32px] top-[184px] right-[95px] text-[#6F95EB] text-right font-semibold">{dict.customized}</h2>
<h2 className="absolute w-[770px] text-[28px] top-[244px] right-[95px] text-[#737373] text-right">{dict.customizedSubTitle}</h2>
<h2 className="absolute w-[770px] text-[28px] top-[282px] right-[95px] text-[#737373] text-right">{dict.customizedSubTitle1}</h2>
</div>
<div className="w-full h-[403px] relative ">
<img className="absolute right-[-100px] w-[888px]" src="https://www-soyootech.oss-cn-hangzhou.aliyuncs.com/public/home/img_AB.png" alt="" />
<h2 className="absolute w-[662px] text-[32px] top-[160px] left-[105px] text-[#333333] text-left font-semibold">{dict.ABTesting}</h2>
<h2 className="absolute w-[680px] text-[32px] top-[204px] left-[105px] text-[#333333] text-left font-semibold">{dict.iterateGameplay}</h2>
{/* <img className="absolute right-[-100px] w-[888px]" src="https://www-soyootech.oss-cn-hangzhou.aliyuncs.com/public/home/img_AB.png" alt="" /> */}
<ABAnim />
<h2 className="absolute w-[662px] text-[32px] top-[160px] left-[105px] text-[#6F95EB] text-left font-semibold">{dict.ABTesting}</h2>
<h2 className="absolute w-[662px] text-[32px] top-[210px] left-[105px] text-[#737373] text-left">{dict.iterateGameplay1}</h2>
<h2 className="absolute w-[680px] text-[32px] top-[249px] left-[105px] text-[#737373] text-left">{dict.iterateGameplay2}</h2>
</div>
<div className="w-full h-[392px] relative">
<img className="absolute w-[731px] left-[-33px] top-[-20px]" src="https://www-soyootech.oss-cn-hangzhou.aliyuncs.com/public/home/img_mutilan.png" alt="" />
<h2 className="absolute w-[520px] text-[32px] top-[197px] right-[95px] text-[#333333] text-right font-semibold">{dict.multiLanguage}</h2>
<h2 className="absolute w-[520px] text-[32px] top-[242px] right-[95px] text-[#333333] text-right font-semibold">{dict.breakingGeographical}</h2>
{/* <img className="absolute w-[731px] left-[-33px] top-[-20px]" src="https://www-soyootech.oss-cn-hangzhou.aliyuncs.com/public/home/img_mutilan.png" alt="" /> */}
<MultiLanguage />
<h2 className="absolute w-[520px] text-[32px] top-[197px] right-[95px] text-[#6F95EB] text-right font-semibold">{dict.multiLanguage}</h2>
<h2 className="absolute w-[520px] text-[32px] top-[247px] right-[95px] text-[#737373] text-right">{dict.multiLanguage1}</h2>
<h2 className="absolute w-[520px] text-[32px] top-[289px] right-[95px] text-[#737373] text-right">{dict.multiLanguage2}</h2>
</div>
<div className="w-full h-[317px] relative mt-[83px]">
<img className="absolute right-0 w-[742px] h-[317px]" src="https://www-soyootech.oss-cn-hangzhou.aliyuncs.com/public/home/img_Omnichannel.png" alt="" />
<h2 className="absolute w-[680px] text-[32px] top-[124px] left-[105px] text-[#333333] text-left font-semibold">{dict.allChannel}</h2>
<h2 className="absolute w-[680px] text-[32px] top-[169px] left-[105px] text-[#333333] text-left font-semibold">{dict.expandInfluence}</h2>
{/* <img className="absolute right-0 w-[742px] h-[317px]" src="https://www-soyootech.oss-cn-hangzhou.aliyuncs.com/public/home/img_Omnichannel.png" alt="" /> */}
<MultiChannel />
<h2 className="absolute w-[680px] text-[32px] top-[124px] left-[105px] text-[#6F95EB] text-left font-semibold">{dict.allChannel}</h2>
<h2 className="absolute w-[680px] text-[32px] top-[170px] left-[105px] text-[#737373] text-left">{dict.allChannel1}</h2>
<h2 className="absolute w-[680px] text-[32px] top-[210px] left-[105px] text-[#737373] text-left">{dict.allChannel2}</h2>
</div>
<div className="w-full h-[317px] relative mt-[120px]">
{/* <img className="absolute w-[908px] h-[356px] left-[-40px] top-[-30px]" src="https://www-soyootech.oss-cn-hangzhou.aliyuncs.com/public/home/img_3.png" alt="" /> */}
<Anim1 />
<h2 className="absolute w-[691px] text-[32px] top-[100px] right-[95px] text-[#333333] text-right font-semibold">{dict.lightweightDeployment}</h2>
<h2 className="absolute w-[712px] text-[32px] top-[145px] right-[95px] text-[#333333] text-right font-semibold">{dict.simplifyProcess}</h2>
<LightWeight />
<h2 className="absolute w-[691px] text-[32px] top-[100px] right-[95px] text-[#6F95EB] text-right font-semibold">{dict.lightweightDeployment}</h2>
<h2 className="absolute w-[712px] text-[32px] top-[150px] right-[95px] text-[#737373] text-right">{dict.lightweightDeployment1}</h2>
<h2 className="absolute w-[712px] text-[32px] top-[190px] right-[95px] text-[#737373] text-right">{dict.lightweightDeployment2}</h2>
</div>
<div className="w-full flex flex-col justify-center items-center mt-[98px] mb-[50px]">
<h2

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

@ -1,14 +1,14 @@
"use client";
import React from "react";
import Lottie from "lottie-react";
import animationData from "public/aeJson/data.json";
import animationData from "public/aeJson/logoAnim.json";
const Anim1 = () => {
const logoAnim = () => {
return (
<div className="absolute w-[908px] h-[356px] left-[-40px] top-[-30px]">
<Lottie animationData={animationData} loop={true} autoplay style={{ transform: "scale(1.4) translate(10px, -30px)" }} />
<div className="absolute w-[908px] h-[356px] right-[-40px]" style={{ transform: "translate(-40px, 4px)" }}>
<Lottie animationData={animationData} loop={true} autoplay />
</div>
);
};
export default Anim1;
export default logoAnim;

14
src/app/components/lottieAnims/Anim2.tsx 100644
View File

@ -0,0 +1,14 @@
"use client";
import React from "react";
import Lottie from "lottie-react";
import animationData from "public/aeJson/custom.json";
const Anim1 = () => {
return (
<div className="absolute top-[30px]">
<Lottie animationData={animationData} loop={true} autoplay className="translate-x-[24px] translate-y-[3 0px]" />
</div>
);
};
export default Anim1;

14
src/app/components/lottieAnims/Anim3.tsx 100644
View File

@ -0,0 +1,14 @@
"use client";
import React from "react";
import Lottie from "lottie-react";
import ABData from "public/aeJson/AB.json";
const Anim1 = () => {
return (
<div className="absolute right-[-100px] w-[888px]">
<Lottie animationData={ABData} loop={true} autoplay className="translate-x-[-93px] translate-y-[-12px]" />
</div>
);
};
export default Anim1;

14
src/app/components/lottieAnims/LightWeight.tsx 100644
View File

@ -0,0 +1,14 @@
"use client";
import React from "react";
import Lottie from "lottie-react";
import LightWeight from "public/aeJson/LightWeight.json";
const LightWeightAnim = () => {
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)" }} />
</div>
);
};
export default LightWeightAnim;

14
src/app/components/lottieAnims/MultiChannel.tsx 100644
View File

@ -0,0 +1,14 @@
"use client";
import React from "react";
import Lottie from "lottie-react";
import MultiChannl from "public/aeJson/MultiChannl.json";
const Anim1 = () => {
return (
<div className="absolute right-0 w-[742px] h-[317px]">
<Lottie animationData={MultiChannl} loop={true} autoplay style={{ transform: "translate(-45px, 4px)" }} />
</div>
);
};
export default Anim1;

14
src/app/components/lottieAnims/MultiLanguage.tsx 100644
View File

@ -0,0 +1,14 @@
"use client";
import React from "react";
import Lottie from "lottie-react";
import MultiLanguage from "public/aeJson/MultiLanguage.json";
const Anim1 = () => {
return (
<div className="absolute w-[731px] left-[-33px] top-[-20px]">
<Lottie animationData={MultiLanguage} loop={true} autoplay style={{ transform: "translate(35px, 74px)" }} />
</div>
);
};
export default Anim1;

21
src/dictionaries/zh.json
View File

@ -7,14 +7,23 @@
"contactUs": "联系我们",
"FocusingOnPlayableAds": "聚焦试玩广告",
"goOverseas": "全面助力游戏出海",
"customized": "100%内容定制，根据项目需求量身打造试玩广告方案 确保完全符合产品形象与市场定位",
"ABTesting": "支持 A/B 测试，通过优化素材内容",
"iterateGameplay": "迭代游戏玩法，全面提升提升转化率与用户体验",
"multiLanguage": "多语言支持，覆盖全球多种语言版本",
"customized": "100%内容定制",
"customizedSubTitle": "根据项目需求量身打造试玩广告方案",
"customizedSubTitle1": "确保完全符合产品形象与市场定位",
"ABTesting": "支持 A/B 测试",
"iterateGameplay1": "通过优化素材内容，迭代游戏玩法",
"iterateGameplay2": "全面提升提升转化率与用户体验",
"multiLanguage": "多语言支持",
"multiLanguage1": "覆盖全球多种语言版本",
"multiLanguage2": "打破地域限制，实现国际化布局",
"breakingGeographical": "打破地域限制，实现国际化布局",
"allChannel": "全渠道适配，接入各大主流分发渠道",
"allChannel": "全渠道适配",
"allChannel1": "接入各大主流分发渠道",
"allChannel2": "让您的产品触达更多潜在用户，扩大品牌影响力",
"expandInfluence": "让您的产品触达更多潜在用户，扩大品牌影响力",
"lightweightDeployment": "轻量化部署，提供便捷的产品效果预览方案",
"lightweightDeployment": "轻量化部署",
"lightweightDeployment1": "提供便捷的产品效果预览方案",
"lightweightDeployment2": "简化用户决策流程，方便追踪各阶段进度",
"simplifyProcess": "简化用户决策流程，方便追踪各阶段进度",
"clickNow": "点击图标 立即体验",
"seeMore": "想看更多？",