如何用transition實現(xiàn)短視頻APP的點贊動畫

這篇文章主要講解了“如何用transition實現(xiàn)短視頻APP的點贊動畫”，文中的講解內(nèi)容簡單清晰，易于學(xué)習(xí)與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學(xué)習(xí)“如何用transition實現(xiàn)短視頻APP的點贊動畫”吧！

實現(xiàn)不同表情的不斷上升

如果使用純 CSS 實現(xiàn)這一整套動畫的話。我們首先需要實現(xiàn)一段無限循環(huán)的，大量不同的表情不斷向上漂浮的動畫。

像是這樣：

這個整體還是比較容易實現(xiàn)的，核心原理就是同一個動畫，設(shè)置不同的 transition-duration，transition-dalay，和一定范圍內(nèi)的旋轉(zhuǎn)角度。

我們首先要實現(xiàn)多個表情，一個 DOM 標(biāo)簽放入一個隨機的表情。

我們可以手動一個一個的添加：

<ul class="g-wrap">
    <li>?</li>
    <li>??</li>
    <li>?</li>
    // ... 隨機設(shè)置不同的表情符號，共 50 個
    <li>...</li>
</ul>

當(dāng)然，我個人覺得這樣太麻煩。我習(xí)慣利用 SASS 的循環(huán)函數(shù)及隨機函數(shù)，利用偽元素的 content 去隨機生成不同表情。像是這樣：

<ul class="g-wrap">
    <li></li>
    <li></li>
    <li></li>
    // ... 共50個空標(biāo)簽
</ul>

$expression: "?", "?", "??", "?", "?", "?", "?", "?", "??", "?", "?", "?", "?", "?";
.g-wrap {
    position: relative;
    width: 50px;
    height: 50px;
}
@for $i from 1 to 51 {
    li:nth-child(#{$i}) {
        position: absolute;
        top: 0;
        left: 0;
        width: 50px;
        height: 50px;
        
        &::before {
            content: nth($expression, random(length($expression)));
            position: absolute;
            font-size: 50px;
        }
    }
}

這樣，我們就能得到 50 個疊加在一起的表情：

因為透明度為 1 的緣故，只能看到最上面的幾個表情，實際上這里疊加了 50 個不同的表情。

這里的核心就是 content: nth($expression, random(length($expression)))，我們利用了 SASS 的 random 和 length 和 nth 等方法，隨機的將 $expression 列表中的表情，添加給了不同的 li 的 before 偽元素的 content 內(nèi)。

接下來，我們需要讓它們動起來。

這個簡單，添加一個無限的 transform: translate() 動畫即可：

@for $i from 1 to 51 {
    li:nth-child(#{$i}) {
        animation: move 3000ms infinite linear;
    }
}
@keyframes move {
    100% {
        transform: translate(0, -250px);
    }
}

效果如下：

OK，由于 50 個元素都疊加在一起，所以我們需要將動畫區(qū)分開來，我們給它們添加隨機的動畫時長，并且，賦予不同的負 transition-delay 值：

@for $i from 1 to 51 {
    li:nth-child(#{$i}) {
        animation: move #{random() * 2500 + 1500}ms infinite #{random() * 4000 / -1000}s linear;
    }
}
@keyframes move {
    100% {
        transform: translate(0, -250px);
    }
}

效果如下：

效果已經(jīng)非常接近我們想要的了！這里有一點點的跳躍，需要理解 move #{random() * 2500 + 1500}ms infinite #{random() * 4000 / -1000}s linear 這里大段代碼：

• #{random() * 2500 + 1500}ms 生成 1500ms ~ 4000ms 之間的隨機數(shù)，表示動畫的持續(xù)時長

• #{random() * 4000 / -1000}s 生成 -4000ms ~ 0s 之間的隨機數(shù)，表示負的動畫延遲量，這樣做的目的是為了讓動畫提前進行

如果你對負的 transition-delay 的作用還不了解，可以看看我的這篇文章 -- 深入淺出 CSS 動畫

到這，還是不夠隨機，我們再通過隨機添加一個較小的旋轉(zhuǎn)角度，讓整體的效果更加的隨機：

