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
Posts: 50
Registered: ‎01-30-2009
My Device: Not Specified

Re: Animated Screen transitions

Ahhh... now i see.

It makes sense now.

Thank you for taking the time to explain it to me. I appreciate it.

New Contributor
Posts: 9
Registered: ‎03-12-2010
My Device: BlackBerry 8800
My Carrier: Development

Re: Animated Screen transitions

Hi Guys,

I am not sure how much my effort in sliding transformations would be useful, but I implemented sliding transformatiion by overriding subLayout method of the base class that inherits MainScreen.

 

 

protected void sublayout(int width, int height) {
        super.sublayout(width, height);
        
        if (HorizontalOffset > 0) {
            if (animationStart == 0) {
                // start the animation
                animationStart = System.currentTimeMillis();
            }
            else {
                long timeElapsed = System.currentTimeMillis() - animationStart;
                if (timeElapsed >= animationTime) {
                    HorizontalOffset = 0;
                }
                else {
                    float percentDone = (float)timeElapsed / (float)animationTime;
                    HorizontalOffset = Display.getWidth() - (int)(percentDone * Display.getWidth());
                }
            }
        }
        setPosition(HorizontalOffset, 0);
        if (HorizontalOffset > 0) {
            UiApplication.getUiApplication().invokeLater(new Runnable() {
                public void run() {
                    updateLayout();
                }
            });
        }
    }

 

 

private int HorizontalOffset = Display.getWidth();
    private final static long animationTime = 300;
    private long animationStart = 0;

 

and above are the initialised parameter for my loop.

 

This sliding is from right to left. But I could not write sliding transformation on press of back button for popping screens from the stack. For that I need left to right sliding.

 

Any help on this would be appreciated. Smiley Happy

 

Also for your information, I am working on 4.2.1 and my app should be compatible for higher versions. hence I am working with 4.2.1.

Contributor
Posts: 13
Registered: ‎03-04-2010
My Device: 9700
My Carrier: XL Axiata

Re: Animated Screen transitions

what should i do if im gonna implements this transitionable screen on my controller ??

please reply

Developer
Developer
Posts: 1,123
Registered: ‎02-10-2009
My Device: 8130 / 8350 / 9530 / 9550 / 9850 / PlayBook
My Carrier: Verizon

Re: Animated Screen transitions

To do the pop transition from left to right you could ovveride onclose and have it do the opposite of the sublayout until the horizontalOffset is off-screen, then pop the screen.

Developer
Posts: 1,415
Registered: ‎07-30-2008
My Device: Not Specified

Re: Animated Screen transitions

I hate GUI's and do this as a last resort but on physically constrainted devices

the UI is a big part of the app. I refuse to use things like j2me polish and

try to go to lower levels to see what is going on and what is possible.

Some basic ideas, someone suggeseted making components

with public paint I have found helpful, can get you started down right path.

 

You  probably want to use less derived elements from which to work as

you will need to remove a lot of the included stuff in others. Note of course that many of these GUI elements derivce from each other- fields managers and screens for example.

I haven't gotten a working version of what I am after but after much playing around

it seems like making only one basic screen and putting all your compoents

through a custom manager gicves you the mnost flexibility for

games like this.Look at the manager examples.

 

So, your app may only push one screen and do all the manipulations by rearranging various fields that it knows about. If all your fields have public paint methods you can paint everything

to an offscreen context and then ROP to  display for example.

 

New Contributor
Posts: 5
Registered: ‎06-05-2010
My Device: 8830
My Carrier: abc

Re: Animated Screen transitions

hi guys,

it works fine "from right to left" but i can not implement "from left to right". is there anybody who done.

thanks.

Developer
Posts: 54
Registered: ‎10-23-2008
My Device: Not Specified

Re: Animated Screen transitions

Apologies if I am hijacking a thread.....

 

I have a similar requirement for an internal application to what has been described here in terms of screen transitions. Having read through the related threads, I was thinking of the following:

 

Screen A

Grab screenshot/bitmap

Issues push command for Screen B, passing the bitmap as a param

 

Screen B

Paints itself and is immediately grabbed as a screenshot/bitmap

Issues push command for Screen C (the transition screen/engine), passing the two bitmaps for A and B and transition type

 

Screen C

paints bitmap of A, processes the transition to bitmap B

Screen C pops itself off the display stack by closing

 

Has anyone tried something like this?

Would Screen B be onscreen long enough to be visible to the user, thereby ruining the efffect?

Visitor
Posts: 1
Registered: ‎07-15-2009
My Device: 8900

Re: Animated Screen transitions

The code you sent is the base to make 8 different transitions.

From top to bottom, bottom to top, left to right, right to left, etc..

 

 

        if (HorizontalOffset < 0) {
          if (animationStart == 0) {
            // start the animation
            animationStart = System.currentTimeMillis();
          } else {
            long timeElapsed = System.currentTimeMillis() - animationStart;
            if (timeElapsed >= animationTime) {
              HorizontalOffset = 0;
            } else {
              float percentDone = (float)timeElapsed / (float)animationTime;
              HorizontalOffset = -screenWidth + (int)(percentDone * screenWidth);
            }
          }
        }
        setPosition(HorizontalOffset, 0);
        if (HorizontalOffset < 0) {
          UiApplication.getUiApplication().invokeLater(new Runnable() {
            public void run() {
              updateLayout();
            }
          });
        }

 

 

Highlighted
Developer
Posts: 84
Registered: ‎09-21-2008
My Device: Not Specified

Re: Animated Screen transitions

, seems like your on the right track two notes.

 

I have done something like this but can not share the code completly. Ill try to give some pointers though.....

 

1. Have a Separate transition screen that takes both Screen A and Screen B as a parameter instead of passing into B

2. Dont do a screen shot, instead paint the screen into a bitmap  The  AnimatableScreen below shows how to paint a screen into a bitmap without actually putting on it the DisplayStack (This is the secret sauce to getting things working correctly without blinkng artifacts and what not)

 

public abstract class AnimatableScreen extends Screen{

 

      final public void drawAnimationBitmap(Graphics g){
            g.setColor(Color.WHITE);
            g.clear();
            if(!this.isDisplayed())
                doLayout();
            doCustomActionAfterLayout();
            super.paint(g);
        }

 

}

 

 

This Screen is used to actually do the animation...

public class AnimateScreen extends Screen{

public AnimateScreen(AnimatableScreen from, AnimatableScrern to) {

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

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

     Graphics fromGraphics = new Graphics(fromBmp);

     Graphics toGraphics - new Graphics(toBmp);

 

    //SECRET SAUCE, paint both images in the same eventlock to prevent blinking effects

     from.drawAnimationBitmap(fromGraphics);

     to.drawAnimationBitmap(toGraphics);

 

     //Use a timer task to change the positions of the two bitmaps for whatever transition effect you want

}


//Do the painting of the two bitmaps with a TimerTask to move and invalidate them

protected void paint(Graphics g){

   //control x,y positions of the bitmaps in the timer task and the paint will just paint where they go

   g.drawBitmap(fromBmp ....)

   g.drawBitmap(toBmp ....)

}

}

 

 

I leave the rest of the details up to you to figure out, but basically you

1. push the "to" screen

2. pop the "from" screen

3. push the AnimateScreen (and start the animate timer)

all in the same EventLock to prevent a blinking effect

 

When the AnimateScreen finishes the "animation" then it pops itself off the stack leaving "TO" on top.

 

 

All this being said, the 5.0 and up screen transitions built in work beautifuly and do not require as much headache to implement