前面兩篇文章，學(xué)習(xí)了JavaScript中DOM、BOM相關(guān)基礎(chǔ)知識(shí)后，今天我們將結(jié)合前面所學(xué)內(nèi)容，利用DOM操作實(shí)現(xiàn)常見的網(wǎng)頁(yè)動(dòng)畫效果；結(jié)合知識(shí)點(diǎn)有相關(guān)案例效果演示，另外本文所設(shè)計(jì)的源碼和配套素材可在文末獲取；

JavaScript網(wǎng)頁(yè)特效

學(xué)習(xí)目標(biāo)

• offset的屬性與作用
• client的屬性與作用
• scroll的屬性與作用
• 封裝簡(jiǎn)單動(dòng)畫函數(shù)
• 網(wǎng)頁(yè)輪播圖

I、元素偏移量

獲得元素距離帶有定位父元素的位置

獲得元素自身的width和height

1.offset常用的屬性

2.offset與style的區(qū)別

案例：獲取鼠標(biāo)在盒子內(nèi)的坐標(biāo)

思路：盒子內(nèi)的坐標(biāo)可以通過鼠標(biāo)事件的e.pageX獲取到頁(yè)面坐標(biāo)再減去element.offsetLeft來(lái)得到；

var box=document.querySelector('.box');
box.addEventListener('click',function(e){
    var x=e.pageX - this.offsetLeft;
    var y=e.pageY - this.offsetTop;
    console.log('x:'+x+',y:'+y);
})

案例：模態(tài)框拖拽

需求：

（1）點(diǎn)擊彈出層，會(huì)淡出模塊框，并且顯示灰色半透明的遮擋層；

（2）點(diǎn)擊關(guān)閉按鈕，可以關(guān)閉模態(tài)框，并且同時(shí)關(guān)閉灰色半透明遮擋層；

（3）鼠標(biāo)放到模態(tài)框最上面一行，可以按住鼠標(biāo)拖拽模態(tài)框在頁(yè)面中移動(dòng)；

（4）鼠標(biāo)松開，可以停止拖動(dòng)模態(tài)框移動(dòng)；

分析：

（1）拖拽事件，鼠標(biāo)是按著的狀態(tài)，故mousemove和mouseup須卸載mousedown事件里面；

（2）在拖拽的過程中，鼠標(biāo)的位置相對(duì)于組件的坐標(biāo)是不變的，因此為了改變組件的位置，需要將頁(yè)面坐標(biāo)減去相對(duì)組件坐標(biāo)來(lái)獲取；

var link=document.querySelector('#link');
var login_window=document.querySelector('#login');
var close_button=document.querySelector('#closeBtn');
var bg=document.querySelector('#bg');
link.addEventListener('click',function(){
    login_window.style.display='block';
    bg.style.display='block';
})
close_button.addEventListener('click',function(){
    login_window.style.display='none';
    bg.style.display='none';
})
// 拖動(dòng)事件三個(gè)過程：mousedown、mousemove、mouseup
var title=document.querySelector('#title');
title.addEventListener('mousedown',function(e){
    var x=e.pageX - login_window.offsetLeft;
    var y=e.pageY - login_window.offsetTop;
    document.addEventListener('mousemove',move);
    function move(e){
        login_window.style.left=e.pageX - x + 'px';
        login_window.style.top=e.pageY -y + 'px';
    }
    document.addEventListener('mouseup',function (e) {
        document.removeEventListener('mousemove',move);
    });
});

案例:仿京東放大鏡效果

分析：

（1）mask界面與big界面可以通過鼠標(biāo)事件設(shè)置dispaly屬性即可；mouseover顯示mask，mouseleave隱藏mask、mousemove移動(dòng)mask

（2）mask的left與top的值可以通過鼠標(biāo)在prew_img中的位置來(lái)獲取；

（3）為了讓mask界面中央跟著鼠標(biāo)指針走，則需要減去mask尺寸一半的偏移量；

（4）防止mask頁(yè)面跑出prew_img，需要對(duì)偏移量進(jìn)行判斷；

