Ionic Cookbook - Third Edition

How it works...

The main concept behind the physics animation in this app is the dynamics.animate method from the Dynamics.js library. Let's start with the button in the template, as follows:

<ion-fab center bottom> 
  <button ion-fab #thisEl (click)="animateMe(thisEl)"> 
    <ion-icon name="mic"></ion-icon> 
  </button> 
</ion-fab> 

The button mentioned in the preceding code is the floating button that you can click to create a nice bouncing effect by calling the animateMe() method.

To learn more about Ionic's floating button, you can refer to the Ionic documentation at http://ionicframework.com/docs/components/#floating-action-buttons.

The simple logic here is as follows:

• If the button is animated, isAnimating must be True. Once it's True, any additional ...