整合營銷服務商

          電腦端+手機端+微信端=數據同步管理

          免費咨詢熱線:

          簡易js特效之氣泡效果

          簡易js特效之氣泡效果

          何用原生JavaScript寫一個氣泡的效果。話不多說,直接上代碼。

          script腳本如下:



          html代碼如下:

          是不是很簡單呢。然后我們用手機看看效果

          手指點擊屏幕,或者在電腦上打開,鼠標移動時,氣泡也會跟隨移動


          效果不錯,建議收藏哦

          通訊應用和聊天界面中,當你正在與對方交談時對方正在輸入一條信息,會有一個小的氣泡動畫或者文案提示。本文將探討使用現代 CSS 來實現這一動畫效果,首先會實現一個 Blink 效果的動畫,然后實現一個波浪效果動畫,最后實現一個語音氣泡效果。

          1.效果預覽

          1)Blink 效果:

          2)Wave 效果:

          3)語音氣泡效果:

          2.實現方案

          2.1.快速創建頁面和容器

          通過 html:5div.container>(div.dot)*3 快速創建頁面及容器。

          <div class="container">
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
          </div>
          

          2.2.增加基礎樣式

          1)容器居中:

          body {
            display: grid;
            place-content: center;
            min-height: 100vh;
            margin: 0;
          }
          

          2)容器樣式:

          注意:此處使用了現代CSS 原生嵌套(參考鏈接:)

          .container {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 0.25rem;
          
            background: #e2e8f0;
            border-radius: 9999px;
            padding: 1rem;
            .dot {
              border-radius: 9999px;
              height: 0.5rem;
              width: 0.5rem;
              background: #93a2b7;
            }
          }
          

          2.3.實現動畫

          1)Blink 效果:

          核心思想是通過給dot 元素設置 opacity 設置屬性來改變其透明度,同時對 3 個 dot 的透明度變化設置不同的動畫延遲 animation-delay 屬性來實現閃爍的效果。

          .container {
            .dot {
              opacity: 0;
              animation: blink 1s infinite;
              &:nth-child(1) {
                animation-delay: 0.3333s;
              }
              &:nth-child(2) {
                animation-delay: 0.6666s;
              }
              &:nth-child(3) {
                animation-delay: 0.9999s;
              }
            }
          }
          @keyframes blink {
            50% {
              opacity: 1;
            }
          }
          

          2)Wave 效果:

          核心思想:給 dot 元素增加 transform 屬性,設置 translateY 的值將目標元素從下至上垂直重新定位,同時在動畫關鍵幀 keyframes 中對顏色進行調整。

            .container {
              .dot {
                animation: wave 1s infinite;
              }
            }
            @keyframes wave {
              0% {
                transform: translateY(0px);
                background: rgba(148 163 184 / 0);
              }
              25% {
                transform: translateY(-0.25rem);
                background: rgba(148 163 184 / 0.8);
              }
              50% {
                transform: translateY(0px);
                background: rgba(148 163 184 / 0);
              }
              75% {
                transform: translateY(0.25rem);
                background: rgba(148 163 184 / 0.8);
              }
              100% {
                transform: translateY(0);
                background: rgba(148 163 184 / 0);
              }
            }
          

          2)語音氣泡效果:

          語音氣泡是以可視化方式顯示對話或思想的一種流行而有效的方法。你可能在漫畫、卡通、廣告和社交媒體文章中見過它們。它們為設計增添了幽默、情感和個性,同時也為觀眾提供了語境。此外,語音氣泡布局還可以將文字較多的設計分割開來,使其更加吸引人。

          核心思想:在 wave 效果的基礎上,對 .contianer 容器增加 ::before::after 兩個偽元素來實現左下角的圓圈,同時動畫中增加對整個容器的放大和縮小 scale 動畫,并采用 ease-out 函數。

          .container {
            animation: 2s zoom infinite ease-out;
            position: relative;
          
            &::before,
            &::after {
              content: '';
              position: absolute;
              border-radius: 9999px;
              background: rgb(226 232 240);
              bottom: 0;
              left: 0;
            }
            &::before {
              height: 1rem;
              width: 1rem;
              transform: translate(-0.125rem, 0.125rem);
            }
            &::after {
              height: 0.5rem;
              width: 0.5rem;
              transform: translate(-0.5rem, 0.5rem);
            }
            .dot {
              border-radius: 9999px;
              height: 0.5rem;
              width: 0.5rem;
              background: rgba(148 163 184 / 1);
              animation: wave 1.2s infinite;
              &:nth-child(1) {
                animation-delay: 0.4s;
              }
              &:nth-child(2) {
                animation-delay: 0.8s;
              }
              &:nth-child(3) {
                animation-delay: 1.2s;
              }
            }
          }
          @keyframes zoom {
            50% {
              transform: scale(1.1);
            }
          }
          


          如果本文對您有幫助,歡迎關注、點贊和轉發,感謝您的支持!


          家好! 歡迎來到本教程,我們將深入了解使用 HTML 畫布和 JavaScript 在代碼中創建有趣的氣泡的世界。 最好的部分? 我們將只使用一點 HTML 和所有 JavaScript,而不是 CSS 來實現所有這一切。

          揭示概念

          今天,我們要掌握以下幾個概念:

          使用畫布上下文的 arc 方法創建圓。

          利用 requestAnimationFrame 函數實現平滑的圓形動畫。

          利用 JavaScript 類的強大功能來創建多個圓圈,而無需重復代碼。

          向我們的圓圈添加描邊樣式和填充樣式以獲得 3D 氣泡效果。

          你可以跟著我一起看,或者如果你想看源代碼,可以使用最終的codepen

          入門

          首先,我們需要一個 HTML5 Canvas 元素。 Canvas 是創建形狀、圖像和圖形的強大元素。 這就是氣泡將產生的地方。 讓我們來設置一下 -

          <canvas id="canvas"></canvas>

          為了使用畫布做任何有意義的事情,我們需要訪問它的上下文。 Context 提供了在畫布上渲染對象和繪制形狀的接口。

          讓我們訪問畫布及其上下文。

          const canvas=document.getElementById('canvas');
          const context=canvas.getContext('2d');

          我們將設置畫布以使用整個窗口的高度和寬度 -

          canvas.width=window.innerWidth;
          canvas.height=window.innerHeight;

          讓我們通過添加一些 css 為畫布提供一個漂亮的舒緩淺藍色背景。 這是我們要使用的唯一 CSS。 如果您愿意,也可以使用 JavaScript 來完成此操作。

          #canvas {
            background: #00b4ff;
          }

          是時候創造泡泡了!

          讓我們進入有趣的部分。 我們將通過單擊畫布來創建氣泡。 為了實現這一點,我們首先創建一個點擊事件處理程序:

          canvas.addEventListener('click', handleDrawCircle);

          由于我們需要知道在畫布上單擊的位置,因此我們將在句柄 DrawCircle 函數中跟蹤它并使用事件的坐標 -

          //We are adding x and y here because we will need it later.
          let x, y
          const handleDrawCircle=(event)=> {
            x=event.pageX;
            y=event.pageY;
          
          // Draw a bubble!
            drawCircle(x, y);
          };

          用圓弧法畫圓

          為了創建圓圈,我們將利用畫布上下文中可用的 arc 方法。 Arc 方法接受 x 和 y - 圓心、半徑、起始角和結束角,對于我們來說,這將是 0 和 2* Math.PI,因為我們正在創建一個完整的圓。

          const drawCircle=(x, y)=> {
            context.beginPath();
            context.arc(x, y, 50, 0, 2 * Math.PI);
            context.strokeStyle='white';
            context.stroke();
          };


          使用 requestAnimationFrame 方法移動圓圈

          現在我們有了圓圈,讓我們讓它們移動,因為……

          GIF



          請記住,當我們創建圓時,我們使用了 arc 方法,它接受 x 和 y 坐標 - 圓的中心。 如果我們快速移動圓的 x 和 y 坐標,就會給人一種圓在移動的印象。 讓我們試試吧!

          //Define a speed by which to increment to the x and y coordinates
          const dx=Math.random() * 3;
          const dy=Math.random() * 7;//Increment the center of the circle with this speed
          x=x + dx;
          y=y - dy;

          我們可以將其移至函數內 -

          let x, y;
          const move=()=> {
            const dx=Math.random() * 3;
            const dy=Math.random() * 7;  x=x + dx;
            y=y - dy;
          };

          為了讓我們的圓圈無縫移動,我們將創建一個動畫函數并使用瀏覽器的 requestAnimationFrame 方法來創建一個移動的圓圈。

          const animate=()=> {
            context.clearRect(0, 0, canvas.width, canvas.height);
            move();
              drawCircle(x,y);  requestAnimationFrame(animate);
          };//Don't forget to call animate at the bottom 
          animate();



          創建粒子:引入粒子類

          現在我們已經創建了一個圓圈,是時候創建多個圓圈了!

          但在我們創建多個圓圈之前,讓我們準備一下我們的代碼。為了避免重復我們的代碼,我們將使用類并引入 Particle 類。 粒子是我們動態藝術作品和動畫的構建塊。 每個氣泡都是一個粒子,具有自己的位置、大小、運動和顏色屬性。 讓我們定義一個 Particle 類來封裝這些屬性:

          class Particle {
            constructor(x=0, y=0) {}
            draw() {
              // Drawing the particle as a colored circle
              // ...
            }  move() {
              // Implementing particle movement
              // ...
            }
          }

          讓我們將一些已設置的常量移至 Particle 類 -

          class Particle {
            constructor(x=0, y=0) {
              this.x=x;
              this.y=y;
              this.radius=Math.random() * 50;
              this.dx=Math.random() * 3;
              this.dy=Math.random() * 7;
            }
            draw() {
              // Drawing the particle as a colored circle
              // ...
            }  move() {
              // Implementing particle movement
              // ...
            }
          }

          draw 方法將負責在畫布上渲染粒子。 我們已經在drawCircle中實現了這個功能,所以讓我們將它移動到我們的類中并將變量更新為類變量

          class Particle {
            constructor(x=0, y=0) {
              this.x=x;
              this.y=y;
              this.radius=Math.random() * 50;
              this.dx=Math.random() * 3;
              this.dy=Math.random() * 7;
              this.color='white';
            }
            draw() {
              context.beginPath();
              context.arc(this.x, this.y, this.radius, 0, 2 * Math.PI);
              context.strokeStyle=this.color;
              context.stroke();    context.fillStyle=this.color;
              context.fill();
            }  move() {}
          }

          同樣,讓我們在類中移動 move 函數 -

          move() {
              this.x=this.x + this.dx;
              this.y=this.y - this.dy;
          }

          現在,我們需要確保在事件處理程序中調用 Particle 類。

          const handleDrawCircle=(event)=> {
            const x=event.pageX;
            const y=event.pageY;
            const particle=new Particle(x, y);
          };canvas.addEventListener('click', handleDrawCircle);

          由于我們需要在 animate 函數中訪問該粒子,以便調用其 move 方法,因此我們將該粒子存儲在一個名為 molecularArray 的數組中。 當創建大量粒子時,這個數組也會很有幫助。 這是反映這一點的更新代碼 -

          const particleArray=[];
          const handleDrawCircle=(event)=> {
            const x=event.pageX;
            const y=event.pageY;  const particle=new Particle(x, y);
            particleArray.push(particle);
          };canvas.addEventListener('click', handleDrawCircle);

          記得也要更新動畫功能 -

          此時,您將在屏幕上看到這個粒子 -



          驚人的! 現在,到了有趣的部分! 讓我們創建很多圓圈并設計它們的樣式,使它們看起來像氣泡。

          為了創建大量氣泡,我們將使用 for 循環創建粒子并將它們添加到我們在此處創建的粒子數組中。

          const handleDrawCircle=(event)=> {
            const x=event.pageX;
            const y=event.pageY;
            for (let i=0; i < 50; i++) {
              const particle=new Particle(x, y);
              particleArray.push(particle);
            }
          };canvas.addEventListener('click', handleDrawCircle);

          在動畫函數中,我們將通過清除畫布并在新位置重新繪制粒子來不斷更新畫布。 這會給人一種圓圈在移動的錯覺。

          const animate=()=> {
            context.clearRect(0, 0, canvas.width, canvas.height);
            particleArray.forEach((particle)=> {
              particle?.move();
              particle?.draw();
            });  requestAnimationFrame(animate);
          };animate();


          現在我們有了移動的氣泡,是時候給它們添加顏色,使它們看起來像氣泡了!

          我們將通過向氣泡添加漸變填充來實現此目的。 這可以使用 context.createRadialGradient 方法來完成。

          const gradient=context.createRadialGradient(
            this.x,
            this.y,
            1,
            this.x + 0.5,
            this.y + 0.5,
            this.radius
          );
          gradient.addColorStop(0.3, 'rgba(255, 255, 255, 0.3)');
          gradient.addColorStop(0.95, '#e7feff');context.fillStyle=gradient;



          總結

          恭喜! 您剛剛僅使用 HTML Canvas 和 JavaScript 創建了一些超級有趣的東西。 您已經學習了如何使用 arc 方法、利用 requestAnimationFrame、利用 JavaScript 類的強大功能以及使用漸變設計氣泡以實現 3D 氣泡效果。

          請隨意嘗試顏色、速度和大小,使您的動畫真正獨一無二。

          請隨意嘗試顏色、速度和大小,使您的動畫真正獨一無二。

          我希望您在學習本教程時能像我在創建它時一樣獲得樂趣。 現在,輪到你進行實驗了。 我很想看看你是否嘗試過這個以及你創造了什么。 與我分享您的代碼鏈接,我很樂意查看。


          主站蜘蛛池模板: 一区二区三区视频免费| 日韩免费一区二区三区在线 | 中日韩一区二区三区| 亚洲国产激情一区二区三区 | 在线播放国产一区二区三区| 中日韩精品无码一区二区三区| 一区二区免费国产在线观看| 一区二区国产精品| jazzjazz国产精品一区二区| 国产在线一区二区杨幂| 中文无码一区二区不卡αv| 日韩人妻一区二区三区免费| 四虎成人精品一区二区免费网站| 丝袜人妻一区二区三区| 成人国产精品一区二区网站| 国模精品视频一区二区三区| 久久毛片一区二区| 国产主播在线一区| 无码人妻精品一区二区蜜桃| 亲子乱av一区区三区40岁| 毛片无码一区二区三区a片视频| 人妻久久久一区二区三区| 亚洲福利一区二区精品秒拍| 国产伦理一区二区三区| 亚洲成av人片一区二区三区| 精品欧洲AV无码一区二区男男| 免费一区二区三区在线视频| 国产一区二区精品久久91| 中文精品一区二区三区四区| 美女视频免费看一区二区 | 久久久91精品国产一区二区三区| 国产一区二区三区亚洲综合| 一区二区三区在线观看视频 | 亚洲毛片不卡av在线播放一区| 国产精品一区二区三区99| 久久AAAA片一区二区| 三上悠亚日韩精品一区在线| 国产乱码精品一区三上 | 国产一区二区三区在线2021 | 国精品无码一区二区三区左线| 亚洲国产日韩在线一区|