从该图像的中心开始生长的图像上的圆形蒙版 [英] Round mask on an image growing from centre of that image

问题描述

单击某些按钮，我需要显示黑胶唱片的图像.图像将出现在按钮旁边的某处，并且是透明的png，使其看起来很圆. 问题在于，需要使用从图像中心的点开始动画并扩展以显示整个记录"的圆形蒙版进行显示.如何创建一个圆形的动画蒙版，该蒙版将显示记录"的图像而无需缩放/缩放图像.

On a click of some button I need to show an image of a vinyl record. The image will appear somewhere next to the button and is a transparent png to make it look round. The problem is it needs to be shown using a circle mask animating from a dot in the centre of the image and expanding to show the whole "record". How to create a rounded animated mask that will reveal the "record" image without zooming/rescaling the image.

有人知道一个具备JavaScript之类功能的jQuery库吗?

Does anyone know a JavaScript or preferably jQuery library capable of something like that?

如果您用另一种语言知道这样的事情，这可能会帮助我写自己的东西.

If you know of such a thing in a different language it might help me to write something of my own.

谢谢.

推荐答案

也许您可以创建一个大的白色(或背景色)PNG，并在中央设置一个alpha透明孔.将其放置在要显示的图像上方，然后按比例放大，同时将其固定在其中心点.缩放到整个基础图像都在透明孔内的位置后，请移除覆盖图像.

Perhaps you could create a large white (or background-colored) PNG with an alpha transparency hole in the center. Place this on top of the image to be revealed, then scale it up while keeping it pinned at its center point. Once it's scaled to the point where the entire underlying image is within the transparent hole, remove the covering image.

我不知道它会如何执行(可能很差！)，但这是一个想法.

I have no idea how this would perform (probably badly!), but it's a thought.

这篇关于从该图像的中心开始生长的图像上的圆形蒙版的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！