涟漪效应 - 边界半径问题

Posted 2023-03-06

【中文标题】涟漪效应 - 边界半径问题

【英文标题】：Ripple effect - border radius issue

【发布时间】：2017-07-25 04:11:20

【问题描述】：

我制作了以下动画：

Fiddle

如果你有大视网膜显示器（在小型 mac 视网膜上它也有问题） - 看到它看起来不错，但如果你把它带到非视网膜显示器上，它看起来有点模糊和 rectangle-d 而不是圆角。

如果您没有视网膜显示器（或 Mac 笔记本电脑） - 您可以使用 devtools 并将动画减慢到 10%，然后查看它在减慢时是否正常运行，但速度正常它看起来不同。

更新问题似乎主要在 Chrome 中，FF 运行良好。

简洁的 CSS：

.container 
  width: 700px;
  height: 128px;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
  cursor: pointer;

  .ripple-container 
    width: 100%;
    height: 100%;
    background-color: #F5B30C;
    position: relative;
    overflow: hidden;
  

  .ripple 
    position: absolute;
    background-color: blue;
    top: 0;
    right: 0;
    height: 3px;
    width: 3px;
    border-radius: 50%;
    transition: transform 1s;

    &.rippler-active 
      transition: transform 0.5s;
      transform: scale(500);
    
  

【问题讨论】：

我遇到了类似的问题，chrome 似乎以一种奇怪的方式“优化”了边缘。它似乎在转换时无法足够快地调整边界半径，因此它模糊了它。我相信有一些技巧或解决方法，但我建议使用 SVG。

顺便说一句，应该有背景颜色的不是您的波纹容器，而是它的父级，... 突然“波纹” R :D - 是的，Chrome 有时是一个讨厌的浏览器。 ..

是的，我主要从我的项目中复制粘贴，其中有一些更复杂的逻辑，这说明了重点，所以我保留了它。 Rippler 听起来不错，不是吗:)

是的 :D 喜欢 Ripley :) 来自 A L I E N，看看这个：***.com/a/37500979/383904

有意思，我试试看能不能集成，谢谢！

【参考方案1】：

而不是从 1 扩展到 500（这会产生各种地下邪恶的错误）... 从 0 缩放到（比如说）3，但不是将初始大小设置为 0（或 3px），而是需要设置为像 1400px 这样的大尺寸。

1400 像素 * 3 比例的波纹 = 意味着它可以扩展到 4200 像素，我认为这对于任何目的来说都绰绰有余：

var el = document.querySelector('.container');
var ripple = document.querySelector('.ripple');

el.addEventListener('click', function() 
  ripple.classList.toggle("ripple-active")
);

.container 
  height: 128px;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
  cursor: pointer;


.ripple-container 
  width: 100%;
  height: 100%;
  background-color: #F5B30C;
  position: relative;
  overflow: hidden;


.ripple 
  position: absolute;
  background-color: #3f3fd8;
  top: 0;
  right: 0;
  height: 1400px;
  width: 1400px;
  /* Notice the size!! */
  margin: -700px -700px auto auto;
  /* and set here the desired offset */
  border-radius: 50%;
  transition: transform 2s;
  transform: scale(0);


.ripple.ripple-active 
  transition: transform 2s;
  transform: scale(3);            /* 1400 * 3 !!! yey */

<div class="container">
  <div class="ripple-container">
    <div class="ripple"></div>
  </div>
</div>

【讨论】：

另一个想法是使波纹为容器宽度的 150% - 并使其为正方形（高度=宽度）。但是你很可能必须解决非水平元素（高度>宽度）的问题 - 并且逻辑上在移动设备上......