一加Ace2 Pro官宣：普及16G內存 引領24G
一加官方今天繼續為本月發布的新機一加Ace2 Pro帶來預熱，公布了內存方面的信息。“淘汰 8GB ，12GB 起步，16GB 普及，24GB 引領，還有呢？#一加Ace2Pro#，2023 年 8 月，敬請期待。”同時
最近看到一個非常有趣的動畫效果：水波進度動畫，想了一下實現思路，分享給大家~
效果如下
圖片
圖片
先把最基礎的組件代碼樣式寫出來，其實無非就是四個部分：
1、圓形水缸
2、水波
2、百分比數字
3、進度條
我們先把圓形水缸、百分比數字、進度條畫出來，水波待會再畫
圖片
可以看到初步效果已經出來了！
圖片
最重點的就是水波，其實這個水波就是個障眼法罷了，我畫張圖你們就懂了，其實就是一個圓角正方形，一直在旋轉和上升下降，讓用戶有一種水波的視覺感~
圖片
所以我們可以畫一個圓角正方形，并且讓他一直旋轉即可
圖片
圖片
并且我們要讓這個水波效果，隨著百分比的增加而上升，隨著百分比的減少而下降，所以得監聽百分比
圖片
圖片
現在可以發現已經有水波效果了！
圖片
但是感覺水溢出來了，所以需要給水缸設置一下溢出隱藏！
圖片
最終實現效果：
<template> <div class="wave-container"> <!-- 水缸 --> <div class="main"> <!-- 百分比數字 --> <div class="main-number">{{ percent }}</div> <!-- 水波效果 --> <div ref="wave" class="wave"></div> </div> <!-- 進度條 --> <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);// 監聽百分比，計算 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://m.www897cc.com/showinfo-26-103361-0.html神奇的進度條！水缸進度動畫效果怎么實現的？
聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。郵件：2376512515@qq.com
上一篇： C# 開發技巧：輕松監控方法執行耗時
Copyright ? 2016-2023 天津谷騏科技有限公司 版權所有 sitemap.xml
違法及侵權請聯系：2376512515@qq.com 津ICP備18001702號
津公網安備 12010102000574號