摘要:效果預覽按下右側(cè)的點擊預覽按鈕可以在當前頁面預覽,點擊鏈接可以全屏預覽。可交互視頻此視頻是可以交互的,你可以隨時暫停視頻,編輯視頻中的代碼。引入庫刪除掉文件中的子元素節(jié)點,刪除掉文件中聲明的變量。
效果預覽
按下右側(cè)的“點擊預覽”按鈕可以在當前頁面預覽,點擊鏈接可以全屏預覽。
https://codepen.io/comehope/pen/gdVObN
可交互視頻此視頻是可以交互的,你可以隨時暫停視頻,編輯視頻中的代碼。
請用 chrome, safari, edge 打開觀看。
https://scrimba.com/p/pEgDAM/caRLack
源代碼下載每日前端實戰(zhàn)系列的全部源代碼請從 github 下載:
https://github.com/comehope/front-end-daily-challenges
代碼解讀定義 dom,容器中包含 2 個子容器,.horizontal 代表水平的線段,.vertical 代表垂直的線段,每個子容器中包含 4 個子元素:
居中顯示:
body { margin: 0; height: 100vh; display: flex; align-items: center; justify-content: center; background-color: skyblue; }
設置容器尺寸,其中 --side-length 是方陣的每一邊的元素數(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); }
設置子元素的樣式,.horizontal 內(nèi)的子元素是橫條,.vertical 內(nèi)的子元素是豎條:
.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 批量處理子元素。
引入 d3 庫:
刪除掉 html 文件中的子元素 dom 節(jié)點,刪除掉 css 文件中聲明的 css 變量。
定義方陣每一邊的元素數(shù)量,并把這個數(shù)值賦給 css 變量:
const SIDE_LENGTH = 2; let container = d3.select(".container") .style("--side-length", SIDE_LENGTH);
定義一個添加 span 子元素的函數(shù),分別添加橫向和豎向的子元素:
function appendSpan(selector) { container.select(selector) .selectAll("span") .data(d3.range(SIDE_LENGTH * SIDE_LENGTH)) .enter() .append("span"); } appendSpan(".horizontal"); appendSpan(".vertical");
此時,布局已改為動態(tài)的,可以通過修改 SIDE_LENGTH 的值來創(chuàng)建不同邊長的方陣,比如以下語句將創(chuàng)建 5 * 5 的方陣:
const SIDE_LENGTH = 5;
接下來用 GSAP 創(chuàng)建動畫。(注:因 scrimba 在使用 gsap 時會崩潰,所以視頻演示采用 css 動畫,但 codepen 和 github 均采用 gsap 動畫)
引入 GSAP 庫:
聲明動畫變量 animation,聲明代表 dom 元素的變量 $horizontalSpan 和 $verticalSpan:
let animation = new TimelineMax({repeat: -1}); let $horizontalSpan = ".container .horizontal span"; let $verticalSpan = ".container .vertical span";
先創(chuàng)建橫條的動畫,共分成 4 步,每個 to 語句的最后一個參數(shù)是步驟的名稱:
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)建豎條的動畫,to 語句的步驟名稱與橫條的步驟名稱相同,以便與橫條保持動畫同步:
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;
大功告成!
文章版權歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://specialneedsforspecialkids.com/yun/97990.html
摘要:效果預覽按下右側(cè)的點擊預覽按鈕可以在當前頁面預覽,點擊鏈接可以全屏預覽。可交互視頻此視頻是可以交互的,你可以隨時暫停視頻,編輯視頻中的代碼。引入庫刪除掉文件中的子元素節(jié)點,刪除掉文件中聲明的變量。 showImg(https://segmentfault.com/img/bVbht5j?w=400&h=301); 效果預覽 按下右側(cè)的點擊預覽按鈕可以在當前頁面預覽,點擊鏈接可以全屏預覽...
摘要:過往項目年月份項目匯總共個項目年月份項目匯總共個項目年月份項目匯總共個項目年月份項目匯總共個項目年月份項目匯總共個項目年月份發(fā)布的項目前端每日實戰(zhàn)專欄每天分解一個前端項目,用視頻記錄編碼過程,再配合詳細的代碼解讀,是學習前端開發(fā)的活的參考書 過往項目 2018 年 8 月份項目匯總(共 29 個項目) 2018 年 7 月份項目匯總(共 29 個項目) 2018 年 6 月份項目匯總(...
摘要:過往項目年月份項目匯總共個項目年月份項目匯總共個項目年月份項目匯總共個項目年月份項目匯總共個項目年月份項目匯總共個項目年月份發(fā)布的項目前端每日實戰(zhàn)專欄每天分解一個前端項目,用視頻記錄編碼過程,再配合詳細的代碼解讀,是學習前端開發(fā)的活的參考書 過往項目 2018 年 8 月份項目匯總(共 29 個項目) 2018 年 7 月份項目匯總(共 29 個項目) 2018 年 6 月份項目匯總(...
閱讀 2181·2021-11-19 09:55
閱讀 2637·2021-11-11 16:55
閱讀 3175·2021-09-28 09:36
閱讀 1945·2021-09-22 16:05
閱讀 3272·2019-08-30 15:53
閱讀 1806·2019-08-30 15:44
閱讀 2899·2019-08-29 13:10
閱讀 1339·2019-08-29 12:30