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
keatsp
Posts: 41
Registered: ‎10-16-2012
My Device: Bold 9000
Accepted Solution

How to run an animation on screen load.

I want to run some implicit animations when a screen loads but can't seem to get it.  It seems that by the time the screen is loaded the animations are done.  I've tried them in onCreationCompleted with no joy.

 

I'm trying to get my screen headings to slide in from off screen.  I figured I could just set their translation to off screen and then on creation complete I could set the translation to 0. 

Developer
greenback
Posts: 535
Registered: ‎10-17-2010
My Device: (BlackBerry Z10)-> Q10/Passport Dual Use

Re: How to run an animation on screen load.

Before the ending bracket write this code:


onCreationCompleted

onCreationCompleted: {
     startupAnimation.play();
}

 

so if you have a screen, target the container that includes all the elements you with to animate. 

 

Here is how you would animate a screen up and down.

.qml file

 

Container{
   id: topContainer
   preferredWidth: maxWidth
   background: Color.Black
   translationY: 0
   animations: [
       TranslateTransition{
           id: startupAnimation
           toY: -400
           duration: 3000
           onEnded: {
              revertScreen.play();
           }
       },
       TranslateTransition{
           id: revertScreen
           toY: 0
           delay: 500
           duration: 3000
       }
   ]
}

 
Hope this helps you. 
:Cool2:

Contributor
keatsp
Posts: 41
Registered: ‎10-16-2012
My Device: Bold 9000

Re: How to run an animation on screen load.

Works great thx!  Would there be an easy way to apply this to several components or does each component need its own animation?  And not to get too fussy but it would have a little more life if it had a little bounce at the end.  Are there any preset animations to perform something a little more complex like that?

Contributor
keatsp
Posts: 41
Registered: ‎10-16-2012
My Device: Bold 9000

Re: How to run an animation on screen load.

Got it.  Just put the animation into a custom component qml and use it for the header.  I feel stupid for even asking.

Developer
Dredvard
Posts: 160
Registered: ‎01-27-2012
My Device: Playbook

Re: How to run an animation on screen load.

Check out this link for more info on animations. 

 

https://developer.blackberry.com/cascades/documentation/ui/animations/explicit_animations.html

 

Load cascadecookbook which has a great egg demoing a lot of animations.

easingCurve is the property you'll want to set to do double bounce.

---
If you find my post helpful please "like" it and "accept as a solution"