一加Ace2 Pro官宣：普及16G內(nèi)存 引領(lǐng)24G
一加官方今天繼續(xù)為本月發(fā)布的新機(jī)一加Ace2 Pro帶來預(yù)熱，公布了內(nèi)存方面的信息。“淘汰 8GB ，12GB 起步，16GB 普及，24GB 引領(lǐng)，還有呢？#一加Ace2Pro#，2023 年 8 月，敬請期待?！蓖瑫r(shí)
最近看到一個(gè)非常有趣的動畫效果：水波進(jìn)度動畫，想了一下實(shí)現(xiàn)思路，分享給大家~
效果如下
圖片
圖片
先把最基礎(chǔ)的組件代碼樣式寫出來，其實(shí)無非就是四個(gè)部分：
1、圓形水缸
2、水波
2、百分比數(shù)字
3、進(jìn)度條
我們先把圓形水缸、百分比數(shù)字、進(jìn)度條畫出來，水波待會再畫
圖片
可以看到初步效果已經(jīng)出來了！
圖片
最重點(diǎn)的就是水波，其實(shí)這個(gè)水波就是個(gè)障眼法罷了，我畫張圖你們就懂了，其實(shí)就是一個(gè)圓角正方形，一直在旋轉(zhuǎn)和上升下降，讓用戶有一種水波的視覺感~
圖片
所以我們可以畫一個(gè)圓角正方形，并且讓他一直旋轉(zhuǎn)即可
圖片
圖片
并且我們要讓這個(gè)水波效果，隨著百分比的增加而上升，隨著百分比的減少而下降，所以得監(jiān)聽百分比
圖片
圖片
現(xiàn)在可以發(fā)現(xiàn)已經(jīng)有水波效果了！
圖片
但是感覺水溢出來了，所以需要給水缸設(shè)置一下溢出隱藏！
圖片
最終實(shí)現(xiàn)效果：
<template> <div class="wave-container"> <!-- 水缸 --> <div class="main"> <!-- 百分比數(shù)字 --> <div class="main-number">{{ percent }}</div> <!-- 水波效果 --> <div ref="wave" class="wave"></div> </div> <!-- 進(jìn)度條 --> <Slider v-model:value="percent" class="percent-bar" :tipFormatter="null" /> </div></template><script setup lang="ts">import { ref, watch } from 'vue';import { Slider } from 'ant-design-vue';const percent = ref(0);const wave = ref<HTMLDivElement | null>(null);// 監(jiān)聽百分比，計(jì)算 topwatch( percent, v => { const waveEle = wave.value; if (waveEle) { waveEle.style.top = `${200 * (1 - v / 100)}px`; } }, { immediate: true, },);</script><style scoped lang="less">.wave-container { display: flex; flex-direction: column; align-items: center; .main { position: relative; width: 200px; height: 200px; border-radius: 50%; background: #fff; border: #fff solid 5px; display: flex; justify-content: center; align-items: center; // 增加樣式隱藏溢出 overflow: hidden; .main-number { font-size: 100px; z-index: 1; user-select: none; } } @keyframes rotateAnimation { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .wave { position: absolute; top: 200px; width: 400px; height: 400px; background: rgb(168, 168, 231); border-radius: 40%; animation: rotateAnimation 2s linear infinite; } .percent-bar { width: 200px; background: #fff; }}</style>
本文鏈接：http://www.tebozhan.com/showinfo-26-103361-0.html神奇的進(jìn)度條！水缸進(jìn)度動畫效果怎么實(shí)現(xiàn)的？
聲明：本網(wǎng)頁內(nèi)容旨在傳播知識，若有侵權(quán)等問題請及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。郵件：2376512515@qq.com
Copyright ? 2016-2023 天津谷騏科技有限公司 版權(quán)所有 sitemap.xml
違法及侵權(quán)請聯(lián)系：2376512515@qq.com 津ICP備18001702號
津公網(wǎng)安備 12010102000574號