Cascades Development

[keatsp]

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. 

[greenback · Accepted solution]

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. 

[keatsp]

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?

[keatsp]

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

[Dredvard · Accepted solution]

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.