画布中的动画剪贴蒙版

Question

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

背景和前景图像是静态的，前景位于背景之上。 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 画布的了解几乎为零。

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

Answer 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" height="600" width="800">
</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>