O'Reilly logo

PhoneGap 4 Mobile Application Development Cookbook by Zainul Setyo Pamungkas

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Creating simple tweens and animations

Although altering elements in our application's pages is relatively easy, we can further enhance the user's experience by adding some animation to these elements as we change them.

How to do it...

We will use the tween() method within the XUI library to alter a property of an image and tween the element to its new position on the screen:

  1. Firstly, create a new PhoneGap project named tweens by running this line:
    phonegap create tweens com.myapp.tweens tweens
    
  2. Add a devices platform. You can choose to use Android, iOS, or both:
    cordova platform add ios
    cordova platform add android
    
  3. Open www/index.html and clean up the unnecessary elements. Include a reference to the XUI JavaScript library and the Cordova JavaScript ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required