Genie Effect Animation in Android

Question

I have requirement of implementing Genie Effect animation shown below.

Answer 1

I have a browser solution.

Check out https://github.com/kamilkp/geniejs

and http://kamilkp.github.io/ for demo.

It works in every browser including mobile (not always smoothly on firefox though). It supports Genie Effect transitions in every direction (top, bottom, left, right). It works even if the target html element is a child of some container that has overflow auto or hidden. It is library agnostic itself, but i also wrote a convenience jQuery plugin. And if you also include the html2canvas library in your project, the plugin lets you animate HTML elements with genie effect (expanding example here: http://kamilkp.co.nf/genie/canvas/)

The only requirement for the browser is that it needs to support CSS transitions. It's a pure javascript + CSS solution.

PS. You can use Phonegap to create an Android app from a web application.

Answer 2

I have implemented this code with Game Library AndEngine

Kindly find the attached code below that will help u to move further.. you can use this code as fragment to ur android code OR make instance of this code and again extend from activity for reusing this code.

This zip file contain 2 project :

1. Code implementation for above effect and
2. AndEngine library which u need to add to my project .

Click here to Download My Code

Answer 3

I tried to make animation like Genie Effect. But its not as perfect as your image show, but It will help you during your research.

Example Video of demo.

Create anim folder in res. copy falling.xml

falling.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:interpolator="@android:anim/linear_interpolator" >

    <translate
        android:duration="750"
        android:fromXDelta="0%p"
        android:fromYDelta="10%p"
        android:toXDelta="0%"
        android:toYDelta="50%" />

    <scale
        android:duration="750"
        android:fillAfter="false"
        android:fromXScale="1.0"
        android:fromYScale="1.0"
        android:pivotX="50%"
        android:pivotY="100%"
        android:toXScale="0"
        android:toYScale="0" />

</set>

Use following java code to apply animaiton on button click.

final Animation animationFalling = AnimationUtils
                        .loadAnimation(GenieEffectActivity.this, R.anim.falling);
                imgview.startAnimation(animationFalling);

Hope it helps you.