（5）大圖片移動(dòng)距離怎么計(jì)算？mask移動(dòng)距離/mask最大移動(dòng)距離=大圖片移動(dòng)距離/大圖片最大移動(dòng)距離；所以大圖片移動(dòng)距離=mask移動(dòng)距離 * 大圖片移動(dòng)最大距離 / 遮擋層最大移動(dòng)距離；

window.addEventListener('load',function(){
    var prew_img=document.querySelector('.preview_img');
    var mask=document.querySelector('.mask');
    var big=document.querySelector('.big');
    prew_img.addEventListener('mouseover',function(){
        mask.style.display='block';
        big.style.display='block';
    })
    prew_img.addEventListener('mousemove',function(e){
        // 獲取鼠標(biāo)在prew_img元素內(nèi)的坐標(biāo)
        var x=e.pageX - this.offsetLeft;
        var y=e.pageY - this.offsetTop;
        // 防止mask頁(yè)面跑出prew_img盒子
        var maskX=x - mask.offsetWidth / 2;
        // 遮擋層的最大移動(dòng)距離maskMax
        var maskMax=this.offsetWidth - mask.offsetWidth;
        if(maskX <=0){
            maskX=0;
        }else if(maskX >=maskMax){
            maskX=maskMax;
        }
        var maskY=y - mask.offsetHeight / 2;
        if(maskY <=0){
            maskY=0;
        }else if(maskY >=maskMax){
            maskY=maskMax;
        }
        // 讓mask界面中央跟著鼠標(biāo)指針走
        mask.style.left=maskX + 'px';
        mask.style.top=maskY + 'px';
        // 讓big界面內(nèi)容跟著mask位置移動(dòng)，
        // 大圖片移動(dòng)距離=mask移動(dòng)距離 * 大圖片移動(dòng)最大距離 / mask最大移動(dòng)距離
        var big_img=document.querySelector('.bigImg');
        var bigMax=big_img.offsetWidth - big.offsetWidth;
        // 大圖片移動(dòng)距離
        var bigMoveX=maskX * bigMax / maskMax;
        var bigMoveY=maskY * bigMax / maskMax;
        big_img.style.left=-bigMoveX + 'px';
        big_img.style.top=-bigMoveY + 'px';
    });

    prew_img.addEventListener('mouseleave',function(){
        mask.style.display='none';
        big.style.display='none';
    });
});

II、元素的可視區(qū)

立即執(zhí)行函數(shù)

不需要調(diào)用，立馬能自己執(zhí)行的函數(shù);

// 寫法一：
(function(){})()
// 寫法二：
(function(){}())

立即執(zhí)行函數(shù)也可以傳遞參數(shù)：

(function(a,b){
console.log(a+b);
})(1,2)

立即執(zhí)行函數(shù)的作用是獨(dú)立創(chuàng)建了一個(gè)作用域，里面所有的變量都是局部變量，不會(huì)有命名沖突的情況；

III、元素滾動(dòng)scroll

使用scroll系列相關(guān)屬性可以動(dòng)態(tài)得到元素的大小、滾動(dòng)距離；

scroll系列屬性 作用 備注 element.scrollTop 返回被卷去的上側(cè)距離 返回的數(shù)值不帶單位 element.scrollLeft 返回被卷去的左側(cè)距離 返回的數(shù)值不帶單位 element.scrollWidth 返回自身的實(shí)際寬度，不含邊框 返回的數(shù)值不帶單位 element.scrollHeight 返回自身的實(shí)際高度，不含邊框 返回的數(shù)值不帶單位

案例：仿淘寶固定側(cè)邊欄

• 1.原先側(cè)邊欄是絕對(duì)定位
• 2.當(dāng)頁(yè)面滾動(dòng)到一定的位置，側(cè)邊欄改為固定定位
• 3.頁(yè)面繼續(xù)滾動(dòng)，會(huì)讓頂部顯示出來(lái)

頁(yè)面被卷去的頭部可以通過：window.pageYOffset來(lái)獲得

