怎么用CSS和D3實現(xiàn)小魚游動的交互動畫

小編給大家分享一下怎么用CSS和D3實現(xiàn)小魚游動的交互動畫，希望大家閱讀完這篇文章之后都有所收獲，下面讓我們一起去探討吧！

　　代碼解讀

　　定義dom，容器中包含的子元素分別代表魚的身體、眼睛、背鰭和尾巴：

　　<divclass="fish">

　　<spanclass="body"></span>

　　<spanclass="eye"></span>

　　<spanclass="fin"></span>

　　<spanclass="tail"></span>

　　</div>

　　設(shè)置頁面樣式為全屏且沒有滾動條：

　　body{

　　margin:0;

　　width:100vw;

　　height:100vh;

　　background-color:#222;

　　overflow:hidden;

　　}

　　定義魚的容器尺寸，--r是一個基本尺寸單位，后續(xù)所有尺寸都是基于它計算的：

　　.fish{

　　position:absolute;

　　--r:15vw;

　　width:calc(var(--r)+var(--r)/3);

　　height:calc(var(--r)*2);

　　left:50%;

　　top:100px;

　　}

　　畫出魚的身體，同時把魚的顏色聲明到父類中，因為下面還會用到這個顏色：

　　.fish{

　　color:hsl(0,50%,50%);

　　}

　　.fish.body{

　　position:absolute;

　　border:var(--r)solidtransparent;

　　border-right-color:currentColor;

　　border-left-style:none;

　　}

　　畫出魚的眼睛：

　　.fish.eye{

　　position:absolute;

　　--r1:calc(var(--r)/4);

　　width:var(--r1);

　　height:var(--r1);

　　background-color:#111;

　　border-radius:50%;

　　top:35%;

　　left:30%;

　　}

　　畫出魚的背鰭：

　　.fish.fin{

　　position:absolute;

　　--r2:calc(var(--r)/2);

　　border-bottom:var(--r2)solid;

　　border-left:var(--r2)solidtransparent;

　　filter:brightness(2.5);

　　left:calc(var(--r)-var(--r2));

　　}

　　畫出魚的尾巴：

　　.fish.tail{

　　position:absolute;

　　--r3:calc(var(--r)/3);

　　border:var(--r3)solidtransparent;

　　border-right-color:currentColor;

　　border-left-style:none;

　　right:0;

　　top:calc(var(--r)-var(--r3));

　　}

　　增加讓魚游動的動畫效果，不是循環(huán)執(zhí)行，而是只執(zhí)行一次：

　　.fish{

　　right:calc(var(--r)*-1);

　　animation:run3slinearforwards;

　　}

　　@keyframesrun{

　　to{

　　right:100%;

　　}

　　}

　　再增加魚游動時搖擺的動畫效果：

　　.fish{

　　animation:

　　run3slinearforwards,

　　shake0.3slinearinfinite;

　　}

　　@keyframesshake{

　　50%{

　　transform:rotateY(-30deg);

　　}

　　100%{

　　transform:rotateY(30deg);

　　}

　　}

　　接下來設(shè)置一些變量，以便創(chuàng)建不同樣子的魚：

　　魚的大小的變量--size，數(shù)值越大尺寸越大：

　　.fish{

　　--size:5;

　　--r:calc(var(--size)*1vw);

　　}

　　魚的顏色變量--color，表示色相環(huán)的角度：

　　.fish{

　　--color:0;

　　color:hsl(var(--color),50%,50%);

　　}

　　魚從右側(cè)游到左側(cè)的時長，時長越短游得越快：

　　.fish{

　　--duration:3;

　　animation:

　　runcalc(var(--duration)*1s)linearforwards,

　　shake0.3slinearinfinite;

　　}

　　魚出現(xiàn)的高度，數(shù)據(jù)越大越靠近頁面下部：

　　.fish{

　　--top:100;

　　top:calc(var(--top)*1px);

　　}

　　接下來用d3來批量處理dom元素和css變量。

　　引入d3庫：

　　<scriptsrc="https://d3js.org/d3.v5.min.js"></script>

　　刪除掉html中的.fish元素和css文件中的變量聲明代碼。創(chuàng)建一個函數(shù)，用于生成一條魚。css變量的值均為隨機生成，--size的取值范圍是5~8，--color的取值范圍是-60~15，--duration的取值范圍是3~6，--top的取值范圍是100~300：

　　functionbuildFish(){

　　letfish=d3.select('body')

　　.append('p')

　　.attr('class','fish')

　　.style('--size',d3.randomUniform(5,8)())

　　.style('--color',d3.randomUniform(-60,15)())

　　.style('--duration',d3.randomUniform(3,6)())

　　.style('--top',d3.randomUniform(100,300)());

　　fish.append('span').attr('class','body');

　　fish.append('span').attr('class','eye');

　　fish.append('span').attr('class','fin');

　　fish.append('span').attr('class','tail');

　　}

　　綁定鼠標單擊事件，當(dāng)按下鼠標時就生成一條魚：

　　functionbuildFish(e){

　　//略....

　　.style('--top',e.clientY);

　　}

　　window.addEventListener('click',buildFish);

　　并且讓魚的嘴部和點擊的位置在一條水平線上：

　　.fish{

　　top:calc(var(--top)*1px-var(--r));

　　}

　　最后，在頁面載入時自動生成3條魚，以免頁面載入后一片空白：

　　functionbuildFish(e){

　　//略....

　　.style('--top',e?e.clientY:d3.randomUniform(100,300)());

　　}

　　d3.range(3).forEach(buildFish);

看完了這篇文章，相信你對“怎么用CSS和D3實現(xiàn)小魚游動的交互動畫”有了一定的了解，如果想了解更多相關(guān)知識，歡迎關(guān)注億速云行業(yè)資訊頻道，感謝各位的閱讀！