//# Using 9-Slice image scaling in an animation
//This file demonstrates how to use 9-slice in an animating scroll.
//This example requires two images located in the resources directory:
//`resources/images/scrollBottom.png` and `resources/images/scrollTop.png`.
//Import device to get the size of the screen, import ImageView to display a
//basic image and import ImageScaleView to apply 9-slice scaling to an image.
import device as device;
import ui.ImageView as ImageView;
import ui.ImageScaleView as ImageScaleView;
//## Class: Application
//Create an application class with the default settings.
exports = Class(GC.Application, function() {
this.initUI = function() {
// The device width is used to center the image.
this._imageScaleView = new ImageScaleView({
superview: this.view,
x: (device.width - 165) / 2,
y: 15,
width: 165,
height: 50,
image: "resources/images/scrollBottom.png",
scaleMethod: "9slice",
// These are the slices from the source image...
//
// If the sum of the slices in a direction doesn't match the image size
// of that given direction then the slice size is scaled, for example:
//
// The image has a width of 120 pixels,
// the horizontal slices are 50, 60 and 70
// then the slices are scaled with: 120 / (50 + 60 + 70)
sourceSlices: {
horizontal: {left: 120, center: 120, right: 120},
vertical: {top: 10, middle: 215, bottom: 75}
},
// These are the destination slices...
//
// If the images width is larger then the sum of the horizontal
// slices then the rest value is filled with the center slice.
//
// If the sum of the horizontal slices exceeds the width then
// the slices are scaled to fit and no center is used.
destSlices: {
horizontal: {left: 55, right: 55},
vertical: {top: 5, bottom: 50}
}
});
// Put an image on top of the animating image...
var imageview = new ImageView({
superview: this.view,
x: (device.width - 165) / 2,
y: 10,
width: 165,
height: 35,
image: "resources/images/scrollTop.png"
});
this.animate();
};
//A continuous animation.
//First the height of the image is increased, the center stretches but the top
//and bottom caps keep their width and height. When the image height is 250 pixels
//then then animation pauses for 1.5 seconds after which the size is decreased to
//70 pixels. After pausing another 1.5 seconds the animation starts again.
this.animate = function() {
this._imageScaleView.getAnimation()
.clear()
// Increase the height, the center stretches
.then({height: 250}, 350)
.wait(1500)
// Decrease the height
.then({height: 70}, 350)
.wait(1500)
// Run it again
.then(bind(this, "animate"));
};
this.launchUI = function () {};
});
//