// 1.獲取元素
var sliderBar=document.querySelector('.slider-bar');
var topBar=document.querySelector('.header');
var banner=document.querySelector('.banner');
var main=document.querySelector('.main');
var goBack=document.querySelector('.goBack');

var barHeight=banner.offsetTop;
var sliderBarTop=sliderBar.offsetTop;
var fixTop=sliderBarTop - barHeight;
var mainTop=main.offsetTop;
// 2.頁(yè)面滾動(dòng)事件
document.addEventListener('scroll',function(){

    if(window.pageYOffset >=barHeight){
        sliderBar.style.position='fixed';
        sliderBar.style.top=fixTop + 'px';
    }else{
        sliderBar.style.position='absolute';
        sliderBar.style.top=sliderBarTop + 'px';
    }
    if(window.pageYOffset >=mainTop){
        goBack.style.display='block';
    }else{
        goBack.style.display='none';
    }
})

IV、鼠標(biāo)事件

當(dāng)鼠標(biāo)移動(dòng)到元素上時(shí)就會(huì)觸發(fā)mouseenter事件，類似mouseenter

兩者的區(qū)別是：mouseover鼠標(biāo)經(jīng)過自身盒子會(huì)觸發(fā)、經(jīng)過子盒子也會(huì)觸發(fā)；而mouseenter只有經(jīng)過自身盒子才會(huì)觸發(fā)；

原因是mouseenter不會(huì)冒泡；跟mouseenter搭配的通常是mouseleave

V、動(dòng)畫函數(shù)

1.動(dòng)畫實(shí)現(xiàn)的原理：

通過定時(shí)器setInterval()不斷移動(dòng)盒子位置；

實(shí)現(xiàn)步驟：

• 獲得盒子當(dāng)前位置
• 讓盒子在當(dāng)前位置加上一個(gè)移動(dòng)距離
• 加上一個(gè)結(jié)束定時(shí)器的條件
• 盒子需要添加定位，才能使用element.style.left

//利用setInterval設(shè)置一個(gè)box元素從左向右移動(dòng)400像素的動(dòng)畫
var box=document.querySelector('.box');
var timer=setInterval(function(){
    if(box.offsetLeft > 200){
        // 停止動(dòng)畫，本質(zhì)上是清除定時(shí)器
        clearInterval(timer);
    }
    box.style.left=box.offsetLeft + 5 + 'px';
},50);

2.動(dòng)畫函數(shù)的封裝

將動(dòng)畫函數(shù)封裝起來(lái)，利用JS是動(dòng)態(tài)語(yǔ)言的特性，通過設(shè)置對(duì)象的方式，給每個(gè)不同的元素指定不同的定時(shí)器；

// 簡(jiǎn)單動(dòng)畫函數(shù)的封裝,目標(biāo)對(duì)象obj,目標(biāo)位置target
function animate(obj,target){
    // 如果設(shè)置一個(gè)按鈕啟動(dòng)動(dòng)畫，會(huì)存在一個(gè)bug,只要不斷點(diǎn)擊按鈕，動(dòng)畫會(huì)越走越快；
    // 原因是啟動(dòng)了太多定時(shí)器，解決方案是，讓元素只有一個(gè)定時(shí)器執(zhí)行
    clearInterval(obj.timer);
    obj.timer=setInterval(function(){
    if(obj.offsetLeft > target){
        // 停止動(dòng)畫，本質(zhì)上是清除定時(shí)器
        clearInterval(obj.timer);
    }
    obj.style.left=obj.offsetLeft + 5 + 'px';
},50);
}
//利用setInterval設(shè)置動(dòng)畫
var btn=document.querySelector('button');
var box1=document.querySelector('.box1');
btn.addEventListener('click',function(){
    animate(box1,400);
});

3.緩動(dòng)動(dòng)畫原理

緩動(dòng)動(dòng)畫就是讓元素運(yùn)動(dòng)速度有所變換，最常見的就是讓速度慢慢停下來(lái)；

