帷幕揭示视图

时间:2015-03-04 22:33:53

标签: ios uiview uiview-hierarchy view-hierarchy

我正在尝试实现以下具有挑战性的效果: 我想移动白色的窗帘"向下以露出红色方框。 (注意:在下面的屏幕截图中,窗帘是白色,背景为灰色)

问题出在视图层次结构中。

为了让盒子隐藏在初始位置,它必须放在窗帘后面,但是为了显示在最终位置,它必须位于窗帘的顶部。

我怎样才能欺骗"并且让它看起来像窗帘真的透露出一个流畅的动画框?

**BEFORE** **AFTER**

谢谢!

1 个答案:

答案 0 :(得分:0)

你需要2个图像和一个面具。你完全模糊的灰色区域和你的白色背景框。窗帘的图像只是底边的一个面具。这样它可以为窗帘绘制底部边缘,而不是消除灰色重叠区域。

在每个框架的顶部设置一个起始位置: 仅绘制/复制窗帘的大小,通过窗帘复制相应的红色框区域。 将起始位置向下移动一条扫描线并等待下一帧。重复直到完成。

基本上,没有白色的窗帘,只有隐藏的"隐藏的"包含框的白色背景的图像。根据您的绘制方式,您的蒙版图像可能是另一个带有Alpha通道的图像。

编辑:根据要求,提供一些示例代码。但是,很有可能无论你使用什么来获取屏幕上的图形已经有了屏蔽的绘图程序,你最好还是使用它。 这段代码未经测试,但应提供逻辑和工作几乎任何地方。我不熟悉iOS,不知道您的图像像素是什么格式,24位,32位等,并使用" PixelType"作为替代品。

这也假设具有黑色背景的白色窗帘边缘在绘画程序中被制作为8位图像,并且黑色是零和白色其他任何东西。它应该与其他两个图像的宽度相同,并且只有窗帘边缘所需的高度。

struct Mask { char *mData; // set this to the image data of your 8 bit mask int mWidth; // width in pixels, should be the same as your 2 images int mHeight; // height in pixels of the mask }; int iRevealPos = 0; // increment each frame value until box is revealed. // Hopefully, your pixel type is a basic type like byte, short or int. void Reveal(PixelType *foreground, PixelType *background, Mask *mask) { int height = (iRevealPos < mask->mHeight) ? iRevealPos : mask->mHeight; // account for initial slide in PixelType *src = background + (iRevealPos * mask->mWidth); // background box at current reveal position PixelType *dst = foreground + (iRevealPos * mask->mWidth); // matching foreground screen position int count = mask->mWidth * height; char *filter = mask->mData; if ((iRevealPos < mask->mHeight)) // adjust for initial slide in filter += (mask->mHeight - iRevealPos) * mask->mWidth; while (count--) { if (*filter++) // not black? *dst++ = *src++; // copy the box image else // skip this pixel { src++; dst++; } } // if you create your mask with a solid white line at the top, you don't need this if (iRevealPos > mask->mHeight) // fixup, so the mask doesn't leave a trail { src = background + ((iRevealPos-1) * mask->mWidth); dst = foreground + ((iRevealPos-1) * mask->mWidth); count = mask->mWidth; while (count--) *dst++ = *src++; } iRevealPos++; // bump position for next time } 如果你创建一个白色的实线或2个顶部的面具,你就不需要第二个环来修复面具留下的任何痕迹。我也允许窗帘在开始时滑入而不是完全弹出。这是未经测试的,所以我可能已经为这个错误做了调整。