If you are using Internet Explorer, please remove blackberry.com from your compatibility view settings.

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
Developer
Dredvard
Posts: 160
Registered: ‎01-27-2012
My Device: Playbook
My Carrier: Rogers

sliding image off screen

I have 2 containers with images (top/bttom) and I'd like to animate the top one to scroll off the screen but have the bottom one exand any take up the space that the top one leaves behind.  I've tried TranslateTransition on the top one - but the bottom one doesn't expand - leaving a white image on the top.

 

Does anyone have any suggestions how to have the bottom one automatically fill up the space?

 

---
If you find my post helpful please "like" it and "accept as a solution"
Please use plain text.
Developer
oliver_kranz
Posts: 216
Registered: ‎09-18-2009
My Device: Z10
My Carrier: O2

Re: sliding image off screen

Maybe, setting visible to false helps.

 

ImageView {
    visible: false
}

 

 

Please use plain text.
Developer
BBSJdev
Posts: 6,029
Registered: ‎07-05-2012
My Device: Playbook, Z10 LE, Dev Alpha C
My Carrier: Orange

Re: sliding image off screen

[ Edited ]

You would need to animate the bottom one with a ScaleTransition at the same time as you transition the other one off screen.

 

Alternatively you can watch for the end of your first animation and then set the width and height properties of the bottom container, making sure you have set the scale properties correct for the image within.

 

Something like,

 

        SequentialAnimation {
            id: container1Animation animations: [
                    // ... Your animation code for transition off screen
            ]
            onEnded: {
                  container2.width = // .. desired width;
                  container2.height = // .. desired height;
            }
         }

 

 


If you've been helped click on Like Button, if you've been saved buy the app. :smileyhappy:

Developer of stokLocker, Sympatico and Super Sentences.
Please use plain text.
Developer
Zmey
Posts: 1,510
Registered: ‎12-18-2012
My Device: PlayBook, Z10, DAC

Re: sliding image off screen

[ Edited ]

Translate doesn't change where the containers are "logically" located. So for the layout engine the container isn't moving.

The bottom container will take the space if it has non-zero spaceQuota and the height of the top container is actually changing and both of them are located in StackLayout.

If you want the top container to move out of the screen without being shrinked then you'll probably have to reposition both of them manually using AbsoluteLayout.

Or use some sort of a hack such as making the top container an empty container, attaching a LayoutUpdateHandler to it and positioning the actual image above the empty container using absolute positioning, so the bottom of image matches the bottom of the container. Then animate the height of the top empty container to 0. I haven't tried this approach.


Andrey Fidrya, @zmeyc on twitter
Please use plain text.
Developer
Dredvard
Posts: 160
Registered: ‎01-27-2012
My Device: Playbook
My Carrier: Rogers

Re: sliding image off screen

Didn't realize that translation doesn't have any impact on the container.

 

 

Got it to sort of work using visible=false onEnded = but not quite the simulatenous sliding effect I was hoping for.

 

  So I tried to translate a docked image ontop and then do simulatenous scaling of the placeholder container and translation of the docked image, but it doesn't seem to want to scale the placeholder container.  Thoughts?

 

Page {
    property bool entered: true
    Container {
        background: Color.Red
        Container {
            id: docked
            //            verticalAlignment: VerticalAlignment.Fill
            horizontalAlignment: HorizontalAlignment.Fill
            layout: DockLayout {
            }
            Container {
                id: stacked
                background: Color.Black
                verticalAlignment: VerticalAlignment.Fill
                horizontalAlignment: HorizontalAlignment.Fill
                layout: StackLayout {
                }
                Container {
                    id: top
                    preferredHeight: 300
                    //                    verticalAlignment: VerticalAlignment.Fill
                    horizontalAlignment: HorizontalAlignment.Fill
                    layoutProperties: StackLayoutProperties {
                        //                        spaceQuota: .3
                    }
                    animations: [
                        ScaleTransition {
                            id: growTop
                            toY: 1
                            duration: 1000
                        },
                        ScaleTransition {
                            id: shrinkTop
                            toY: .001
                            duration: 1000
                        }
                    ]
                }
                ImageView {
                    id: bottom
                    //                    preferredHeight: 300
                    verticalAlignment: VerticalAlignment.Fill
                    horizontalAlignment: HorizontalAlignment.Fill
                    imageSource: "asset:///images/yellowboxshadow.png.amd"
                    layoutProperties: StackLayoutProperties {
                        spaceQuota: 1
                    }
                } // Imageview
            } //stacked
            ImageView {
//                visible: false
                preferredHeight: 300
                horizontalAlignment: HorizontalAlignment.Fill
                imageSource: "asset:///images/yellowboxshadow.png.amd"
                animations: [
                    TranslateTransition {
                        id: exitAnim
                        toY: -400
                        duration: 1000
                    },
                    TranslateTransition {
                        id: enterAnim
                        toY: 0
                        duration: 1000
                        onEnded: {
                            top.visible = true
                        }
                    }
                ]
            } //Imagview
        } //docked
    } //red
    actions: [
        ActionItem {
            title: qsTr("Shrink")
            //            imageSource: "asset:///images/icons/T1shirt_icon.png"
            ActionBar.placement: ActionBarPlacement.OnBar
            onTriggered: {
                if (entered) {
                    top.visible= false
                    exitAnim.play()
                    shrinkTop.play()
//                    top.layoutProperties.spaceQuota = .001
                    //exit1Anim.play()
                } else {
                    enterAnim.play()
                    growTop.play()
//                    top.layoutProperties.spaceQuota = 1
                    //enter1Anim.play()
                }
                entered = ! entered
            }
        }
    ]
}//Page

 



 

Changing the Spacequota does work but it happens too quick - and I can't control the animation speed.

---
If you find my post helpful please "like" it and "accept as a solution"
Please use plain text.