思路：讓盒子每次移動(dòng)的距離慢慢變小；

核心算法：每次移動(dòng)的步長(zhǎng)=(目標(biāo)值-現(xiàn)在的位置)/10這里的10是份數(shù)可以是9也可以是8；

停止的條件是：當(dāng)前盒子的位置等于目標(biāo)位置就停止定時(shí)器；

// 緩動(dòng)動(dòng)畫
function animate(obj,target){
    // 清除定時(shí)器
    clearInterval(obj.timer);
    obj.timer=setInterval(function() {
        // 每次運(yùn)行定時(shí)器都要重新計(jì)算步長(zhǎng)值，所以步長(zhǎng)值寫在定時(shí)器里面
        var step=(target - obj.offsetLeft)/10;
        // 如果step是正值則往大取整，如果step是負(fù)值則往小取整
        step=step >=0 ? Math.ceil(step) : Math.floor(step);
        if(obj.offsetLeft==target){
            clearInterval(obj.timer);
        }
        // 緩動(dòng)動(dòng)畫核心算法：前進(jìn)步長(zhǎng)=（目標(biāo)-當(dāng)前）/ 10
        obj.style.left=obj.offsetLeft + step + 'px';
    },50);
}

動(dòng)畫函數(shù)添加回調(diào)函數(shù)

回調(diào)函數(shù)原理：函數(shù)可以作為一個(gè)參數(shù)，將這個(gè)函數(shù)作為參數(shù)傳入到另一個(gè)函數(shù)里面，當(dāng)這個(gè)函數(shù)執(zhí)行完成后，再執(zhí)行傳進(jìn)去的這個(gè)函數(shù)，這個(gè)過程叫做回調(diào)。

回調(diào)函數(shù)位置：寫到定時(shí)器結(jié)束的位置

// 緩動(dòng)動(dòng)畫
function animate(obj,target,callback){
    // 清除定時(shí)器
    clearInterval(obj.timer);
    obj.timer=setInterval(function() {
        // 每次運(yùn)行定時(shí)器都要重新計(jì)算步長(zhǎng)值，所以步長(zhǎng)值寫在定時(shí)器里面
        var step=(target - obj.offsetLeft)/10;
        // 如果step是正值則往大取整，如果step是負(fù)值則往小取整
        step=step >=0 ? Math.ceil(step) : Math.floor(step);
        if(obj.offsetLeft==target){
            clearInterval(obj.timer);
            if(callback){
                // 調(diào)用函數(shù)
                callback();
            }
        }
        // 緩動(dòng)動(dòng)畫核心算法：前進(jìn)步長(zhǎng)=（目標(biāo)-當(dāng)前）/ 10
        obj.style.left=obj.offsetLeft + step + 'px';
    },50);
}

將動(dòng)畫函數(shù)封裝到單獨(dú)的JS文件

在head里引入JS文件

<script src="animate.js"></script>

實(shí)際調(diào)用過程中可以直接調(diào)用JS中定義的函數(shù)

var sliderbar=document.querySelector('.sliderbar');
var con=document.querySelector('.con');
sliderbar.addEventListener('mouseenter',function(){
    animate(con,-160,function () {
        // 動(dòng)畫執(zhí)行完畢，將左箭頭轉(zhuǎn)為右箭頭
        sliderbar.children[1].innerHTML='→';
    });
})
sliderbar.addEventListener('mouseleave',function(){
    animate(con,0,function () {
        sliderbar.children[1].innerHTML='←';
    });
})

案例：網(wǎng)頁(yè)輪播圖

功能需求：

• 鼠標(biāo)經(jīng)過輪播圖模塊，左右按鈕顯示，離開隱藏左右按鈕；
• 鼠標(biāo)點(diǎn)擊右側(cè)按鈕一次，圖片往左播放一張，以此內(nèi)推，左側(cè)按鈕同理；
• 圖標(biāo)播放的同時(shí)，下面小圓圈模塊跟隨一起變化；
• 點(diǎn)擊小圓圈，可以播放相應(yīng)圖片；
• 鼠標(biāo)不經(jīng)過輪播圖，輪播圖也會(huì)自動(dòng)播放圖片；
• 鼠標(biāo)經(jīng)過，輪播圖模塊，自動(dòng)播放停止

