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
tweens
by running this line:phonegap create tweens com.myapp.tweens tweens
Add a devices platform. You can choose to use Android, iOS, or both:
cordova platform add ios cordova platform add android
Open
www/index.html
and clean up the unnecessary elements. Include a reference to the XUI JavaScript library and the Cordova JavaScript file.We add an XUI
ready
event 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" />...