user interface - Blackberry - fields layout animation

Question

It's easy to show some animation within one field - BitmapField or Screen:
[Blackberry - background image/animation RIM OS 4.5.0][1]

But what if you need to move fields, not just images?

May be used:

• game workflow functionality, like chess, puzzle etc
• application user-defined layout, like in Google gadgets
• enhanced GUI animation effects

So, I'd like to exchange my expirience in this task, on the other hand, I'd like to know about any others possibilities and suggestions.

Answer 1

This effect may be easily achived with custom layout:

class AnimatedManager extends Manager {
    int ANIMATION_NONE = 0;
    int ANIMATION_CROSS_FLY = 1;
    boolean mAnimationStart = false;
    Bitmap mBmpBNormal = Bitmap.getBitmapResource("blue_normal.png");
    Bitmap mBmpBFocused = Bitmap.getBitmapResource("blue_focused.png");
    Bitmap mBmpRNormal = Bitmap.getBitmapResource("red_normal.png");
    Bitmap mBmpRFocused = Bitmap.getBitmapResource("red_focused.png");
    Bitmap mBmpYNormal = Bitmap.getBitmapResource("yellow_normal.png");
    Bitmap mBmpYFocused = Bitmap.getBitmapResource("yellow_focused.png");
    Bitmap mBmpGNormal = Bitmap.getBitmapResource("green_normal.png");
    Bitmap mBmpGFocused = Bitmap.getBitmapResource("green_focused.png");
    int[] width = null;
    int[] height = null;
    int[] xPos = null;
    int[] yPos = null;
    BitmapButtonField mBButton = new BitmapButtonField(mBmpBNormal,
            mBmpBFocused);
    BitmapButtonField mRButton = new BitmapButtonField(mBmpRNormal,
            mBmpRFocused);
    BitmapButtonField mYButton = new BitmapButtonField(mBmpYNormal,
            mBmpYFocused);
    BitmapButtonField mGButton = new BitmapButtonField(mBmpGNormal,
            mBmpGFocused);

    public AnimatedManager() {
        super(USE_ALL_HEIGHT | USE_ALL_WIDTH);
        add(mBButton);
        add(mRButton);
        add(mYButton);
        add(mGButton);
        width = new int[] { mBButton.getPreferredWidth(),
                mRButton.getPreferredWidth(), 
                mYButton.getPreferredWidth(),
                mGButton.getPreferredWidth() };

        height = new int[] { mBButton.getPreferredHeight(),
                mRButton.getPreferredHeight(),
                mYButton.getPreferredHeight(),
                mGButton.getPreferredHeight() };

        xPos = new int[] { 0, getPreferredWidth() - width[1], 0,
                getPreferredWidth() - width[3] };
        yPos = new int[] { 0, 0, getPreferredHeight() - height[2],
                getPreferredHeight() - height[3] };

        Timer timer = new Timer();
        timer.schedule(mAnimationTask, 0, 100);
    }

    TimerTask mAnimationTask = new TimerTask() {
        public void run() {
            UiApplication.getUiApplication().invokeLater(new Runnable() {
                public void run() {
                    updateLayout();
                };
            });
        };
    };

    MenuItem mAnimationMenuItem = new MenuItem("Start", 0, 0) {
        public void run() {
            mAnimationStart = true;
        };
    };

    protected void makeMenu(Menu menu, int instance) {
        super.makeMenu(menu, instance);
        menu.add(mAnimationMenuItem);
    }

    public int getPreferredHeight() {
        return Display.getHeight();
    }

    public int getPreferredWidth() {
        return Display.getWidth();
    }

    protected void sublayout(int width, int height) {
        width = getPreferredWidth();
        height = getPreferredHeight();

        if (getFieldCount() > 3) {
            Field first = getField(0);
            Field second = getField(1);
            Field third = getField(2);
            Field fourth = getField(3);

            layoutChild(first, this.width[0], this.height[0]);
            layoutChild(second, this.width[1], this.height[1]);
            layoutChild(third, this.width[2], this.height[2]);
            layoutChild(fourth, this.width[3], this.height[3]);

            if (mAnimationStart) {
                boolean anim1 = performLayoutAnimation(0,
                        width - this.width[0], 
                        height - this.height[0]);
                boolean anim2 = performLayoutAnimation(1, 0, 
                        height - this.height[1]);
                boolean anim3 = performLayoutAnimation(2,
                        width - this.width[2], 0);
                boolean anim4 = performLayoutAnimation(3, 0, 0);
                mAnimationStart = anim1 || anim2 || anim3 || anim4;
            }
            setPositionChild(first, xPos[0], yPos[0]);
            setPositionChild(second, xPos[1], yPos[1]);
            setPositionChild(third, xPos[2], yPos[2]);
            setPositionChild(fourth, xPos[3], yPos[3]);

        }

        setExtent(width, height);
    }

    boolean performLayoutAnimation(int fieldIndex, int x, int y) {

        boolean result = false;
        if (xPos[fieldIndex] > x) {
            xPos[fieldIndex] -= 2;
            result = true;
        } else if (xPos[fieldIndex] < x) {
            xPos[fieldIndex] += 2;
            result = true;
        }

        if (yPos[fieldIndex] > y) {
            yPos[fieldIndex] -= 1;
            result = true;
        } else if (yPos[fieldIndex] < y) {
            yPos[fieldIndex] += 1;
            result = true;
        }
        return result;
    }
}

BitmapButtonField class I've used:

class BitmapButtonField extends ButtonField {
    Bitmap mNormal;
    Bitmap mFocused;

    int mWidth;
    int mHeight;

    public BitmapButtonField(Bitmap normal, Bitmap focused) {
        super(CONSUME_CLICK);
        mNormal = normal;
        mFocused = focused;
        mWidth = mNormal.getWidth();
        mHeight = mNormal.getHeight();
        setMargin(0, 0, 0, 0);
        setPadding(0, 0, 0, 0);
        setBorder(BorderFactory.createSimpleBorder(new XYEdges(0, 0, 0, 0)));
        setBorder(VISUAL_STATE_ACTIVE, BorderFactory
                .createSimpleBorder(new XYEdges(0, 0, 0, 0)));
    }

    protected void paint(Graphics graphics) {
        Bitmap bitmap = null;
        switch (getVisualState()) {
        case VISUAL_STATE_NORMAL:
            bitmap = mNormal;
            break;
        case VISUAL_STATE_FOCUS:
            bitmap = mFocused;
            break;
        case VISUAL_STATE_ACTIVE:
            bitmap = mFocused;
            break;
        default:
            bitmap = mNormal;
        }
        graphics.drawBitmap(0, 0, bitmap.getWidth(), bitmap.getHeight(),
                bitmap, 0, 0);
    }

    public int getPreferredWidth() {
        return mWidth;
    }

    public int getPreferredHeight() {
        return mHeight;
    }

    protected void layout(int width, int height) {
        setExtent(mWidth, mHeight);
    }

    protected void applyTheme(Graphics arg0, boolean arg1) {

    }
}