iPhone’s beautiful "Battery Recharger" as a SilverLight animation

Have I told you readers how much I love the user interface of Apple’s iPhone? Well I do!

There are so many goodies in there that over time I’ll reproduce them using Blend and SilverLight . Today I’ll be recreating the “Battery Recharger”.

Here’s what it looks like on the iPhone

Now here’s my version done using Blend and if you click on the image it will go to the demo page where I have animated it using SilverLight

Apple took such care in painting a true “glass & light effect”. The light shining on the battery was done with such detail. I had to improvise with numerous separate “paths” to get the same result. If you look at my source you will see that each face (there are 4, top of the battery, middle of the battery, bottom of the battery, knob of the battery) has several “path shapes” each with complicated gradient brushes to produce  the lighting & glass effect of Apple’s control.

I love this control

Below is the tutorial of how I made this control. Enjoy!

“Top” and the “Bottom” are mirror images of each other. It is made up of several path’s each with different gradient fills.

Middle is made up of the “Filler” and a series of path’s with gradients. There are 2 groupings of paths (“group behind” and “group in-front” ) that surround the “filler path”, they were done this way to give a true 3D like affect.

The “Knob” is an exact copy of the “Top” that’s just shrunken down.

The “Filler” is a simple path shape that can be any color, which is currently showing as burgundy red.

The “Status” is a textblock that shows the status of the recharging battery.

The “Reflection” is an exact mirrored copy of the entire battery (without the text). Even the “Filler” is copied so that when the real “Filler” is animated we can animate the reflection as well giving an truly real reflection effect (see the demo animation).

The “TOP” part of the battery was achieved as follows, remember the “Bottom” and the “Knob” are just copies of the “Top”:

Take the basic “top” shape and make 5 copies, each copy will be the exact same shape but will have different gradients applied to them to give the glass/lighting effect.

First copy : forms the basic overall color of the top of the battery. It’s a black themed battery with a tinge of gray gradient at the bottom

 

Second copy: Lighting effect at the bottom part of the overall top shape

Third copy: Lighting effect in the middle of the overall top shape

Forth copy: Another lighting effect near the top of the overall top shape

Fifth copy: top most lighting effect of the overall top shape

all parts combined results in:

The “Middle” part of the battery was achieved as follows:

Like the “top” the “Middle” is made up of 5 copies of the same shape.

First copy: Basic color of the middle shape. Made up of a gradient

Second copy: Filler that we programmatically slide in width

Third copy: a lighting effect layer

Forth copy: another lighting effect layer

Fifth copy: another light effect layer

 

Combining all the layers without the filler layer it looks like this:

Add the filler layer to the combined layers above it looks like this:

I don’t think I need to go into the showing the rest of the parts of the battery, as I mentioned above they are all just variations of the previously covered 2 groups “Top”, “Middle”.

As you can see from my demo page this can be animated any way your heart desires. Create a stack of batteries and have them animate in different colors, the options are endless. I love SilverLight

Source code will soon be added to the “Blend Candy” area, stay tuned.