Creating Basic Animation BLACKBERRY

We’re going to spend a little bit of time on a topic that can really make your user interface shine—animation. Now, this topic is more advanced, and really only recently have applications with fancier screen transitions and other effects started to appear. So you’re fine without animation. This section will teach you a bit more about how the BlackBerry UI API works though, and it’s kind of fun, so I recommend you at least read through it. The BlackBerry platform, at the time of this writing, doesn’t offer any transitions between screens by default. In our application, when you click the Login button, the login screen instantly appears; it doesn’t fade in, slide in, or anything like that. We’ll modify UiFun so that when the user logs in (clicks the Login button after typing a username and password), the login success screen slides up from the bottom of the display.

The basic idea for user interface animation is to pick an aspect of the user interface to animate (size, position, transparency) and a time for the animation to take place (for example, 300 milliseconds for a screen to slide onto the display). Then, in each update of the user interface, check if the animation time has elapsed: if not, update the user interface aspect according to how much time has passed, and queue up another UI update. Using time-based animation like this means that the animation will run as smoothly as possible across different device models and under different conditions and will always take the same amount of time to complete.

Setting the Vertical Offset

To get the animation started, add a new variable to LoginSuccessScreen called verticalOffset:

private int verticalOffset;

We’ll update this variable during the animation, decrementing it from the display height to zero. We’ll also add another variable and a constant final variable to keep track of how much time has passed in our animation and how long the animation should be. In this case, we’ve chosen 300 milliseconds, as generally, somewhere between 200 and 300 milliseconds gives a decent user experience.

The animation logic all occurs within sublayout.We’ll only run the animation code if verticalOffset is greater than zero, that is, only if the screen is not all the way onto the display. If verticalOffset is greater than zero, we’ll check the current time against the animationStart time. Based on the ratio of the elapsed time to the total time for the animation, we’ll set a new value for verticalOffset. Finally, after updating the screen’s position, we’ll queue another update layout if verticalOffset is still not zero by calling UiApplication.invokeLater.

Animating the Layout

The code for sublayout follows:

Notice that there’s an initial case where animationStart is zero.This case represents the first frame of the animation, so we just leave verticalOffset where it is. Speaking of verticalOffset, we’ll initialize it in the LoginScreen constructor to the height of the display:

And that’s it. Now, the login success screen will smoothly scroll up from the bottom of the screen.

The login success screen sliding in

The login success screen sliding in

All animation follows the same basic pattern, but it can get much more complex. With the same basic technique you can implement motion, fading, and more.

All rights reserved © 2018 Wisdom IT Services India Pvt. Ltd Protection Status