Skip to content

Commit

Permalink
feat(6-dingding): update demo
Browse files Browse the repository at this point in the history
  • Loading branch information
@dev-zuo
dev-zuo committed May 2, 2023
1 parent 1b8312b commit 440cc53
Show file tree
Hide file tree
Showing 3 changed files with 145 additions and 98 deletions.
24 changes: 24 additions & 0 deletions src/6-dingding-official-site/READEM.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -114,3 +114,27 @@ function getTransformXyz(str) {
```

从控制台数据后，怎么自动下载到本地 json 文件中

1-14 ICON 元素

```bash
01 02 03 04 05 06 07
08 09 10 11 12 13 14

# step1
# 周边 8 个元素 y: 112 => 130 => 0, x: n => 0, z: 不变，opacity: 0 => 1
01 02 -- -- -- 06 07
08 09 -- -- -- 13 14

# step2
01 02 03 -- 05 06 07
08 09 10 -- 12 13 14
# 3、5、10、12 到达 1394 滚动距离时
# x 155 => 0、Y 134 => 0、opacity 0 => 1

# step3
01 02 03 04 05 06 07
08 09 10 11 12 13 14
# 4、11 到达 1470 滚动距离时
# Y 134 => 0、opacity 0 => 1
```
19 changes: 14 additions & 5 deletions src/6-dingding-official-site/animation-curves/echrtsAll.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,9 +12,13 @@
display: flex;
flex-wrap: wrap;
}
.chart {
/* .chart {
width: 1000px;
height: 600px;
} */
.chart {
width: 500px;
height: 300px;
}
</style>
</head>
Expand All @@ -28,8 +32,8 @@
<div class="main">
<div id="main-transX" class="chart"></div>
<div id="main-transY" class="chart"></div>
<div id="main-transZ" class="chart"></div>
<div id="main-opacity" class="chart"></div>
<div id="main-transZ" class="chart"></div>
</div>
<script type="module">
import { allAnimationList } from "./dataAll.js";
Expand All @@ -42,9 +46,11 @@
function getSeriesData(name) {
let seriesData = [];
for (let i = 0; i < animateElementCount; i++) {
let classList = firstScrollPositionInfo[i].className.split(' ')
seriesData.push({
// name: firstScrollPositionInfo[i].className,
name: `${i}`,
// name: `${i}`,
name: classList.pop(),
type: "line",
// stack: "Total",
data: [],
Expand Down Expand Up @@ -84,7 +90,10 @@
trigger: "axis",
},
legend: {
data: firstScrollPositionInfo.slice(start, end).map((item, index) => `${index}`),
data: firstScrollPositionInfo.slice(start, end).map((item, index) => {
let classList = item.className.split(" ")
return classList.pop()
}),
// type: 'scroll',
// top: 20,
},
Expand All @@ -108,7 +117,7 @@
let posMap = {
'all': '',
'partA': [0, 28],
'partB': [28, 43]
'partB': [29, 43]
}
document.querySelector('#btnWrap').addEventListener('click', (e) => {
let el = e.target
Expand Down
200 changes: 107 additions & 93 deletions src/6-dingding-official-site/animation/animation.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,14 +15,14 @@
<div id="app">
<!-- <div class="height-gap"></div> -->
<div class="main">
<div class="dd-icon"><img src="../images/dingd-icon.svg" /></div>
<!-- <div class="dd-icon"><img src="../images/dingd-icon.svg" /></div>
<div class="dd-text"><img src="../images/dingd-text.svg" /></div>
<div
class="square"
v-for="(item,index) in squareList"
:class="`square-${index}`"
:key="index"
></div>
></div> -->
<div class="app-list">
<!-- <div class="app-list-bg"></div> -->
<div
Expand Down Expand Up @@ -55,105 +55,119 @@
this.squareList = new Array(this.squareNum).fill(1);
this.appList = new Array(this.appNum).fill(1);
gsap.registerPlugin(ScrollTrigger);
const t1 = gsap.timeline();
// t1.fromTo(".dd-icon", { x: 400,duration: 1 });
// // 在1秒开始插入动画（绝对值）
// t1.to(".green", { x: 400, duration: 1 }, 1);
// // 在上个动画的开始插入动画
// t1.to(".purple", { x: 400, duration: 1 }, "<");
// // 在最后一个动画结束后一秒插入动画
// t1.to(".orange", { x: 400, duration: 1 }, "+=1");
// const t1 = gsap.timeline();
// // t1.fromTo(".dd-icon", { x: 400,duration: 1 });
// // // 在1秒开始插入动画（绝对值）
// // t1.to(".green", { x: 400, duration: 1 }, 1);
// // // 在上个动画的开始插入动画
// // t1.to(".purple", { x: 400, duration: 1 }, "<");
// // // 在最后一个动画结束后一秒插入动画
// // t1.to(".orange", { x: 400, duration: 1 }, "+=1");

// step1 - 向上移动，放大到 1 倍，透明度 1
// opacity: 0.5; transform: translate3d(1e-5px, 111px, -440px) scale(0.5);
// opacity: 1; transform: translate3d(1e-5px, 0px, 10px) scale(1);
// opacity: 0; transform: translate3d(1e-5px, -364px, 263px) scale(1.16);
t1.to(".dd-icon", { y: 0, z: 10, scale: 1, opacity: 1, duration: 1 });
// opacity: 1; transform: translate3d(1e-5px, 0px, 10px) scale(1);
t1.to(".dd-text", { y: 0, z: 10, scale: 1, opacity: 1, duration: 1 }, "<");
// // step1 - 向上移动，放大到 1 倍，透明度 1
// // opacity: 0.5; transform: translate3d(1e-5px, 111px, -440px) scale(0.5);
// // opacity: 1; transform: translate3d(1e-5px, 0px, 10px) scale(1);
// // opacity: 0; transform: translate3d(1e-5px, -364px, 263px) scale(1.16);
// t1.to(".dd-icon", { y: 0, z: 10, scale: 1, opacity: 1, duration: 1 });
// // opacity: 1; transform: translate3d(1e-5px, 0px, 10px) scale(1);
// t1.to(".dd-text", { y: 0, z: 10, scale: 1, opacity: 1, duration: 1 }, "<");

// opacity: 0.962; transform: translate3d(1e-5px, -121px, 94px) scale(1.053);
t1.to(".dd-icon", { y: -121, z: 94, scale: 1.053, opacity: 0.962, duration: 1 });
// transform: translate3d(1e-5px, -100px, 94px) scale(1.107);
t1.to(".dd-text", { y: -100, z: 94, scale: 1.107, opacity: 1, duration: 1 }, "<");
// // opacity: 0.962; transform: translate3d(1e-5px, -121px, 94px) scale(1.053);
// t1.to(".dd-icon", { y: -121, z: 94, scale: 1.053, opacity: 0.962, duration: 1 });
// // transform: translate3d(1e-5px, -100px, 94px) scale(1.107);
// t1.to(".dd-text", { y: -100, z: 94, scale: 1.107, opacity: 1, duration: 1 }, "<");


// // step2 - 继续上移，放大，其中 文案透明度 1，图标透明度 0.35
t1.to(".dd-icon", { y: -364, z: 263, scale: 1.2, opacity: 0, duration: 2 });
// opacity: 0; transform: translate3d(1e-5px, -400px, 347px) scale(1.427);
t1.to(".dd-text", { y: -400, z: 347, scale: 1.427, opacity: 0, duration: 2 }, "<");
// // // step2 - 继续上移，放大，其中 文案透明度 1，图标透明度 0.35
// t1.to(".dd-icon", { y: -364, z: 263, scale: 1.2, opacity: 0, duration: 2 });
// // opacity: 0; transform: translate3d(1e-5px, -400px, 347px) scale(1.427);
// t1.to(".dd-text", { y: -400, z: 347, scale: 1.427, opacity: 0, duration: 2 }, "<");

const t2 = gsap.timeline();
this.$nextTick(() => {
// step1 - 方块上移，两边初步散开
// 左侧
t2.to(".square-0", { z: 150, opacity: 0.656, duration: 2 });
t2.to(".square-1", { z: 171, opacity: 1, duration: 2 }, "<");
t2.to(".square-2", { z: 171, opacity: 0.843, duration: 2 }, "<");
t2.to(".square-3", { z: 171, opacity: 0.843, duration: 2 }, "<");
t2.to(".square-4", { z: 171, opacity: 0.45, duration: 2 }, "<");
t2.to(".square-5", { z: 171, opacity: 0.528, duration: 2 }, "<");
t2.to(".square-6", { z: 171, opacity: 0.449, duration: 2 }, "<");
t2.to(".square-7", { z: 171, opacity: 0.375, duration: 2 }, "<");
t2.to(".square-8", { z: 171, opacity: 1, duration: 2 }, "<");
// 9 - 13 山下方块
t2.to(".square-9", { z: 85, opacity: 0.4, duration: 2 }, "<");
t2.to(".square-10", { z: 85, opacity: 0.4, duration: 2 }, "<");
t2.to(".square-11", { z: 85, opacity: 0.4, duration: 2 }, "<");
t2.to(".square-12", { z: 85, opacity: 0.4, duration: 2 }, "<");
t2.to(".square-13", { z: 85, opacity: 0.4, duration: 2 }, "<");
// 右侧
t2.to(".square-14", { z: 171, opacity: 1, duration: 2 }, "<");
t2.to(".square-15", { z: 171, opacity: 1, duration: 2 }, "<");
t2.to(".square-16", { z: 171, opacity: 0.2, duration: 2 }, "<");
t2.to(".square-17", { z: 171, opacity: 1, duration: 2 }, "<");
t2.to(".square-18", { z: 171, opacity: 1, duration: 2 }, "<");
t2.to(".square-19", { z: 171, opacity: 1, duration: 2 }, "<");
t2.to(".square-20", { z: 171, opacity: 1, duration: 2 }, "<");
// const t2 = gsap.timeline();
// this.$nextTick(() => {
// // step1 - 方块上移，两边初步散开
// // 左侧
// t2.to(".square-0", { z: 150, opacity: 0.656, duration: 2 });
// t2.to(".square-1", { z: 171, opacity: 1, duration: 2 }, "<");
// t2.to(".square-2", { z: 171, opacity: 0.843, duration: 2 }, "<");
// t2.to(".square-3", { z: 171, opacity: 0.843, duration: 2 }, "<");
// t2.to(".square-4", { z: 171, opacity: 0.45, duration: 2 }, "<");
// t2.to(".square-5", { z: 171, opacity: 0.528, duration: 2 }, "<");
// t2.to(".square-6", { z: 171, opacity: 0.449, duration: 2 }, "<");
// t2.to(".square-7", { z: 171, opacity: 0.375, duration: 2 }, "<");
// t2.to(".square-8", { z: 171, opacity: 1, duration: 2 }, "<");
// // 9 - 13 山下方块
// t2.to(".square-9", { z: 85, opacity: 0.4, duration: 2 }, "<");
// t2.to(".square-10", { z: 85, opacity: 0.4, duration: 2 }, "<");
// t2.to(".square-11", { z: 85, opacity: 0.4, duration: 2 }, "<");
// t2.to(".square-12", { z: 85, opacity: 0.4, duration: 2 }, "<");
// t2.to(".square-13", { z: 85, opacity: 0.4, duration: 2 }, "<");
// // 右侧
// t2.to(".square-14", { z: 171, opacity: 1, duration: 2 }, "<");
// t2.to(".square-15", { z: 171, opacity: 1, duration: 2 }, "<");
// t2.to(".square-16", { z: 171, opacity: 0.2, duration: 2 }, "<");
// t2.to(".square-17", { z: 171, opacity: 1, duration: 2 }, "<");
// t2.to(".square-18", { z: 171, opacity: 1, duration: 2 }, "<");
// t2.to(".square-19", { z: 171, opacity: 1, duration: 2 }, "<");
// t2.to(".square-20", { z: 171, opacity: 1, duration: 2 }, "<");

// // // step2 不上移，加快两边散开、放大
// // 左侧
// t2.to(".square-0", { z: 350, opacity: 0.656, duration: 2 });
// t2.to(".square-1", { z: 350, opacity: 1, duration: 2 }, "<");
// t2.to(".square-2", { z: 350, opacity: 0.843, duration: 2 }, "<");
// t2.to(".square-3", { z: 350, opacity: 0.843, duration: 2 }, "<");
// t2.to(".square-4", { z: 350, opacity: 0.45, duration: 2 }, "<");
// t2.to(".square-5", { z: 350, opacity: 0.528, duration: 2 }, "<");
// t2.to(".square-6", { z: 350, opacity: 0.449, duration: 2 }, "<");
// t2.to(".square-7", { z: 350, opacity: 0.375, duration: 2 }, "<");
// t2.to(".square-8", { z: 350, opacity: 1, duration: 2 }, "<");
// // 9 - 13 山下方块
// t2.to(".square-9", { z: 300, opacity: 0.4, duration: 2 }, "<");
// t2.to(".square-10", { z: 300, opacity: 0.4, duration: 2 }, "<");
// t2.to(".square-11", { z: 300, opacity: 0.4, duration: 2 }, "<");
// t2.to(".square-12", { z: 300, opacity: 0.4, duration: 2 }, "<");
// t2.to(".square-13", { z: 300, opacity: 0.4, duration: 2 }, "<");
// // 右侧
// t2.to(".square-14", { z: 350, opacity: 1, duration: 2 }, "<");
// t2.to(".square-15", { z: 350, opacity: 1, duration: 2 }, "<");
// t2.to(".square-16", { z: 350, opacity: 0.2, duration: 2 }, "<");
// t2.to(".square-17", { z: 350, opacity: 1, duration: 2 }, "<");
// t2.to(".square-18", { z: 350, opacity: 1, duration: 2 }, "<");
// t2.to(".square-19", { z: 350, opacity: 1, duration: 2 }, "<");
// t2.to(".square-20", { z: 350, opacity: 1, duration: 2 }, "<");

// // step2 不上移，加快两边散开、放大
// 左侧
t2.to(".square-0", { z: 350, opacity: 0.656, duration: 2 });
t2.to(".square-1", { z: 350, opacity: 1, duration: 2 }, "<");
t2.to(".square-2", { z: 350, opacity: 0.843, duration: 2 }, "<");
t2.to(".square-3", { z: 350, opacity: 0.843, duration: 2 }, "<");
t2.to(".square-4", { z: 350, opacity: 0.45, duration: 2 }, "<");
t2.to(".square-5", { z: 350, opacity: 0.528, duration: 2 }, "<");
t2.to(".square-6", { z: 350, opacity: 0.449, duration: 2 }, "<");
t2.to(".square-7", { z: 350, opacity: 0.375, duration: 2 }, "<");
t2.to(".square-8", { z: 350, opacity: 1, duration: 2 }, "<");
// 9 - 13 山下方块
t2.to(".square-9", { z: 300, opacity: 0.4, duration: 2 }, "<");
t2.to(".square-10", { z: 300, opacity: 0.4, duration: 2 }, "<");
t2.to(".square-11", { z: 300, opacity: 0.4, duration: 2 }, "<");
t2.to(".square-12", { z: 300, opacity: 0.4, duration: 2 }, "<");
t2.to(".square-13", { z: 300, opacity: 0.4, duration: 2 }, "<");
// 右侧
t2.to(".square-14", { z: 350, opacity: 1, duration: 2 }, "<");
t2.to(".square-15", { z: 350, opacity: 1, duration: 2 }, "<");
t2.to(".square-16", { z: 350, opacity: 0.2, duration: 2 }, "<");
t2.to(".square-17", { z: 350, opacity: 1, duration: 2 }, "<");
t2.to(".square-18", { z: 350, opacity: 1, duration: 2 }, "<");
t2.to(".square-19", { z: 350, opacity: 1, duration: 2 }, "<");
t2.to(".square-20", { z: 350, opacity: 1, duration: 2 }, "<");
// const t3 = gsap.timeline();
// t3.to(".app-1", {x: 0, y: 1, z: 10, scale: 1, opacity: 1, duration: 3})
// t3.to(".app-2", {x: 0, y: 1, z: 10, scale: 1, opacity: 1, duration: 3}, "<")
// t3.to(".app-6", {x: 0, y: 1, z: 10, scale: 1, opacity: 1, duration: 3}, "<")
// t3.to(".app-7", {x: 0, y: 1, z: 10, scale: 1, opacity: 1, duration: 3}, "<")
// t3.to(".app-8", {x: 0, y: 1, z: 10, scale: 1, opacity: 1, duration: 3}, "<")
// t3.to(".app-9", {x: 0, y: 1, z: 10, scale: 1, opacity: 1, duration: 3}, "<")
// t3.to(".app-13", {x: 0, y: 1, z: 10, scale: 1, opacity: 1, duration: 3}, "<")
// t3.to(".app-14", {x: 0, y: 1, z: 10, scale: 1, opacity: 1, duration: 3}, "<")

// t3.to(".app-3", {x: 0, y: 1, z: 10, scale: 1, opacity: 1, duration: 3})
// t3.to(".app-4", {x: 0, y: 1, z: 10, scale: 1, opacity: 1, duration: 3}, "<")
// t3.to(".app-5", {x: 0, y: 1, z: 10, scale: 1, opacity: 1, duration: 3}, "<")
// t3.to(".app-10", {x: 0, y: 1, z: 10, scale: 1, opacity: 1, duration: 3}, "<")
// t3.to(".app-11", {x: 0, y: 1, z: 10, scale: 1, opacity: 1, duration: 3}, "<")
// t3.to(".app-12", {x: 0, y: 1, z: 10, scale: 1, opacity: 1, duration: 3}, "<")
// });
const t5 = gsap.timeline();
this.$nextTick(() => {
t5.to(".app-1", {x: 0, y: 0, z: 10, scale: 1, opacity: 1, duration: 3})
t5.to(".app-7", {x: 0, y: 0, z: 10, scale: 1, opacity: 1, duration: 3}, "<")
t5.to(".app-8", {x: 0, y: 0, z: 10, scale: 1, opacity: 1, duration: 3}, "<")
t5.to(".app-14", {x: 0, y: 0, z: 10, scale: 1, opacity: 1, duration:3}, "<")

t5.to(".app-2", {x: 0, y: 0, z: 10, scale: 1, opacity: 1, duration: 3}, "<")
t5.to(".app-6", {x: 0, y: 0, z: 10, scale: 1, opacity: 1, duration: 3}, "<")
t5.to(".app-9", {x: 0, y: 0, z: 10, scale: 1, opacity: 1, duration: 3}, "<")
t5.to(".app-13", {x: 0, y: 0, z: 10, scale: 1, opacity: 1, duration: 3}, "<")

const t3 = gsap.timeline();
t3.to(".app-1", {x: 0, y: 1, z: 10, scale: 1, opacity: 1, duration: 3})
t3.to(".app-2", {x: 0, y: 1, z: 10, scale: 1, opacity: 1, duration: 3}, "<")
t3.to(".app-6", {x: 0, y: 1, z: 10, scale: 1, opacity: 1, duration: 3}, "<")
t3.to(".app-7", {x: 0, y: 1, z: 10, scale: 1, opacity: 1, duration: 3}, "<")
t3.to(".app-8", {x: 0, y: 1, z: 10, scale: 1, opacity: 1, duration: 3}, "<")
t3.to(".app-9", {x: 0, y: 1, z: 10, scale: 1, opacity: 1, duration: 3}, "<")
t3.to(".app-13", {x: 0, y: 1, z: 10, scale: 1, opacity: 1, duration: 3}, "<")
t3.to(".app-14", {x: 0, y: 1, z: 10, scale: 1, opacity: 1, duration: 3}, "<")

t3.to(".app-3", {x: 0, y: 1, z: 10, scale: 1, opacity: 1, duration: 3})
t3.to(".app-4", {x: 0, y: 1, z: 10, scale: 1, opacity: 1, duration: 3}, "<")
t3.to(".app-5", {x: 0, y: 1, z: 10, scale: 1, opacity: 1, duration: 3}, "<")
t3.to(".app-10", {x: 0, y: 1, z: 10, scale: 1, opacity: 1, duration: 3}, "<")
t3.to(".app-11", {x: 0, y: 1, z: 10, scale: 1, opacity: 1, duration: 3}, "<")
t3.to(".app-12", {x: 0, y: 1, z: 10, scale: 1, opacity: 1, duration: 3}, "<")
});
})
},
methods: {},
}).mount("#app");
Expand Down

0 comments on commit 440cc53

Please sign in to comment.