3

我想在我的 android 应用程序中创建类似于News Republic应用程序中 的球形动画。

到目前为止，我已经尝试创建一个球体，但任何人都可以指导我如何继续在 android 中开发这样的动画。

我们是否必须仅使用 opengl 或者我们可以使用其他替代选项来实现它。

此外，当单击文本时，它会在不同的屏幕中打开相关新闻。

在此处输入图像描述

在此处输入图像描述

在此处输入图像描述

编辑

我终于找到了一些解决方案，可以在这个包下找到。

但是，动画不够流畅。

让我知道是否有人可以帮助我平滑动画？

4

1 回答 1

6

你不需要 OpenGL。您可以使用简单的视图和画布来做到这一点。我为你写了一些代码。您可以将其复制到您的项目中，添加到 xml 并运行：

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;
    }
}

要达到您描述的结果，您必须使用 Scroller 添加平滑滚动，将圆形方程更改为球体方程，调整参数并添加一些 getter/setter。使用参数方程，您还可以找到用户触摸的文本。此视图如下所示：

在此处输入图像描述

于 2015-06-24T15:27:55.000 回答