window.addEventListener('load', function () {
    //===0.定義變量，獲取元素
    var focus=document.querySelector('.focus');
    var arrowL=document.querySelector('.arrow-l');
    var arrowR=document.querySelector('.arrow-r');

    //===1.鼠標(biāo)經(jīng)過輪播圖模塊，左右按鈕顯示，離開隱藏左右按鈕；=====focus.addEventListener('mouseenter', function () {
        arrowL.style.display='block';
        arrowR.style.display='block';
        clearInterval(timer);
        timer=null;
    });
    focus.addEventListener('mouseleave', function () {
        arrowL.style.display='none';
        arrowR.style.display='none';
        timer=window.setInterval(function () {
            arrowR.click();
        }, 3000);
    });
    //===2.根據(jù)輪播圖的數(shù)量自動(dòng)生成小圓圈
    var ul=focus.querySelector('ul');
    var ol=focus.querySelector('.circle');
    var pictureWidth=focus.offsetWidth;
    // 獲取到輪播圖圖片的數(shù)量length
    var length=ul.children.length;
    // 顯示當(dāng)前圖片的索引
    var circle=0;
    // 顯示當(dāng)前圖片的索引
    var num=0;
    // 創(chuàng)建元素插入到ol中
    for (var i=0; i < length; i++) {
        var li=document.createElement('li');
        // 給沒一個(gè)小圓圈添加一個(gè)index屬性，方便點(diǎn)擊事件的ul移動(dòng)長(zhǎng)度的確定
        li.setAttribute('index', i);
        // 給每一個(gè)小圓圈添加點(diǎn)擊事件
        li.addEventListener('click', function () {
            // 移除其他小圓圈的選中屬性
            for (var i=0; i < length; i++) {
                ol.children[i].className='';
            }
            // 設(shè)置當(dāng)前選中小圓圈的選中屬性
            this.className='current';
            // 定義選中的小圓圈的索引
            var index=this.getAttribute('index');
            num=index;
            circle=index;
            animate(ul, -pictureWidth * index);
        });
        ol.appendChild(li);
    }
    ol.children[0].className='current';

    //===3.鼠標(biāo)點(diǎn)擊右側(cè)按鈕一次，圖片往左播放一張，以此內(nèi)推，左側(cè)按鈕同理；==// 為了實(shí)現(xiàn)無(wú)縫滾動(dòng)，需要將第一張圖添加到最后一張圖中
    var lastLi=ul.children[0].cloneNode(true);
    ul.appendChild(lastLi);
    // 設(shè)置一個(gè)節(jié)流閥，防止按鈕在短時(shí)間內(nèi)點(diǎn)擊過多
    var flag=true;
    arrowR.addEventListener('click', function () {
        if (flag) {
            flag=false;
            if (num==ul.children.length - 1) {
                ul.style.left=0;
                num=0;
            }
            num++;
            animate(ul, -pictureWidth * num, function () {
                flag=true;
            });
            circle++;
            if (circle==ol.children.length) {
                circle=0;
            }
            activateCircle(circle);
        }
    });

    arrowL.addEventListener('click', function () {
        if (flag) {
            flag=false;
            if (num==0) {
                num=ul.children.length - 1;
                ul.style.left=-num * pictureWidth + 'px';
            }
            num--;
            animate(ul, -num * pictureWidth, function () {
                flag=true;
            });
            if (circle==0) {
                circle=ol.children.length;
            }
            circle--;
            activateCircle(circle);
        }
    });

    // 排他法思想點(diǎn)亮小圓圈
    function activateCircle(index) {
        for (var i=0; i < ol.children.length; i++) {
            ol.children[i].className='';
        }
        ol.children[index].className='current';
    }

    // 實(shí)現(xiàn)輪播圖自動(dòng)播放
    var timer=window.setInterval(function () {
        arrowR.click();
    }, 3000);
});

