Greeting Card Flip-View Animation

Question

I'm working on greeting card application and i need card flip-view type of View. i've added images for same. I've been through multiple flip-view like libraries and i found android-flipview more suitable for my requirement. I've made changes in this library to make it flip from left corner like greeting card. i'm adding code and screenshot for same.

But, it doesn't work like what i need.

View_Dual_card.java File,I made Changes Like this:

public synchronized void buildTexture(FlipRenderer renderer, GL10 gl) {
        if (screenshot != null) {
            if (texture != null)
                texture.destroy(gl);
            texture = Texture.createTexture(screenshot, renderer, gl);
            recycleScreenshot();

            topCard.setTexture(texture);
            bottomCard.setTexture(texture);

            final float viewHeight = texture.getContentHeight();
            final float viewWidth = texture.getContentWidth();
            final float textureHeight = texture.getHeight();
            final float textureWidth = texture.getWidth();

            if (orientationVertical) {
                topCard.setCardVertices(new float[] { 0f, viewHeight, 0f, // top left
                        0f, viewHeight / 2.0f, 0f, // bottom left
                        viewWidth, viewHeight / 2f, 0f, // bottom right
                        viewWidth, viewHeight, 0f // top right
                });

                topCard.setTextureCoordinates(new float[] { 0f, 0f, 0f,
                        viewHeight / 2f / textureHeight,
                        viewWidth / textureWidth,
                        viewHeight / 2f / textureHeight,
                        viewWidth / textureWidth, 0f });

                bottomCard.setCardVertices(new float[] { 0f, viewHeight / 2f,
                        0f, // top left
                        0f, 0f, 0f, // bottom left
                        viewWidth, 0f, 0f, // bottom right
                        viewWidth, viewHeight / 2f, 0f // top right
                        });

                bottomCard.setTextureCoordinates(new float[] { 0f,
                        viewHeight / 2f / textureHeight, 0f,
                        viewHeight / textureHeight, viewWidth / textureWidth,
                        viewHeight / textureHeight, viewWidth / textureWidth,
                        viewHeight / 2f / textureHeight });
            } else {
                topCard.setCardVertices(new float[] { 0f, viewHeight, 0f, // top left
                        0f, 0f, 0f, // bottom left
                        viewWidth /27f, 0f, 0f, // bottom right
                        viewWidth /27f, viewHeight, 0f // top right
                });

                topCard.setTextureCoordinates(new float[] { 0f, 0f, 0f,
                        viewHeight / textureHeight,
                        viewWidth / 27f / textureWidth,
                        viewHeight / textureHeight,
                        viewWidth / 27f / textureWidth, 0f });

                bottomCard.setCardVertices(new float[] {0f,
                        viewHeight, 0f, // top left
                        0f, 0f, 0f, // bottom left
                        viewWidth, 0f, 0f, // bottom right
                        viewWidth, viewHeight, 0f // top right
                        });

                bottomCard.setTextureCoordinates(new float[] {
                        viewWidth /27f / textureWidth, 0f,
                        viewWidth /27f / textureWidth,
                        viewHeight / textureHeight, viewWidth / textureWidth,
                        viewHeight / textureHeight, viewWidth / textureWidth,
                        0f });
            }

            checkError(gl);
        }
    }

What i want:

enter image description here

What i'm getting:

enter image description here

thanks in advance.

Have you got the result?? Please let me know.. I need to implement same thing. — Komal Sorathiya, Oct 01 '14 at 09:05

score 1 · Answer 1 · answered May 18 '13 at 06:57

1

It's better you can use page curl which is simple and open source to use.https://code.google.com/p/android-page-curl/ Hope this might help you.

answered May 18 '13 at 06:57

Shadow

6,864
6
44
93

i had tried page curl lib. but it gives same effect which i'm having right now. – NaserShaikh May 18 '13 at 07:01

score 0 · Answer 2 · answered May 18 '13 at 06:30

0

This animation is a simple scale and skew animation.

answered May 18 '13 at 06:30

Snicolas

37,840
15
114
173

got some link for these animations and reading abt let u know if it works. – NaserShaikh May 18 '13 at 07:03
Those links might help : http://c0deattack.wordpress.com/2010/12/06/flip-animation-1/ http://stackoverflow.com/q/5354183/693752 http://android-er.blogspot.fr/2010/07/skew-bitmap-image-using-matrix.html – Snicolas May 18 '13 at 10:25

score 0 · Answer 3 · answered Aug 02 '13 at 22:14

0

The image appears to be skewing. Make sure you view area is larger than the original card.

answered Aug 02 '13 at 22:14

anar

599
1
4
9

its not my view its a library. and i need to move page on gesture forward and back. – NaserShaikh Aug 03 '13 at 07:53

Greeting Card Flip-View Animation

3 Answers3