从左到右连续动画文本

时间:2016-11-17 16:48:39

标签: java android android-animation

我正在尝试创建一个动画,将TextView从左向右移动并无限循环。这是我想要动画的TextView

<TextView
    android:id="@+id/txtTitle"
    android:layout_width="280dp"
    android:layout_height="wrap_content"
    android:textSize="16sp"
    android:textStyle="italic"
    android:layout_marginLeft="20dp"
    android:layout_marginRight="20dp"
    android:layout_marginTop="20dp"
    android:ellipsize="end"
    android:maxLines="1"
    android:layout_centerHorizontal="true"
    android:layout_below="@id/cardView" />

这就是我试图动画TextView

的方式
Animation animation = new TranslateAnimation(0, -280, 0, 0);
animation.setDuration(9000);
animation.setRepeatMode(Animation.RELATIVE_TO_SELF);
animation.setRepeatCount(Animation.INFINITE);
textView.setAnimation(animation);

我想要实现的是文本从屏幕中心开始,向右移动,一旦第一个字母离开屏幕,它应该重新出现在另一边。

3 个答案:

答案 0 :(得分:8)

使用简单的ValueAnimator即可轻松实现您想要做的事。

首先要做的是将要设置动画的TextView的两个相同版本放入布局中。在这个例子中,我的布局如下所示:

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:id="@+id/first"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:textSize="32sp"
        android:text="@string/hello_word"/>

    <TextView
        android:id="@+id/second"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:textSize="32sp"
        android:text="@string/hello_word"/>

</FrameLayout>

然后 - 正如我已经提到的那样 - 你使用ValueAnimatorViews的translationX属性设置动画,但是按屏幕宽度偏移一个(因为上面使用了TextViews match_parent作为宽度,它们的宽度等于屏幕的宽度,这就是我将使用它来偏移其中一个的位置)。您的代码应如下所示:

final TextView first = (TextView) findViewById(R.id.first);
final TextView second = (TextView) findViewById(R.id.second);

final ValueAnimator animator = ValueAnimator.ofFloat(0.0f, 1.0f);
animator.setRepeatCount(ValueAnimator.INFINITE);
animator.setInterpolator(new LinearInterpolator());
animator.setDuration(9000L);
animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
    @Override
    public void onAnimationUpdate(ValueAnimator animation) {
        final float progress = (float) animation.getAnimatedValue();
        final float width = first.getWidth();
        final float translationX = width * progress;
        first.setTranslationX(translationX);
        second.setTranslationX(translationX - width);
    }
});
animator.start();

结果看起来应该是这样的:

looing text demo

答案 1 :(得分:0)

如果有人试图在游戏画布上搜索关于文本选框,这里是在游戏循环中实现该问题的代码。 StartingLine.java是一个,它返回一个画布,用于在游戏界面上绘制,其功能由gameview循环调用

public class StartingLine {
private int screenWidth;
private int screenHeight;
private int xStartPosition;
private int yStartPosition;
private int xEndPosition;
private int yEndPosition;
private int width = 50;
private int tv1y = 0;
private int tv2y = 0;
private int tv3y = 0;
private Paint paint;


public StartingLine(Context context, int screenX, int screenY, int laneCount) {
    screenWidth = screenX;
    screenHeight = screenY;
    this.xStartPosition = screenWidth - width - (screenHeight / laneCount) * 2;
    this.yStartPosition = 0;
    this.xEndPosition = screenWidth - width - (screenHeight / laneCount) * 2;
    this.yEndPosition = screenHeight;
    paint = new Paint();
}

public void update(int color) {
    paint.setColor(color);
    paint.setStrokeWidth(2);
    paint.setTextSize(30);
    paint.setTextAlign(Paint.Align.CENTER);
}

public void draw(Canvas canvas) {
    Rect tb = new Rect();
    paint.getTextBounds("STOP AFTER THIS POINT", 0, "STOP AFTER THIS POINT".length(), tb);
    if (tv1y == 0 && tv2y == 0 && tv3y == 0) {
        tv1y = 0;
        tv2y = tb.width() + width;//tb.width()+width = gap between two texts
        tv3y = 2 * (tb.width() + width);
    } else {
        if (tv3y  >= (3 * (tb.width() + width))) {
            tv3y = 2 * (tb.width() + width);
        }

        tv1y = tv3y - 2 * (width + tb.width());
        tv2y = tv1y + width + tb.width();
        tv3y = tv2y + width + tb.width();
    }

    canvas.drawLine(xStartPosition, yStartPosition, xEndPosition, yEndPosition, paint);
    canvas.drawLine(xStartPosition + width, yStartPosition, xEndPosition + width, yEndPosition, paint);
    canvas.save();
    canvas.rotate(270, screenWidth / 2, screenHeight / 2);

    canvas.drawText("STOP AFTER THIS POINT", tv1y += 5, yEndPosition - 20, paint);
    canvas.drawText("STOP AFTER THIS POINT", tv2y += 5, yEndPosition - 20, paint);
    canvas.drawText("STOP AFTER THIS POINT", tv3y += 5, yEndPosition - 20, paint);
    canvas.restore();
}
}

答案 2 :(得分:0)

Android为此提供了一个内置解决方案,称为“字幕”。

将这些行添加到您的TextView中。

<TextView
    android:id="@+id/txtTitle"
    android:singleLine="true"
    android:ellipsize="marquee"
    android:marqueeRepeatLimit="marquee_forever"
 />

然后只需致电

txtTitle.setText(title);
txtTitle.setSelected(true);

但是,这仅在文本足够长以至于超出范围时可用。