畫布中的動畫剪貼蒙版

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

下面是實現相同的純 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>