球形动画文本使用的Andr​​oid应用程序标签云[新闻共和国]球形、共和国、应用程序、文本

2023-09-08 09:23:47 作者:刺 心

我想在我的Andr​​oid应用程序类似这创造球形的动画< /一>中 新闻共和国的应用程序。

我试图创建一个 的领域,到目前为止,但任何人都可以指导我如何着手制定这样的动画,android系统中。

难道我们只使用OpenGL或者我们可以与其他可替代的选择实现这一目标。

此外,当单击文本时它会打开相关消息在不同的屏幕。

  

修改

我终于找到了一些解决方案,对于这一点,这下这可包。

不过,动画是不够光滑。

  

让我知道,如果有人能帮助我在动画的平滑?

解决方案

您不需要OpenGL。你可以做,使用简单视图和画布。我写了一下code为您服务。你只需将它复制到你的项目中,添加到xml和运行:

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

公共类TagCloudView扩展视图{
    的String []标记=新的String [] {柠檬,橙色,草莓,梅花,梨花,菠萝,黑莓,西瓜};
    涂料粉刷=新的油漆(Paint.ANTI_ALIAS_FLAG);
    私人浮滚动= 0;
    私人浮preVY;

    公共TagCloudView(上下文的背景下,ATTRS的AttributeSet){
        超(背景下,ATTRS);
    }

    @覆盖
    公共无效画(油画画布){
        super.draw(画布);
        浮动R =的getHeight()/ 3;
        paint.setColor(Color.BLACK);
        paint.setTextAlign(Paint.Align.CENTER);
        的for(int i = 0; I&LT; tags.length;我++){
            浮动T = 1 +滚动/的getHeight();
            浮动Y =(浮点)(R * Math.cos(Math.PI * 2 * T / tags.length)); //参数圆式
            浮Z =(浮点)(R * Math.sin(Math.PI * 2 * T / tags.length));
            paint.setTextSize((R + Z)/ R / 2 * 40 + 20); //魔法值,更改为更好的东西
            paint.setAlpha((int)的((R + Z)/ R / 2 * 127 + 128));
            canvas.drawText(标签[I],的getWidth()/ 2,的getHeight()/ 2 + Y,油漆);
        }
    }

    @覆盖
    公共布尔的onTouchEvent(MotionEvent事件){
        如果(event.getAction()!= MotionEvent.ACTION_DOWN)
            滚动 -  = event.getY() -  preVY; //仅在一个平面
        preVY = event.getY();
        无效();
        返回true;
    }
}
 

要实现你所描述的结果,你必须添加使用滚轮平滑滚动,更改圆式球体公式,调整参数,并增加一些getter / setter方法​​。使用参数方程,你也可以找到用户所触摸的文字。此视图看起来是这样的:

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?

解决方案

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:

 
精彩推荐
图片推荐