Animations

Warning, your eyes might bleed while watching to the result of my design skills… The color are very sad. I still have not made my decisions about the color. So I keep it in the mockup style design by default.

Before I write more about what I discover after playing with animations that are in the box. Here is a GIF that will show you my progress. I still can enhance it later. That’s not beautiful but hey :) it’s that ugly too!

I know how a GIF can be annoying while reading. I apologize for that too ^_^

 

The Animation HomePage GIF.

The Animation HomePage GIF.

Show me some code!

Bonus: some screen shot of my code: (it’s faster to post some screenshot because I don’t have a code editor inside my blog yet).
At the moment I tool those screenshots, I didn’t have anything more than a command in my view model. The animation can’t be started until we bind a command to the control. That’s why the MenuUserPanelView command is binded to the CmdOpenPage.

When I work on a project on my spare time, I like to name my command CmdXXX. Because I like to have all my command grouped in the Intellisense while I code. The same kind of argument of those who name their private field with an underscore like _myVar. I was this kind of developper until I started using StyleCop which doesn’t like that and force me to use the “this” keyboard anytime I can. this._myVar isn’t the sexiest code I’ve so far. My eyes feel more confortable with a this.myVar. Real developers can argue about coding conventions for hours :P

The XAML of the HomePage.

The XAML of the HomePage.

 

C# code of an animation with Xamarin Forms.

C# code of an animation with Xamarin Forms.

 

I tested those animations on real devices. I have a Galaxy Note I (still working very good) and an iPod Touch 5 (a second hand product). On the Galaxy Note, the animations are lagging a bit. It’s rendering much better on iOS. And it’s an iPod Touch 5 (based on hardware, it’s the equivalent of the iPhone 4S). I did notice that depends on the order of the animation. If you combine more than 2 different animation at the same time, it will impact the user experience in a very bad way on Android. This advice is for animation of panels of controls like a stack of button, textbox etc. If you only animate a icon or a single component, you can try 3 animations at the same time. I can only advise you to experiment.

I didn’t make a lot of research on how Xamarin renders those animations. The FPS make me think that for Android, it’s rendered with CPU while GPU is used for iOS.

Leave a Reply

Your email address will not be published. Required fields are marked *