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

Java Development

Reply
New Developer
praveen0922
Posts: 3
Registered: ‎08-25-2009
My Device: Not Specified

Re: Animated Screen transitions

I am using this way to get a animation of the Sreen 

 

Display class to get a screenshot of the current screen and pass it to the constructor of the new screen class you're pushing and then animate it off screen by overriding the paint method.

 

     Bitmap _bmp = new Bitmap(Display.getWidth(), Display.getHeight());
     Display.screenshot(_bmp, 0,0, Display.getWidth(), Display.getHeight());
     UiApplication.getUiApplication().pushScreen(new SdivListScreen(_bmp));

 

 

what's wrong in that am not getting any animation effects no errors also 

New Developer
mikejarema
Posts: 3
Registered: ‎10-20-2009
My Device: Not Specified

Re: Animated Screen transitions

[ Edited ]

Here's a "TransitionableMainScreen" I threw together for one of our projects.  The goal was to create a base class that will let any MainScreen essentially fade to black (or any color for that matter) over any duration.  The caveat here is that any screen subsequently pushed will not have a fade effect, though its probably easy to use the same principals here to achieve that.

 

Also, I'm specifically looking for another forum user or BB dev to provide a contribution to this code to mimic the "Swipe" or "Slide" effect from the 5.0 OS.

 

If you do grab this code, please hook up some Kudos!

 

TransitionableMainScreen.java:

 

// --------


import net.rim.device.api.ui.Graphics;

import net.rim.device.api.ui.UiApplication;

import net.rim.device.api.ui.XYRect;

import net.rim.device.api.ui.container.MainScreen;


public class TransitionableMainScreen extends MainScreen {

    private Runnable _runnableAfterFade;

    private boolean _isFading; 

    private int _fadeToColor;

    private int _currentAlpha;

    private int _timerId;

    private int _iFrame;

    private int _numFrames;

    private static int FRAMES_PER_SECOND = 15;


    protected void onExposed() {

        _isFading = false;

        super.onExposed();

    }

 

    protected void fadeToAndRun(int color, long d, Runnable runnable) {

        if (!_isFading) {

            _fadeToColor = color;

            _runnableAfterFade = runnable;

            _currentAlpha = 0;

            _isFading = true;

            UiApplication.getUiApplication().invokeLater(_runnableAfterFade, d + 100, false);

            _numFrames = (int) (d / 1000.0 * FRAMES_PER_SECOND);

            _iFrame = 0;

            nextFadeStep();

            startTimer();

        }

    }

 

    private void nextFadeStep() {

        if (_iFrame < _numFrames) {

            _iFrame += 1;

            _currentAlpha = (int) (255 * Math.sqrt((float)_iFrame / _numFrames));

            invalidate();

        } else {

            UiApplication.getUiApplication().cancelInvokeLater(_timerId);

        }

    }


    private void startTimer() {

        _timerId = UiApplication.getUiApplication().invokeLater(new Runnable() {

            public void run() {

                TransitionableMainScreen.this.nextFadeStep();

            }

        }, 1000 / FRAMES_PER_SECOND, true);

    }


    protected void paint(Graphics graphics) {

        super.paint(graphics);

        if (_isFading) {

            graphics.setGlobalAlpha(_currentAlpha);

            graphics.setColor(_fadeToColor);

            XYRect rect = graphics.getClippingRect();

            graphics.fillRect(rect.x, rect.y, rect.width, rect.height);

        }

    }

}


//--------

To use this, just inherit from TransitionableMainScreen instead of MainScreen, and replace your pushScreen calls, eg:

UiApplication.getUiApplication().pushScreen(new MyOtherScreen());

with:

fadeToAndRun(Graphics.BLACK /* color to fade to */, 1000 /* fade duration */, new Runnable() {
    public void run() {
        UiApplication.getUiApplication().pushScreen(new MyOtherScreen());
    }
});

Hope this provides a starting point for others trying to achieve the same effect,

Mike Jarema / Majestic Media Ltd.

 

Developer
fsa3
Posts: 39
Registered: ‎11-30-2008
My Device: Not Specified

Re: Animated Screen transitions

Great code - anyone have anything similar for a sliding effect?

New Developer
TokyoCat
Posts: 50
Registered: ‎01-30-2009
My Device: Not Specified

Re: Animated Screen transitions

I would like a slide transition too. I didn't really understand the code early in this thread :smileysad:

New Developer
tedthebold
Posts: 2
Registered: ‎11-09-2009
My Device: Not Specified

Re: Animated Screen transitions

 

kchantp and MaxSA,

 

Thank you so much for your help. I just implemented some screen slide transitions into my app and I'm very happy with the results. It's a nice effect to add a little flash to our app's ui and keep it competitive with all the other new platforms out there.

 

Thanks again guys.

 

