spherical animation with text for using tag cloud in android app [News Republic]

问题

I want to create spherical animation in my android app similar to this in News Republic app.

I have tried to create a sphere so far but can anyone guide me how to proceed to develop animations like this in android.

Do we have to use opengl only or we can achieve it with other alternative option.

Also, when the text is clicked it opens the related news in a different screen.

EDIT

I finally found some solution for this, which is available under this package.

But, the animation is not smooth enough.

Let me know if anyone can help me in the smoothing of the animations?

回答1:

You don't need OpenGL. You can do that using a simple view and Canvas. I wrote a bit of code for you. You can just copy it to your project, add to xml and run:

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.view.View;

public class TagCloudView extends View {
    String[] tags = new String[]{"Lemon","Orange","Strawberry","Plum","Pear","Pineapple","Blackberry","Watermelon"};
    Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG);
    private float scroll = 0;
    private float prevY;

    public TagCloudView(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    @Override
    public void draw(Canvas canvas) {
        super.draw(canvas);
        float r = getHeight() / 3;
        paint.setColor(Color.BLACK);
        paint.setTextAlign(Paint.Align.CENTER);
        for (int i = 0; i < tags.length; i++) {
            float t = i + scroll / getHeight();
            float y = (float) (r * Math.cos(Math.PI * 2 * t / tags.length));    // parametric circle equation
            float z = (float) (r * Math.sin(Math.PI * 2 * t / tags.length));
            paint.setTextSize((r + z) / r/2 * 40 + 20);     // magic values, change to something better
            paint.setAlpha((int) ((r + z) / r/2 * 127 + 128));
            canvas.drawText(tags[i], getWidth() / 2, getHeight() / 2 + y, paint);
        }
    }

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        if (event.getAction() != MotionEvent.ACTION_DOWN)
            scroll -= event.getY() - prevY;     // only one plane
        prevY = event.getY();
        invalidate();
        return true;
    }
}

To achieve the result you described, you have to add smooth scrolling using Scroller, change the circle equation to the sphere equation, tweak parameters and add some getters/setters. Using parametric equations you can also find the text touched by the user. This View looks like this:

来源：https://stackoverflow.com/questions/30480541/spherical-animation-with-text-for-using-tag-cloud-in-android-app-news-republic