Control-Center-ios 7One of the coolest things about Corona’s next-generation engine (currently in private alpha) is the ability to take individual features and put them together in powerful ways. And since Apple just released iOS 7 this week, I’m going to show you how to reproduce the cool translucent glass effect in Corona SDK!

We’re going to combine containers, anchor points, and the blur filter effect to make it come alive.

You can see this effect in iOS 7 anytime you bring up Control Center, you’ll notice that as the overlay comes up from the bottom, it blurs the background beneath it.

Here’s a mockup we made using Corona’s new Graphics 2.0 engine to achieve the same effect:

In the video, we show this as a progression of several steps:

  1. Create a container that changes height, blurring the background underneath
  2. Darken the container so it’s easier to see the blur effect
  3. Display the Control Center buttons (it’s just a single PNG)

Most of the trickiness is in that first step. There’s actually a trick where your eye thinks the background underneath is blurred, but it’s in fact a screenshot that’s blurred and placed on top. The screenshot clip changes in height to complete the illusion.

To achieve this, we just use a container that grows from the bottom of the screen. So first step is to create a container, and position it at the bottom of the screen. The initial height is 30:

We have to set it up so that the container grows from the bottom of the screen, not its center (the default). We also set the ‘anchorChildren’ property to ‘false’. Otherwise, clip height changes will affect the position of the children:

Next step is where the magic happens. We take a screen capture, apply a blur filter, and place it inside the container. The illusion that we create is that as the height of the container grows, the blurred screenshot exactly overlays the original screen. Your eye thinks there’s translucent glass, but it’s just really a blurred object sitting on top of the original screen:

The last two steps are pretty straightforward:

* * *

With the launch of iOS 7, it’s becoming clear that Apple is really leveraging their graphics pipeline in ways that weren’t possible when the first iPhone came out. In fact, here’s how Apple’s Craig Federighi describes iOS 7′s new look linking it directly to advances in the graphics hardware:

“This is the first post-Retina (Display) UI (user interface), with amazing graphics processing thanks to tremendous GPU (graphics processing unit) power growth, so we had a different set of tools to bring to bear on the problem as compared to seven years ago (when the iPhone first launched).”

We agree — only we think you should be able to do this whether or not you’re on iOS!

See the original post:  

Graphics: iOS 7 Translucent Glass Effect