animation - 如何使用 SVG 径向动画循环颜色并保持边缘透明度?
问题描述
我有一个圆盘形 SVG,我想在其上应用一组颜色,这些颜色在一个循环中从中心向外辐射,同时还保持边缘(即停止不透明度)透明度,类似于对象没有的情况一个应用的动画。
以下是动画版的主要障碍:
不保留边缘透明度。在某些情况下,我可能会通过覆盖类似的形状来解决这个问题,以适应边缘透明度,并使用与目标对象的背景颜色互补的颜色——但在这种情况下,对象位于渐变之上。
循环重置为配置的值
values="1%; ..."
,而不是平滑地循环/循环颜色。不知道如何解决这个问题,或者是否甚至可以使用径向动画。
提前感谢您的任何想法/建议!
<div style="background: linear-gradient(#231f20 0%, #231f20 21%, rgba(31, 28, 29, 0.89) 49%, rgba(20, 18, 18, 0.57) 74%, rgba(1, 1, 1, 0.02) 99%, rgba(0, 0, 0, 0) 100%);">
<svg viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" width="300" style="display:inline-block;">
<defs>
<radialGradient id="gradient">
<stop offset="0%" stop-color="#d6d2c4"/>
<stop offset="24%" stop-color="#ffd600"/>
<stop offset="42%" stop-color="#a6cd57"/>
<stop offset="61%" stop-color="#f8971f"/>
<stop offset="100%" stop-color="#f8971f" stop-opacity="0"/>
</radialGradient>
</defs>
<!-- radial gradient animation -->
<circle cx="5" cy="5" r="4" fill="url('#gradient')" />
</svg>
<svg viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" width="300" style="display:inline-block;">
<defs>
<radialGradient id="gradientAnimate">
<stop offset="0%" stop-color="#d6d2c4"/>
<stop offset="10%" stop-color="#ffd600"/>
<stop offset="20%" stop-color="#a6cd57"/>
<stop offset="30%" stop-color="#f8971f"/>
<stop offset="40%" stop-color="#f8971f"/>
<stop offset="50%" stop-color="#d6d2c4"/>
<stop offset="70%" stop-color="#ffd600"/>
<stop offset="80%" stop-color="#a6cd57"/>
<stop offset="90%" stop-color="#f8971f"/>
<stop offset="100%" stop-color="#f8971f" stop-opacity="0"/>
<animate attributeName="r" dur="5s" repeatCount="indefinite"
values="50%; 100%; 300%" />
</radialGradient>
</defs>
<!-- radial gradient animation -->
<circle cx="5" cy="5" r="4" fill="url('#gradientAnimate')" />
</svg>
</div>
解决方案
解决您的问题的方法是应用蒙版:具有从白色到黑色的径向渐变的圆圈:
<div style="background: linear-gradient(#231f20 0%, #231f20 21%, rgba(31, 28, 29, 0.89) 49%, rgba(20, 18, 18, 0.57) 74%, rgba(1, 1, 1, 0.02) 99%, rgba(0, 0, 0, 0) 100%);">
<svg viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" width="300" style="display:inline-block;">
<defs>
<radialGradient id="gradient">
<stop offset="0%" stop-color="#d6d2c4"/>
<stop offset="24%" stop-color="#ffd600"/>
<stop offset="42%" stop-color="#a6cd57"/>
<stop offset="61%" stop-color="#f8971f"/>
<stop offset="100%" stop-color="#f8971f" stop-opacity="0"/>
</radialGradient>
</defs>
<!-- radial gradient animation -->
<circle cx="5" cy="5" r="4" fill="url('#gradient')" />
</svg>
<svg viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" width="300" style="display:inline-block;">
<defs>
<radialGradient id="rg">
<stop offset="50%" stop-color="#fff"></stop>
<stop offset="100%" stop-color="#000"></stop>
</radialGradient>
<mask id="maskCirc">
<circle cx="5" cy="5" r="4" fill="url(#rg)"></circle>
</mask>
<radialGradient id="gradientAnimate">
<stop offset="0%" stop-color="#d6d2c4"/>
<stop offset="10%" stop-color="#ffd600"/>
<stop offset="20%" stop-color="#a6cd57"/>
<stop offset="30%" stop-color="#f8971f"/>
<stop offset="40%" stop-color="#f8971f"/>
<stop offset="50%" stop-color="#d6d2c4"/>
<stop offset="70%" stop-color="#ffd600"/>
<stop offset="80%" stop-color="#a6cd57"/>
<stop offset="90%" stop-color="#f8971f"/>
<stop offset="100%" stop-color="#f8971f" stop-opacity="0"/>
<animate attributeName="r" dur="5s" repeatCount="indefinite"
values="50%; 100%; 300%" />
</radialGradient>
</defs>
<!-- radial gradient animation -->
<circle cx="5" cy="5" r="4" fill="url('#gradientAnimate')" style="mask: url(#maskCirc);"/>
</svg>
</div>
推荐阅读
- flask - 结合 React 和 Flask 路由
- javascript - Why doesn't the link generate where indicates
- python - 列表推导中的 if 和 else 有问题。如果列表为空,我需要将列表值设为某个值
- sql - 嵌套查询未从 Oracle 11g 中的主查询中获取 Oracle 中的值
- android - Firebase 存储 getDownloadUrl() 方法无法解析
- html - 如何添加 Powered by: 在横幅广告上?
- json - Flutter JSON String/Int 命令
- c - printf 打印错误的特殊字符
- java - 如何将文件分成几部分并分配它(多字部分)?
- google-cloud-speech - Google Speech to text 的超时问题