|
導(dǎo)讀網(wǎng)頁的本質(zhì)就是超級文本標(biāo)記語言,通過結(jié)合使用其他的Web技術(shù)(如:腳本語言、公共網(wǎng)關(guān)接口、組件等),可以創(chuàng)造出功能強大的網(wǎng)頁。因而,超級文本標(biāo)記語言是萬維網(wǎng)(Web)編程的基礎(chǔ),也就是說萬維網(wǎng)是建立... 網(wǎng)頁的本質(zhì)就是超級文本標(biāo)記語言,通過結(jié)合使用其他的Web技術(shù)(如:腳本語言、公共網(wǎng)關(guān)接口、組件等),可以創(chuàng)造出功能強大的網(wǎng)頁。因而,超級文本標(biāo)記語言是萬維網(wǎng)(Web)編程的基礎(chǔ),也就是說萬維網(wǎng)是建立在超文本基礎(chǔ)之上的。超級文本標(biāo)記語言之所以稱為超文本標(biāo)記語言,是因為文本中包含了所謂“超級鏈接”點。 本篇文章給大家?guī)淼膬?nèi)容是關(guān)于如何使用D3和GSAP實現(xiàn)一個舞動的效果(附源碼),有一定的參考價值,有需要的朋友可以參考一下,希望對你有所幫助。效果預(yù)覽
源代碼下載https://github.com/comehope/front-end-daily-challenges 代碼解讀定義 dom,容器中包含 2 個子容器, <div class="container">
<div class="horizontal">
<span></span>
<span></span>
<span></span>
<span></span>
</div>
<div class="vertical">
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</div>居中顯示: body {
margin: 0;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background-color: skyblue;
}設(shè)置容器尺寸,其中 .container {
--side-length: 2;
position: relative;
width: calc(40px * calc(var(--side-length)));
height: calc(40px * calc(var(--side-length)));
}用 grid 布局排列子元素,4 個元素排列成 2 * 2 的方陣: .container .horizontal,
.container .vertical {
position: absolute;
top: 0;
left: 0;
display: grid;
grid-template-columns: repeat(var(--side-length), 1fr);
}設(shè)置子元素的樣式, .container .horizontal span {
width: 40px;
height: 10px;
background: #fff;
margin: 15px 0;
}
.container .vertical span {
width: 10px;
height: 40px;
background: #fff;
margin: 0 15px;
}至此,靜態(tài)布局完成,接下來用 d3 批量處理子元素。 <script src="https://d3js.org/d3.v5.min.js"></script> 刪除掉 html 文件中的子元素 dom 節(jié)點,刪除掉 css 文件中聲明的 css 變量。 const SIDE_LENGTH = 2;
let container = d3.select('.container')
.style('--side-length', SIDE_LENGTH);定義一個添加 function appendSpan(selector) {
container.select(selector)
.selectAll('span')
.data(d3.range(SIDE_LENGTH * SIDE_LENGTH))
.enter()
.append('span');
}
appendSpan('.horizontal');
appendSpan('.vertical');此時,布局已改為動態(tài)的,可以通過修改 const SIDE_LENGTH = 5; 接下來用 GSAP 創(chuàng)建動畫。(注:因 scrimba 在使用 gsap 時會崩潰,所以視頻演示采用 css 動畫,但 codepen 和 github 均采用 gsap 動畫) <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.2/TweenMax.min.js"></script> 聲明動畫變量 let animation = new TimelineMax({repeat: -1});
let $horizontalSpan = '.container .horizontal span';
let $verticalSpan = '.container .vertical span';先創(chuàng)建橫條的動畫,共分成 4 步,每個 animation.to($horizontalSpan, 1, {rotation: 45}, 'step1')
.to($horizontalSpan, 1, {x: '-10px', y: '-10px'}, 'step2')
.to($horizontalSpan, 1, {rotation: 0, x: '0', y: '0', scaleY: 2, scaleX: 0.5}, 'step3')
.to($horizontalSpan, 1, {rotation: 90, scaleY: 1, scaleX: 1}, 'step4')再創(chuàng)建豎條的動畫, animation.to($verticalSpan, 1, {rotation: 45}, 'step1')
.to($verticalSpan, 1, {x: '10px', y: '10px'}, 'step2')
.to($verticalSpan, 1, {x: '0', y: '0', scaleX: 2, scaleY: 0.5}, 'step3')
.to($verticalSpan, 1, {rotation: 90, scaleX: 1, scaleY: 1}, 'step4');在動畫的末尾用時間尺度縮放函數(shù)讓動畫播放速度加快一倍: animation.timeScale(2); 最后,把方陣的邊長改為 10,方陣越大就越有氣勢: const SIDE_LENGTH = 10; 大功告成! 以上就是如何使用D3和GSAP實現(xiàn)一個舞動的效果(附源碼)的詳細內(nèi)容,更多請關(guān)注php中文網(wǎng)其它相關(guān)文章! 網(wǎng)站建設(shè)是一個廣義的術(shù)語,涵蓋了許多不同的技能和學(xué)科中所使用的生產(chǎn)和維護的網(wǎng)站。 |
溫馨提示:喜歡本站的話,請收藏一下本站!