New Developer
TokyoCat
Posts: 50
Registered: ‎01-30-2009
My Device: Not Specified

Re: Animated Screen transitions

Can someone explain this piece of code?

I don't see how after the first block of code included here is executed that img1 and img2 contain bitmaps of the respective screens.  Is there some code missing? I'm not getting the big picture here.

Developer
kchantp
Posts: 77
Registered: ‎11-20-2008
My Device: Not Specified

Re: Animated Screen transitions

I haven't really been following the discussion for a while but this is a snippet of code that retrieves two bitmaps together:

 

            Bitmap current= new Bitmap(Display.getWidth(), Display.getHeight());

            Bitmap next= new Bitmap(Display.getWidth(), Display.getHeight();
            Display.screenshot(current);

            // current Bitmap now has the old screen
            ui.pushScreen((Screen) screen);
            // screen stack has latest screen but can't take screenshot because somehow it still has the old screen

            // make a graphics object out of the empty bitmap and tell the screen to paint it
            Graphics gNext = new Graphics(next);
            screen.paint(gNext);

 

the screen object is an interface class that has one method, paint(Graphics g), and I made all screens implement this interface. 

 

Hope this helps you, TokyoCat (and anyone else laboring through animation screens)

New Developer
tedthebold
Posts: 2
Registered: ‎11-09-2009
My Device: Not Specified

Re: Animated Screen transitions

I do mine a little different. I have a base class that all of my screens can inherit from. Then in the constructor my screens pass in if they should do transitions.

 

If the screen should do transitions then on the onUiEngineAttached event I create two bitmaps, one for the previous screen and one for the screen I'm about to show:

 

Bitmap imgPrev = new Bitmap(getWidth(), getHeight());
Bitmap imgCurrent = new Bitmap(getWidth(), getHeight());
((TransitionScreen)getScreenBelow()).paintPublic(new Graphics(imgPrev));
this.paintPublic(new Graphics(imgCurrent));
startTransition();

 

Then my base class (TransitionScreen in this example) has a public method called paintPublic that calls paintBackground and paint. And then I override the paint method to check if I'm doing a transition in which case I paint the two bitmaps and if I'm not in a transition I just call super.paint. So then when the animation finishes, I just start painting the real screen instead of the bitmaps.

 

This way I can push and pop screens just like normal and the base class handles all of the transitioning.

 

Note this code just gets you the two bitmaps. You still need to set up a timer to invalidate the screen and calculate the position of the two bitmaps to create the slide or whatever other effect you want.

New Developer
TokyoCat
Posts: 50
Registered: ‎01-30-2009
My Device: Not Specified

Re: Animated Screen transitions

[ Edited ]

Hi. Thanks for the replies

 

In kchantp's code, why doesnt the first pushscreen just paint it's normal screen like any other pushScreen()?

 

And the Graphics gNext = new Graphics(next)... is that in the 'previous' screen's code or the 'next' screen's code?

Developer
kchantp
Posts: 77
Registered: ‎11-20-2008
My Device: Not Specified

Re: Animated Screen transitions

Not sure why the pushScreen didn't paint the screen right away.  I originally thought I could take two screenshots - one before the next screen is pushed and one after.  However, the second screenshot was the same as the first one, leading me to think that the "pushScreen" method didn't really push it onto the screen stack yet.  After scouring the forums, I saw a post about passing a Graphics object into the screen and ask it to paint.  Seemed to work for me.

 

The screen object is the next screen that you're going to. Here is a translation of the code above:

 

.

.

.

Create two empty bitmaps the size of the screen - one named "currentScreenshot" and one named "nextScreenshot"

Take a snapshot of the current screen and save it into the bitmap "currentScreenshot"

Push the next screen

Create a graphics object with the empty "nextScreenshot" bitmap as a constructor

Ask the next screen to paint with the graphics object

.

.

.

 

By this point, the two bitmaps should be "filled" and have a screen shot of both the original screen  and the next screen.

You can now do whatever animations you want with those screens.

 

The way I did it was to push the nextScreen onto the stack, and then push another screen that is in charge of the animations.  This other screen takes the two bitmaps as arguments and then does the actual animation.  Once the animation is done, the screen pops itself off and what you're left with is the "nextScreen".  A bit convoluted but it gives the illusion of animations.  Here's a little flow diagram of how the screen stack works during animation:

 

LEGEND

A - original screen, B - next screen, C - animation screen

 

Step 1 STACK Start point:

[Bottom] A [TOP]

 

Step 2 STACK (should have bitmaps at this point):

[Bottom] A B [Top]

 

Step 3 STACK:

[Bottom] A B C [Top]

 

Step 4 STACK (after the animation screen has run it's animating routine with the two bitmaps):

[Bottom] A B [Top]

 

Hope this helps.