如何動畫（）同時部分圖像？

Question

我想在我的標題幻燈片上做特殊效果。我已經完成了通過將舊圖片放入新圖片來滑動幾張圖片的部分。

我的標題幻燈片圖像寬度= 1000px;高度= 400像素;

在幻燈片放映（大約5秒）中，圖像漸變到下一張圖片之間，我想要隨機更改所顯示圖像的亮度。但是，我希望亮度隨機在（寬度= 125px;高度= 100px）的部分中隨機變化。

我以爲我可以有我的活動圖像在Z指數：10;並在z-index中爲完全白色背景：9;那麼改變活動img的不透明度就可以做到這一點（除了它只會變得更清晰和不會變暗）。

但是沒有辦法做這樣的：$ active.animate（{不透明度：的Math.random（）* 0.7}，{coords1，coords2，coords3，時間：的Math.random（） * 200，queue：false}）;

可能的解決辦法是聲明32個變量（根據我的img大小，它分成32個寬度= 125px; height = 100px的塊），每個包含圖像的一部分，然後同時改變每個圖像的亮度。 ..但它似乎有點大膽，我不確定如何創建這32個變量。

任何人有更好的主意來解決我的問題？

預先感謝您。

Answer 1

我發現了一個便宜的伎倆，爲我做了這份工作。

基本上我使用淡入淡出類幻燈片，所以我做的是添加另一個類似的淡入淡出幻燈片頂部與更高的Z指數，但這次我準備預定義的面具與僞隨機黑白方塊。

我以比真實幻燈片更高的頻率播放了蒙版幻燈片，因此許多蒙版適用於相同的圖像，我將不透明度從0改爲0.3，這有效地增亮了白色方塊上的圖像並使圖像變暗在黑色的。

它給人的印象是隨機改變圖像的不透明度。

我希望這會有助於如果有人願意做同樣的效果。