One of the things I really like about web development, is the usage of the background-position CSS property. It allows you to move a background image around within its container. jFancyTile: A jQuery tile shifting image viewer plugin, realies heavily on this technique. Sadly, Xamarin doesn’t have a property like CSS that we can use out-of-the-box to recreate that effect.

But, with some help of FFImageLoading, we can get the same results. In particular, the CropTransformation can crop away parts of an image so we can have some fun with each individual tile that makes up the complete image. So today, we’ll see how to build beautiful tiled image animations with Xamarin.Forms. You can view the source on Github if you directly want to dive into the code. Since it’s 4th of July, I’ve made sure the demos include some fireworks as well!

Demo

Let’s take a look at what we’ll be creating. The text and images for this demo are from PopOptiq, but can easily be changed to suit your needs.

The concept

The idea can be broken down into several steps:

1. Split an image into sevaral tiles that together make up the complete image. The CropTransformation from FFImageLoading will help us to create these tiles.
2. Use Xamarin.Forms Animations to individually animate the tiles.
3. Add some settings to switch the animations, as well as the tile size and tile count. We’ll use the Master-Detail page to achieve this.

Now that we have these steps, let’s dive into them!

Splitting the image into tiles

Xamarin.Forms Animations

Xamarin has some very useful and easy Simple Animations. I’ve used them before to create animated profile cards. In this demo, I’ve created the following animations:

• Explode: Shatters the tiles in different directions
• Implode: Makes the tiles smaller
• Flip: Flip them left or right in 3D
• Spin: Spin them left or right around their center point

As you can imagine, loads of other different animations can be applied to these tiles.

Settings

To play around with the demo, I added some basic settings you can use. This will help find an ideal situation for your Tiled animations.

• The Tile Size is the value for both the height and width of each tile. You can calculate this dynamically based on the screen size, but for now it’s fixed in the configuration.
• The Tile Count is the number of tiles in each row or column. Take note that this number shouldn’t be too high due to performace issues.
• The selection of Animation Style is created to switch different kind of animations. You can easily add new ones as well by updating the TiledImageView!

Conclusion & Download

I think the demo does provide some interesting thoughts on how a different kind of animation for images can be made. It something different than you’d normally see on slideshows!

There are some things that I already want to point out to take into account:

• On some scales, there’s a very small gap visible between the Tiles. I think it has to do with the way FFImageLoading Crops an image.
• Although the demo works on both iOS and Android, iOS is the platform that produces the best results. This probably has to do with the way Android handles images.
• By default, FFImageLoading caches the cropped image once it has been rendered for the first time. This means animations will be smoother the next time the same Tile is produced.

Feel free to dive in the code on Github and send me a Pull Request if you want to see things differently! What do you think of this idea and approach? Let me know in the comments.

---

---