顯示效果：

輪播圖自動(dòng)播放的原理是：設(shè)置一個(gè)定時(shí)器使用click（）函數(shù)模擬按鈕點(diǎn)擊事件；

輪播圖實(shí)現(xiàn)無(wú)縫滾動(dòng)的原理是：將第一個(gè)圖動(dòng)態(tài)加在最后一張圖上，當(dāng)切到最后一張圖時(shí)，重新設(shè)置元素布局距離，再執(zhí)行滑動(dòng)動(dòng)畫。

防止同一個(gè)按鈕在短時(shí)間內(nèi)點(diǎn)擊次數(shù)過多，可以設(shè)置一個(gè)節(jié)流閥，將啟動(dòng)節(jié)流閥的操作寫在動(dòng)畫回調(diào)函數(shù)里，這樣只有當(dāng)動(dòng)畫執(zhí)行完畢后才才可以重新恢復(fù)按鈕的點(diǎn)擊功能；

頁(yè)面滾動(dòng)動(dòng)畫可以使用函數(shù)：window.scroll(x,y)可以滾動(dòng)至頁(yè)面的指定坐標(biāo)位置；

最后：

本文配套源碼與素材獲取：https://gitee.com/yushengtan/jscode

關(guān)于JavaScript在網(wǎng)頁(yè)動(dòng)畫中的使用就介紹到這里，下一節(jié)我們將繼續(xù)深入介紹JavaScript的異步調(diào)用相關(guān)知識(shí)的學(xué)習(xí)~

年前，粒子動(dòng)畫席卷了網(wǎng)絡(luò)，并成功地為自己開辟了一個(gè)利基市場(chǎng)。當(dāng)前對(duì)具有高科技氛圍和幾何裝飾的設(shè)計(jì)的巨大癡迷使它們成為當(dāng)今更受歡迎的解決方案之一。

使用粒子動(dòng)畫給人留下深刻印象
隨著時(shí)間的推移，技術(shù)成熟了。從散落在畫布上的雜亂無(wú)章的小白點(diǎn)，它變成了一種潛力巨大的工具。這不是什么特別的東西，但它有一定的令人驚嘆的因素。此外，它完美地為高科技、幾何和商務(wù)美學(xué)做出了貢獻(xiàn)——自然而然地完成了它們。

前提是：粒子動(dòng)畫要給人留下深刻印象。而且，開發(fā)人員始終堅(jiān)持這一假設(shè)，充分利用它。讓我們考慮一下這個(gè)解決方案的真正粉絲創(chuàng)建的一些驚人的代碼片段。

NO.1 Justin Windle 的 30,000 個(gè)粒子

這里的標(biāo)題不言自明。船上有 30,000 個(gè)粒子，您會(huì)期待一些宏偉的東西。賈斯汀溫德爾當(dāng)然達(dá)到了我們的期望。他的概念令人難以置信。用你的鼠標(biāo)到處玩。物理學(xué)只是例外。這個(gè)版本的粒子動(dòng)畫在開發(fā)者中很受歡迎，盡管規(guī)模沒有那么大。

NO.2 Alex Safayan 在水中的魚

Alex Safayan 提出了幾乎相同的解決方案，但在這種情況下，粒子越來(lái)越大。鼠標(biāo)光標(biāo)也將這些點(diǎn)推開，形成帶有微妙漣漪效果的痕跡。動(dòng)畫的行為讓人想起魚靠近水面時(shí)的運(yùn)動(dòng)。注意物理學(xué)：點(diǎn)之間的相互作用是經(jīng)過深思熟慮的。

NO.2 浮游生物——Marco Dell'Anna 的粒子生命

獲得 2017 年度最受關(guān)注項(xiàng)目獎(jiǎng)的 Plankton 無(wú)疑是值得關(guān)注的。該項(xiàng)目不僅著迷于想法，還著迷于實(shí)現(xiàn)。從像手套一樣適合這里的微妙色彩到看起來(lái)令人難以置信的自然的華麗行為，Marco Dell'Anna 對(duì)細(xì)節(jié)有著敏銳的洞察力。

