画布中的动画剪贴蒙版

Posted 2023-03-25

【中文标题】画布中的动画剪贴蒙版

【英文标题】：Animated Clipping Mask in Canvas

【发布时间】：2021-02-20 12:27:47

【问题描述】：

我正在尝试实现一个动画，其中你有三层图像 - 背景、前景和用作遮罩的第三层（圆形）。

背景和前景图像是静态的，前景位于背景之上。 bg 始终可见，但 fg 最初是隐藏的。圆圈在背景图片内随机移动，在圆圈内可以看到前景图片（剪裁的那种）

笔链接 - https://codepen.io/the_anshulkumar/full/MWeqNJM

请注意，当 fg 图像固定到一个位置时，所需的效果仅在大约 10 秒后开始。在前 10 秒内，前景图像会随着圆圈移动，这是不希望的。

虽然我尝试使用 CSS 和 javascript 来实现它，但它并不完美。对于初学者来说，圆圈和前景图像需要一段时间才能进入它们的位置。其次，我正在为 top 和 left 属性设置动画，这使得页面非常慢。

$('.circles').animate( top: newq[0], left: newq[1] , speed, function()
    animateDiv();        
);
$('.fg').animate( top: ("-"+newq[0]), left: ("-"+newq[1]) , speed, function()
    animateDiv();
);

可以固定前景移动的开始 10 秒吗？这可以通过 CSS 转换而不是动画 top 和 left 属性来完成吗？第三种选择是如果这可以通过 Canvas 完成。我知道画布会是更好的选择，因为动画可以轻松地以 60fps 运行，但我对 html5 画布的了解几乎为零。

任何帮助将不胜感激。非常感谢

【参考方案1】：

下面是实现相同的Pure CSS方法

我在上面的链接中做了类似于你的东西，并纠正了问题中提到的缺陷。

我为前景图像创建了一个 div，并将溢出设置为隐藏，这样图像就不会跨越镜头的定义尺寸，并为镜头和前景图像的移动应用了单独的动画。

之前我使用了具有非常大的散布值的盒子阴影，它会产生一个洞效果，然后为它创建动画，当我们需要背景图像时，这被证明是徒劳的。

全屏查看

* 
  margin: 0px;
  padding: 0px;


.background 
  position: absolute;
  height: 100%;
  width: 100%;
  background-color: black;


.background img 
  margin-left: 300px;


p 
  color: white;
  font-size: 100px;


.lense 
  position: absolute;
  height: 350px;
  width: 350px;
   

  box-shadow: 0px 0px 0px 10000px transparent;
  border-radius: 50%;
  transform: translate(200px, 0px);
  animation: move_lense 5s infinite;


@keyframes move_lense 
  0% 
    transform: translate(200px, 0px);
  
  25% 
    transform: translate(600px, 100px);
  
  50% 
    transform: translate(550px, 200px);
  
  75% 
    transform: translate(300px, -50px);
  
  100% 
    transform: translate(200px, 0px);
  


.outer_lense 
  position: absolute;
  height: 320px;
  width: 320px;
  border-radius: 50%;
  border: 10px solid;
  margin: 5px;
  z-index: 8;


.lense_content 
  height: 320px;
  width: 320px;
  border-radius: 50%;
  margin: 15px;
  
  overflow: hidden;


.lense_content img 
  margin-left: -120px;
  animation: move_foreground 5s infinite;


@keyframes move_foreground 
  0% 
    transform: translate(20px, 0px);
  
  25% 
    transform: translate(-20px, 100px);
  
  50% 
    transform: translate(-50px, 200px);
  
  75% 
    transform: translate(-10px, -50px);
  
  100% 
    transform: translate(20px, 0px);
  

<div class="background">
  <img src="https://i.ibb.co/fF86YJy/bg.png"  >
</div>
<div class="lense">
  <div class="outer_lense"></div>
  <div class="inner"></div>
  <div class="lense_content">
    <img src="https://i.ibb.co/YNt6hbk/fg.png">
  </div>
</div>

【讨论】：

非常感谢@Ac_mmi。但是纯色框阴影的问题在于它也会遮挡背景图像。并且透明度不会起作用，因为那样我们将能够看穿前景。

但是我实际上可以使用你的css动画。将移动应用于圆圈，并将具有相反值的反移动应用于前景。使前景停留在一个地方。现在动画流畅多了。非常感谢这个想法:)

@AnshulKumar 我正在寻找一种与链接中给出的方法相匹配的方法，但我认为盒子阴影无法解决问题我会告诉你我是否可以在没有盒子阴影的情况下做到这一点

@AnshulKumar 我再次编辑了代码，这对你有用，提前一段时间抱歉

非常感谢朋友。实际上，我终于设法使用了您的 CSS 动画，它现在对我来说非常有效。我们实际上试图达到的效果是一种扫描效果。镜头扫描背景（黑色颗粒 - 代表噪声）并去除噪声并在前景中呈现有用的数据（镜头内的白色和绿色）。