介绍
这篇文章主要介绍了怎么使用D3和GSAP实现一个舞动的效果,具有一定借鉴价值,需要的朋友可以参考下。希望大家阅读完这篇文章后大有收获。下面让小编带着大家一起了解一下。
效果预览
源代码下载https://github.com/comehope/front-end-daily-challenges
代码解读
定义dom,容器中包含2个子容器,<代码>。水平代表水平的线段,<代码>。垂直代表垂直的线段,每个子容器中包含4个子元素:
& lt; div类=癱ontainer"比;
& lt; div类=癶orizontal"祝辞
& lt; span> & lt;/span>
& lt; span> & lt;/span>
& lt; span> & lt;/span>
& lt; span> & lt;/span>
& lt;/div>
& lt; div类=皏ertical"祝辞
& lt; span> & lt;/span>
& lt; span> & lt;/span>
& lt; span> & lt;/span>
& lt; span> & lt;/span>
& lt;/div>
& lt;/div> 居中显示:
身体{
保证金:0;
身高:100 vh;
显示:flex;
对齐项目:中心;
justify-content:中心;
背景颜色:天蓝色;
} 设置容器尺寸,其中<代码>——边长> 。容器{
——边长:2;
位置:相对;
宽度:钙(40像素*钙(var(边长)));
高度:钙(40像素*钙(var(边长)));
} 用网格布局排列子元素,4个元素排列成2 * 2的方阵:
。容器.horizontal,
.container .vertical {
位置:绝对的;
上图:0;
左:0;
显示:网格;
grid-template-columns:重复(var(边长),1 fr);
} 设置子元素的样式,<代码>。水平> 。垂直> 。容器.horizontal跨度{
宽度:40像素;
高度:10 px;
背景:# fff;
保证金:15 px 0;
}
.container .vertical跨度{
宽度:10 px;
高度:40像素;
背景:# fff;
保证金:15 0 px;
} 至此,静态布局完成,接下来用d3批量处理子元素。
引入d3库:
& lt;脚本https://www.yisu.com/zixun/src=" https://d3js.org/d3.v5.min.js "> 删除掉html文件中的子元素dom节点,删除掉css文件中声明的css变量。
定义方阵每一边的元素数量,并把这个数值赋给css变量:
const SIDE_LENGTH=2;
让容器=d3.select (& # 39; .container& # 39;)
.style (& # 39;——side-length& # 39; SIDE_LENGTH); 定义一个添加<代码>时间> 函数appendSpan(选择){
container.select(选择)
.selectAll(& # 39;跨度# 39;)
. data (d3。范围(SIDE_LENGTH * SIDE_LENGTH))
.enter ()
.append(& # 39;跨度# 39;);
}
appendSpan (& # 39; .horizontal& # 39;);
appendSpan (& # 39; .vertical& # 39;); 此时,布局已改为动态的,可以通过修改<代码> SIDE_LENGTH> const SIDE_LENGTH=5; 接下来用GSAP创建动画。(注:因scrimba在使用GSAP时会崩溃,所以视频演示采用css动画,但codepen和github均采用GSAP动画)
引入GSAP库:
& lt;脚本https://www.yisu.com/zixun/src=" https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.2/TweenMax.min.js "> 声明动画变量<代码>动漫> 和<代码>美元verticalSpan :
让动画=new TimelineMax({重复:1});
让horizontalSpan=& # 39;美元。容器.horizontal跨度# 39;;
让verticalSpan=& # 39;美元。容器.vertical跨度# 39;; 先创建横条的动画,共分4步成,每个<代码> 语句的最后一个参数是步骤的名称:
动画。(美元horizontalSpan 1{旋转:45},& # 39;step1 # 39;)
文($ horizontalSpan 1 {x: & # 39; -10 px # 39;, y: & # 39; -10 px # 39;}, & # 39;步骤2 # 39;)
文($ horizontalSpan 1{旋转:0,x: & # 39; 0 & # 39;, y: & # 39; 0 & # 39;,写入scaleY: 2, scaleX: 0.5}, & # 39;步骤3 # 39;)
文($ horizontalSpan 1{旋转:90,写入scaleY: 1 scaleX: 1}, & # 39;第四# 39;)