NO.4 Marco Dell'Anna的星塵

我喜歡這里華麗的復(fù)古氛圍、霓虹燈和華麗的色彩。很難把你的眼睛從它身上移開。Stardust 是設(shè)計(jì)和編碼的共生體，是一部鼓舞人心的杰作。

NO.5 Akimitsu Hamamuro 的重力點(diǎn)

Akimitsu Hamamuro 邀請(qǐng)您在他的游樂場(chǎng)添加所謂的“重力點(diǎn)”。它們侵入點(diǎn)的混亂運(yùn)動(dòng)，像磁鐵一樣拉動(dòng)它們。雖然它們不扮演軌道中心的角色；然而，它們形成了迫使粒子向其方向移動(dòng)的焦點(diǎn)。

NO.6 Nate Wiley 的 Particle Orb CSS

如今，球體是英雄區(qū)域非常流行的風(fēng)格選擇。Nate Willey 對(duì)這一趨勢(shì)的看法令人印象深刻。由于微小的顆粒，球體看起來(lái)很脆弱，同時(shí)由于經(jīng)過深思熟慮的行為而堅(jiān)固。他分解和重新形成球體的程序非常棒。

NO.7 Kevin Rajaram 的粒子波

Kevin Rajarm 汲取了粒子動(dòng)畫的美麗和優(yōu)雅，并用Three.js的強(qiáng)大來(lái)增強(qiáng)它，帶來(lái)了一個(gè)精致但真正復(fù)雜的概念。令人驚嘆的海浪景色讓人感覺未來(lái)主義、人工和迷人。

非正統(tǒng)用途

還有更令人印象深刻的使用粒子動(dòng)畫的方法。讓我們走出常規(guī)，開箱即用地思考：這種方法很容易使標(biāo)識(shí)和字母等元素受益。

NO.8 Tamino Martinius 的交互式粒子標(biāo)志

Interactive Particle Logo 就是一個(gè)典型的例子。它看起來(lái)像是上面提到的 Justin Windle 片段的重新設(shè)想的解決方案。雖然沒有 30,000 個(gè)點(diǎn)，但它由數(shù)量驚人的粒子組成，巧妙地組成了“CODEPEN”這個(gè)詞。這是該概念找到實(shí)際用途的案例之一。

NO.9 Louis Hoebregts 的文本到粒子

Louis Hoebregts 在這支筆中提供了先前解決方案的彩色版本。這里的文本是由一千個(gè)彩色實(shí)心圓圈組成的，這些圓圈通過與上一個(gè)示例相同的交互性來(lái)豐富。

NO.10 粒子由 Marco Dell'Anna 書寫文本

雖然這不是一個(gè)戲劇性的入口，但它有一些令人著迷的東西。流暢的動(dòng)畫慢慢揭開人物的面紗，點(diǎn)燃我們的興趣。這個(gè)概念有某種神秘的風(fēng)格，類似于“陌生人”的介紹。

NO.11 馬可·戴爾安娜 (Marco Dell'Anna) 就這樣做

這是Marco Dell'Anna的又一杰作。這一次，粒子動(dòng)畫參與塑造了著名的耐克標(biāo)志。從晦澀、半透明到明快、立體，動(dòng)畫逐漸暴露了標(biāo)志，不顯眼地抓住了整體的注意力。

引人注目的效果

粒子動(dòng)畫是越小越好的情況之一。點(diǎn)越小，可以實(shí)現(xiàn)的效果就越令人印象深刻。一方面，由于涉及幾何和物理，它看起來(lái)很復(fù)雜。另一方面，由于精致的形狀，它看起來(lái)脆弱而微妙。這種獨(dú)特的融合使粒子動(dòng)畫與眾不同且引人注目。

粒子動(dòng)畫在企業(yè)網(wǎng)站建設(shè)中的運(yùn)用案例

圖片來(lái)源：素馬設(shè)計(jì)