Silverlight Flipping Tiles Animation

Date May 15, 2008 @ 11:36 pm in Microsoft, Silverlight

Back a few weeks ago I posted an example of how to create a 3D flip animation similar to the effect seen on an iPhone. Today I will build upon that procedural animation and simulate the flipping tile affect seen in the iTunes album art screen saver, available on a Mac.

In my example I have a total of 16 random tiles displayed from a collection of 42 different images. Any image not currently displayed is available to be randomly selected to replace an existing tile.  Here is how I achieve the effect. 

The project is comprised of a “Tile” UserControl , a class called “Media” and two generic lists (one to store references to the 16 tiles and one to store all 42 URI to the images).  The first step is to fill my page.xaml grid with 16 tiles.   Here is a snip of the code used to fill the grid.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
private void BuildCollection()
{
    int row = -1;
    int col = 0;
    for (int i = 0; i < 42; i++)
    {
        Uri imageUri = new Uri(string.Format("Images/{0}.png", 
		(i+1).ToString()), UriKind.Relative);
        if (i <= 16)
        {
            Tile tile = new Tile();
            Media media =  new Media(imageUri, true);
            tile.Media = media;
 
            if (col % 4 == 0)
            {
                row++;
                col = 0;
            }
            tile.SetValue(Grid.ColumnProperty, col.ToString());
            tile.SetValue(Grid.RowProperty, row.ToString());
            this.LayoutRoot.Children.Add(tile);
 
            col++;
            _tiles.Add(tile);
            _images.Add(media);
 
        }
        else
            _images.Add(new Media(imageUri, false));
    }
}

For those of you just getting familiar with the “Grid” control you might not be aware that it supports implicitly specifying columns and rows. In this example I leverage this to ensure my tiles form a nice 4×4 grid.  

As you can see from the code, I have chosen to store only the URI to the image and not store the image itself. I had some difficulty storing a “BitmapImage” object in my collection and retrieving it consistently when I was ready to flip a tile. The URI seems less efficient, was reliable.

Now that I have built up my grid and two collections, I can use a DispacherTimer to randomly select a tile and randomly select an image to be used as the backside of the flip. He is how that code looks.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
void _timer_Tick(object sender, EventArgs e)
{
    System.Random RandNum = new System.Random();
    int randomTile = RandNum.Next(16);
 
    bool match = false;
    while(!match)
    {
        int randomImage = RandNum.Next(42);
        if(!_images[randomImage].Displayed)
        {
            _images[randomImage].Displayed = true;
            _tiles[randomTile].Media.Displayed = false;
            _tiles[randomTile].Flip(_images[randomImage]);
            match=true;
            break;
        }
    }
}

As you can see I am using a boolean property in the “Media” object to determine if an image is already displayed. The second level of randomization is there to help ensures that I am giving each image equal chance of getting displayed.

If one were to examine the “Tile” UserControl, it looks almost exactly like the code I created for the 3D flip animation example. In  this situation instead of firing the flip based on a button click, I use the followings public method called from my main page.xaml DispatcherTimer tick.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
public void Flip(Media media)
{
    this.Media = media;
 
    if (_Front)
    {
        this.ImageBack.Source = new BitmapImage(_Media.ImageUri);
        _sb.Pause();
        _sb.AutoReverse = false;
        _sb.Begin();
        _Front = false;
    }
    else
    {
        this.ImageFront.Source = new BitmapImage(_Media.ImageUri);
        _sb.Pause();
        _sb.AutoReverse = true;
        _sb.Seek(_tsLastFrame);
        _sb.Resume();
 
        _Front = true;
    }
}

Code: LeopardSreenSaver.zip

/p>

7 Responses to “Silverlight Flipping Tiles Animation”

  1. Eugen said:

    you are a good job man. very nice samples.
    keep this way!

  2. Microsoft » Blog Archive » Silverlight Flipping Tiles Animation said:

    [...] joel wrote an interesting post today on Silverlight Flipping Tiles AnimationHere’s a quick excerptBack a few weeks ago I posted an example of how to create a 3D flip animation similar to the effect seen on an iPhone. Today I will build upon that procedural animation and simulate the flipping tile affect seen in the iTunes album art … [...]

  3. Silverlight articles and demos wrap-up for the last 3 days said:

    [...] Silverlight Flipping Tiles Animation – Joel Neubeck posts about how to build a flipping tiles animation similar to the one seen in the iTunes album art screen saver. [...]

  4. Faisal H Khan said:

    Great job.

  5. yaip said:

    Here are some Silverlight links that are interesting:

    http://www.justthinkart.com/sl/Student.aspx
    http://www.justthinkart.com/sl/Illustration/Acrylics.aspx
    http://www.justthinkart.com/sl/Digital/deepzoom_photos.aspx

  6. tick flip said:

    [...] animation and simulate the flipping tile affect seen in the iTunes album art screen saver, avaihttp://joel.neubeck.net/2008/05/silverlight-flipping-tiles-animation/April 2008 Columbia Journalism ReviewWho is her ???Hillary Democrat??? and why does he/she get to [...]

  7. timheuer said:

    a fan of joel’s work, i did a quick mod to wire up to Flickr http://timheuer.com/blog/archive/2008/05/19/silverlight-flickr-badge.aspx

Leave a Reply

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="">