Hey Reader/s,

This is my first post on Imaginea blog and since am not an avid blogger, please bear with my writing 🙂 . Please do like/share/comment for any suggestions/scoldings 😉

I Occasionally take up interesting tasks based on my adrenaline rush and this one based out of my last weekend and prior to that it was a totally different tech.

 

Story of this Post:

Not sure if you have used Facebook’s Paper App, which is available only on the US App Store, released back in 2014.

Someone said Paper was build using React Native, but i dont think so. (Please correct me, if am wrong).

I was totally stunned by the animations they had implemented in every user interaction on the screen. One of my favourite being the Like button animation, the flare effect or the spark/burst effect with particles blown around the button. For those, who can’t get access, have attached a video for them here.

 

Enter Fontli:

As you all already know Fontli is our Baby/Pet/Imaginea-Open-Source project, which is all organised in a single group, with codebase for iOSAndroid apps and separate repo for QA & Design(Since, design source files are larger in size, which is not accepted by GitLab, we’ve put all the design related stuff under GDrive). Lots of people are working on different repo’s(Your contributions are always welcome in here).

 

Enter SparkButton:

Like i said before, i’ll introduce you to an UI component that is similar to the FB’s Paper App’s Like Button, which is called as “SparkButton“, a demo of which is hosted on GitHub.

Here’s the “SparkButton” in action:

SparkButtonDemo

 

If you notice, the Like button animations has these components:

1.) On Like:

  • Button has bounce animation with these sequence: out, in, out, in, stable.
  • The Like button is replaced with Highlighted image.
  • When the button bounces out, the Particles animation is fired up.

2.) On UnLike:

  • Button bounces in these sequence: in, stable.
  • The Like button is replaced with un highlighted image.

 

For Bounce Animations:

I have used key frame animations to accomplish the bounce effect by manipulating the button’s size at the given frame.

UIView’s  contains block based key frame animations methods that’s available from 7.0 & above.

“UIView.animateKeyframesWithDuration(…)”

and you can add keyframe for any time interval by this method:

“UIView.addKeyframeWithRelativeStartTime(…)”

Pretty simple, right?

I know its basics, but for someone(atleast one) it might be new to them and could open up a new world of animations through it to them.

 

For Particle Animations:

In iOS world, we have something called “CAEmitterCell” & “CAEmitterLayer“, which basically handles all the particles related animations for us, we just have to tweak the variables of these classes to get out the animation we want.

Also, since i wrote this Swift, it was like writing out only the “objectName.propertyName = Value” throughout the SparkButton & SparkView classes. Yes, those are the only 2 classes.

SparkButton is a subclass of UIButton. So, any button instantiated that inherits from SparkButton can use the above 2 animations

SparkView -> Particles animator

SparkButton(SparkView added as subview) -> Bounce animations & Handles SparkView lifecycle.

I have also put up the demo project on GitHub. Please do have a look and suggestions are always welcome.

 

Conclusion:

I would like to write more such stories and contribute more to the Open Source world from where we take off all the time. Hope the same from you too brutus 😉

Thanks for your time!