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
Contributor
keatsp
Posts: 41
Registered: ‎10-16-2012
My Device: Bold 9000
My Carrier: Telus
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. 

Please use plain text.
Developer
greenback
Posts: 508
Registered: ‎10-17-2010
My Device: BlackBerry Z10, DAC

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:

Please use plain text.
Contributor
keatsp
Posts: 41
Registered: ‎10-16-2012
My Device: Bold 9000
My Carrier: Telus

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?

Please use plain text.
Contributor
keatsp
Posts: 41
Registered: ‎10-16-2012
My Device: Bold 9000
My Carrier: Telus

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.

Please use plain text.
Developer
Dredvard
Posts: 160
Registered: ‎01-27-2012
My Device: Playbook
My Carrier: Rogers

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"
Please use plain text.