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.
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:
Firstly, create a new PhoneGap project named
tweensby running this line:phonegap create tweens com.myapp.tweens tweensAdd a devices platform. You can choose to use Android, iOS, or both:
cordova platform add ios cordova platform add android
Open
www/index.htmland clean up the unnecessary elements. Include a reference to the XUI JavaScript library and the Cordova JavaScript file.We add an XUI
readyevent handler to run our code once the DOM has fully loaded:<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="format-detection" content="telephone=no" />...