Welcome!

Welcome to the official BlackBerry Support Community Forums.

This is your resource to discuss support topics with your peers, and learn from each other.

inside custom component

Native Development

Reply
Contributor
michaelrizzello
Posts: 19
Registered: ‎01-31-2013
My Device: Blackberry Curve 8900

Custom Animations/ActivityIndicator

Hey Guys,


I was wondering if anyone knew or had an idea on how to create an activityindicator with a bunch of images?

 

ie creating an activity indicators which swaps in and out images?

 

Thanks

Developer
Hithredin
Posts: 406
Registered: ‎06-03-2010
My Device: Z10 Red

Re: Custom Animations/ActivityIndicator

Contributor
michaelrizzello
Posts: 19
Registered: ‎01-31-2013
My Device: Blackberry Curve 8900

Re: Custom Animations/ActivityIndicator

I figured it out guy! its pretty simple:

 

// Default empty project template
import bb.cascades 1.0

// creates one page with a label

Container {
    property int counter: 1
    property int reverse: 0
    id: sprite
    background: spritebg.imagePaint
    //clipContentToBounds: true
    horizontalAlignment: HorizontalAlignment.Center
    verticalAlignment: VerticalAlignment.Center
    layout: AbsoluteLayout {
    }
    onCreationCompleted: {
        timer.timeout.connect(renderNextFrame);
        timer.start(100);
        //renderNextFrame();
    }
    function renderNextFrame() {
        spriteImage.imageSource = "images/cab_animate" + counter + ".png";
        //console.log("image name " + spriteImage.imageSource);
        if (reverse == 1) {
            counter --;
        } else {
            counter ++;
        }
        if (counter == 32) {
            reverse = 1;
        } else if (counter == 1) {
            reverse = 0
        }
    }
    function renderComplete() {
        timer.stop();
    }
    ImageView {
        id: spriteImage
        imageSource: "images/cab_animate1.png"
        scalingMethod: ScalingMethod.AspectFill
        property int currentFrame: 0
        property int frameCount: 5
        attachedObjects: [
            ImplicitAnimationController {
                propertyName: "translationX"
                enabled: false
            }
        ]
    }
    attachedObjects: [
        ImagePaintDefinition {
            id: spritebg
            imageSource: "asset:///images/transparent_bg.png"
        }
    ]
}