IMG_4416-0.JPG

in iOS, Tools

Animated flat button

A while ago, dribbble surprised me with this concept .
I have tried to replicate it using pop (you know that I absolutely love it).

However, after some trial an error I changed it slightly. This is a demo of the final result. Keep reading to know a bit more about it :)
flatButtonDemo

As you can see on the GIF above, the result is not quite the same as the example from dribbble.
My first approach was to use 2 lines, rotating them X amount of degrees from the centre.

pop2

However, I found some problems using the pop layer rotation property.

  1. The layer will rotate to the ‘toValue’ using its shortest path. So, if I want to rotate the line 2*Pi, the line will not animate at all.
  2. For that reason, it is not possible to spin a layer more than 1 revolution (well… it is possible but quite complex) so I couldn’t achieve easily the dribbble effect I was trying to imitate.

Before start looking for ways of solving those issues, I opted for a different way of designing the button. This time, instead of having 2 single lines, each line would be separated in 2 segments. That means, I can cover a lot more types of icons, thus having more flexibility (the button can morph from any type to any type of the available 9).

I will now try to add a finished version of the first button I presented (the one with only 2 lines), as I think the animations between states look a bit nicer.

You can find the VBFPopFlatButton project in Github.

You will also find the button as a Pod, because… I have finally submitted my first Cocoapod! :D

Thank you for reading! Any suggestions will be very much appreciated.

Leave a Reply