Objective
To make a successful and user friendly image gallery it is important to:
- Make application with amazing graphics performance
- Make reusable code
- Make application with nice appearance and animations
Photo Draging
When user taps on a photo he expects that the photo will move depending on his finger movement. In our application, this feature is managed by three functions from PhotoList class: _startPhotoDraging, _photoDraging and _photoRelease. When user takes his finger off the screen, application has to decide whether to return back current photo or move to the next photo. This is managed by _finishMovement function.
function _finishMovement()
{
// calculate gap between center of the screen and current photo position
var gap = (System.width / 2 - this._photos[this._actualPhoto].x); // decide whether to return back current photo or move to the next
if ((Math.abs(gap) < System.width / 5) ||
(this._photos[this._actualPhoto].x > System.width / 2 && this._direction != #right) ||
(this._photos[this._actualPhoto].x < System.width / 2 && this._direction != #left) ||
this._actualPhoto == 0 && this._direction == #right ||
this._actualPhoto == this._photos.length - 1 && this._direction == #left)
// return back current photo
this._returnPhoto(gap);
else
// move to next photo
this._nextPhoto(gap); }
Photo change
Moving to the next photo is managed by _nextPhoto function. This function starts new animator. Duration of this animator is dependent on speed of finger movement.
function _nextPhoto(gap)
{
// calculate time of animation, acording to the speed of finger movement
var movementTime = System.tick - this._movementStart;
var time = (1.0*movementTime / gap)*Math.abs(System.width - gap);
if (Math.abs(time) > 800)
time = 800; // set animator
this._animator = new Animator({
transition : Animator.Transition.easeOut,
duration : Math.abs(time), // length of animation in miliseconds
});
this._animator.startX = this._photos[this._actualPhoto].x;
this._animator.addSubject(function(state)
{
// recognize direction of movement
if (gap > 0)
// move to left
this super._movePhotoTo((this super._animator.startX + (gap - System.width)*state).toInteger());
else
// move to right
this super._movePhotoTo((this super._animator.startX + (System.width + gap)*state).toInteger());
})
this._animator.options.onComplete = function()
{
this super._animator = null;
// change value of actual, left and right photo
this super._changePhotos(gap);
}
this._animator.play();
}
Change device orientation
Our gallery supports both device orientations: landscape and portrait.
By default, device rotating is denied. Developer can allow it by setting supported device orientations to orientation property. In this sample we sets supported orientations: portrait and landscape directly in onStart event.
this.orientation = [#portrait, #landscape-left];
When orientation is changed, onOrientationChanged event is raised. In our application, image previews are resized and new position for images are set in this function.
game.onOrientationChanged = function(orientation)
{
for (var i in this._photoList.photos) {
i.y = System.height / 2;
i.resizePhoto();
}
this._photoList.actualPhoto.x = System.width / 2;
if (this._photoList.leftPhoto)
this._photoList.leftPhoto.x = System.width / 2 - System.width;
if (this._photoList.rightPhoto)
this._photoList.rightPhoto.x = System.width / 2 + System.width;
}
Reusable
This gallery can be easily imported to other projects. Just download zip archive, and push new instance of PhotoList into your project.
game.onStart = function()
{
this._photoList = new PhotoList();
this.push(this._photoList);
}
|