好久沒有寫 css 動畫了，久到我都忘了了，想當初在大學的時候，寫起 css3 的動畫，那可是6得很。
今天要實現個水波紋動畫，暫且記錄一下思路吧
剛開始拿到的時候還是有點傻眼，第一種方案，我的想法是，用乙個 div 就夠了，然後可以用 css3 radial-gradient 的徑向漸變，但是我們的產品需求是根據資料大小，分三種情況，展示乙個圈，兩個圈，三個圈這樣，那就感覺不能用乙個 div 搞定了。因為在 react 專案中直接分為三個 div 會好一點，我會通過資料控制 div 的個數。
ps: 在之後我會補上只用乙個 div 然後用徑向漸變的寫法。
現在先：
然後為每個圈加樣式和動畫,這裡要注意，三個圈的動畫時間要一致，這樣看起來才是波紋擴散的感覺
#grad2{
display: flex;
justify-content: center;
align-items: center;
width: 100px;
height: 100px;
background: #20308b;
.inner{
width: 8px;
height: 8px;
border-radius: 5px;
background-color: #00d3e9;
animation: moveinner 1s infinite;
.middle{
display: flex;
justify-content: center;
align-items: center;
width: 24px;
height: 24px;
border-radius: 12px;
background-color: rgba(0, 211, 233, 0.2);
animation: movemiddle 1s infinite;
.biggest{
display: flex;
justify-content: center;
align-items: center;
width: 40px;
height: 40px;
border-radius: 20px;
background-color: rgba(0, 211, 233, 0.1);
animation: movebiggest 1s infinite;
@keyframes moveinner{
from {
width: 4px;
height: 4px;
to {
width: 8px
height: 8px;
@keyframes movemiddle{
from {
width: 8px;
height: 8px;
to {
width: 24px
height: 24px;
@keyframes movebiggest {
from {
width: 8px;
height: 8px;
to {
width: 40px
height: 40px;
最後合成的**：
```html
!doctype html>
shader uv動畫水波紋
效果 讓波紋在鯊魚身上動 設計思路 模型上有多個貼圖，找到一張黑色背景的貼圖 我們這裡貼圖使用的疊加的方式，而黑色背景的貼圖，黑色 0,0,0,0 不會產生任何影響 在unity中找到乙個模型，找到它的材質面板，建立乙個shader unlit shader shader custom bigfis...
OC實現水波紋動畫
用oc原生的貝塞爾曲線來實現該效果，下面直接上 void showwatterrippleanimation void addanimationview 將目標曲線做放大動畫 void addanimationwithshapelayer cashapelayer layer delay cgflo...
android屬性動畫繪製水波紋
思路 通過屬性動畫 valueanimator特性不停的執行二階貝塞爾曲線函式，view不停的重繪，就達到繪製水波紋的效果了開始屬性動畫 public void startanimation valueanimator.start 開始繪製曲線 override protected void ond...