@for $i from 1 to 51 {
    li:nth-child(#{$i}) {
        transform: rotate(#{random() * 80 - 40}deg);
        animation: move #{random() * 2500 + 1500}ms infinite #{random() * 4000 / -1000}s linear;
    }
}
@keyframes move {
    100% {
        transform: rotate(0) translate(0, -250px);
    }
}

這里 transform: rotate(#{random() * 80 - 40}deg) 的作用就是隨機生成 -40deg ~ 40deg 的隨機數(shù)，產(chǎn)生一個隨機的角度。

至此，我們就得到了這樣一個效果：

利用 transition 化腐朽為神奇

到這里。很多同學(xué)可能還不明白，明明是點贊一次產(chǎn)生一個表情，為什么需要一次生成這么多不斷運動的表情效果呢？

這是因為，由于 CSS 沒法直接正面做到點擊一次，生成一個表情，所以我們需要換一種思路實現(xiàn)。

如果這些表情一直都是在運動的，只不過不點擊的時候，它們的透明度都為 0，我們要做的，就是當(dāng)我們點擊的時候，讓它們從 opacity: 0 變到 opacity: 1。

要實現(xiàn)這一點，我們需要巧妙的用到 transition。

我們以一個表情為例子：

• 默認它的透明度為 opacity: 0.1

• 點擊的時候，它的透明度瞬間變成 opacity: 1

• 然后，通過 transition-delay 讓 opacity: 1 的狀態(tài)保持一段時間后

• 逐漸再消失，變回 opacity: 0.1

看上去有億點點復(fù)雜，代碼會更容易理解：

li {
    opacity: .1;
    transition: 1.5s opacity 0.8s;
}
li:active {
    opacity: 1;
    transition: .1s opacity;
}

效果如下：

一定要理解上面的代碼！巧妙地利用 transition 在正常狀態(tài)和 active 狀態(tài)下的變化，我們實現(xiàn)了這種巧妙的點擊效果。

如果我們把初始的 opacity: 0.1 改成 opacity: 0 呢？就會是這樣：

好，我們結(jié)合一下上面兩個動畫：

• 我們將所有的表情，默認的透明度改為 0.1

• 被點擊的時候，透明度變成 1

• 透明度在 1  維持一段時間，逐漸消失

代碼如下：

@for $i from 1 to 51{
    li:nth-child(#{$i}) {
        position: absolute;
        top: 0;
        left: 0;
        width: 50px;
        height: 50px;
        transform: rotate(#{random() * 80 - 40}deg);
        animation: move #{random() * 2500 + 1500}ms infinite #{random() * 4000 / -1000}s linear;
        opacity: .1;
        transition: 1.5s opacity .8s;
        
        &::before {
            content: nth($expression, random(length($expression)));
            position: absolute;
        }
    }
    
    li:active {
        opacity: 1;
        transition: .1s opacity;
    }
}

@keyframes move {
    100% {
        transform: rotate(0) translate(0, -250px);
    }
}

效果如下：

嘿，是不是有那么點意思了！

好最后一步，我們通過一個點擊按鈕引導(dǎo)用戶點擊，并且給與一個點擊反饋，每次點擊的時候，點贊按鈕放大 1.1 倍，同時，我們把默認表情的透明度從 opacity: 0.1 徹底改為 opacity: 0。

這樣，整個動畫的完整的核心代碼：

<ul class="g-wrap">
    <li></li>
    <li></li>
    <li></li>
    // ... 共50個空標(biāo)簽
</ul>

$expression: "?", "?", "??", "?", "?", "?", "?", "?", "??", "?", "?", "?", "?", "?";
.g-wrap {
    position: relative;
    width: 50px;
    height: 50px;
    &::before {
        content: "??";
        position: absolute;
        width: 50px;
        height: 50px;
        transition: 0.1s;
    }
    &:active::before {
        transform: scale(1.1);
    }
}

@for $i from 1 to 51 {
    li:nth-child(#{$i}) {
        position: absolute;
        width: 50px;
        height: 50px;
        transform: rotate(#{random() * 80 - 40}deg);
        animation: move #{random() * 2500 + 1500}ms infinite #{random() * 4000 / -1000}s cubic-bezier(.46,.53,.51,.62);
        opacity: 0;
        transition: 1.5s opacity .8s;
        &::before {
            content: nth($expression, random(length($expression)));
            position: absolute;
        }
    }
    li:active {
        transition: .1s opacity;
        opacity: 1!important;
    }
}
@keyframes move {
    100% {
        transform: rotate(0) translate(0, -250px);
    }
}

這里，需要注意的是：

• 點贊的按鈕，通過了父元素 .g-wrap 的偽元素實現(xiàn)，這樣的好處是，子元素 li 的 :active 點擊事件，是可以冒泡傳給父元素的，這樣每次子元素被點擊，我們都可以放大一次點贊按鈕，用于實現(xiàn)點擊反饋；

• 稍微修改一下緩動函數(shù)，讓整體效果更為均衡合理。

這樣，我們就得到了題圖一開始的效果，利用純 CSS 實現(xiàn)的點贊動畫：

感謝各位的閱讀，以上就是“如何用transition實現(xiàn)短視頻APP的點贊動畫”的內(nèi)容了，經(jīng)過本文的學(xué)習(xí)后，相信大家對如何用transition實現(xiàn)短視頻APP的點贊動畫這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關(guān)知識點的文章，歡迎關(guān)注！