android 文字动画显示,利用Android中的TextView实现逐字显示动画

末蓝、 2022-10-16 07:28 673阅读 0赞

前言

Android的TextView只能设置整个TextView的动画，而不能设置每个文字的动画。即使是使用TextSwitcher，也很难实现我想要的效果。

所以选择自定义一个。大体思路是：继承ViewGroup，设置Text的时候，每个文字为一个TextView，每隔一个固定时间，启动每个TextView的动画。

定义一个CTextView，继承ViewGroup：

实现主要代码：

public class CTextView extends ViewGroup \{

向外提供一个方法setText(String text, final Animation animation, int duration)，text为要显示的字符串，animation为每个字符的动画，duration为字符动画的播放间隔。

该方法实现如下：

public void setText(String text, final Animation animation, int duration) \{

int time = 0;

if(text != null && !text.isEmpty()) \{

char\[\] characters = text.toCharArray();

for(char c : characters) \{

final TextView t = new TextView(context);

//遍历传入的字符串的每个字符，生成一个TextView，并设置它的动画

t.setText(String.valueOf(c));

t.setTextSize(28);

Handler h = new Handler();

//每隔duration时间，播放下一个TextView的动画

h.postDelayed(new Runnable() \{

@Override

public void run() \{

addView(t);

t.setAnimation(animation);

\}, time);

time += duration;

CTextView完整实现如下：

import android.content.Context;

import android.os.Handler;

import android.util.AttributeSet;

import android.view.View;

import android.view.ViewGroup;

import android.view.animation.Animation;

import android.widget.TextView;

/\*\*

\* Created by cchen on 2014/9/2.

\*/

public class CTextView extends ViewGroup \{

private Context context;

public CTextView(Context context) \{

super(context);

this.context = context;

public CTextView(Context context, AttributeSet attrs) \{

super(context, attrs);

this.context = context;

public CTextView(Context context, AttributeSet attrs, int defStyle) \{

super(context, attrs, defStyle);

this.context = context;

public void setText(String text, final Animation animation, int duration) \{

int time = 0;

if(text != null && !text.isEmpty()) \{

char\[\] characters = text.toCharArray();

for(char c : characters) \{

final TextView t = new TextView(context);

//遍历传入的字符串的每个字符，生成一个TextView，并设置它的动画

t.setText(String.valueOf(c));

t.setTextSize(28);

Handler h = new Handler();

//每隔duration时间，播放下一个TextView的动画

h.postDelayed(new Runnable() \{

@Override

public void run() \{

addView(t);

t.setAnimation(animation);

\}, time);

time += duration;

@Override

protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) \{

int measureWidth = measureWidth(widthMeasureSpec);

int measureHeight = measureHeight(heightMeasureSpec);

// 计算自定义的ViewGroup中所有子控件的大小

measureChildren(widthMeasureSpec, heightMeasureSpec);

// 设置自定义的控件MyViewGroup的大小

setMeasuredDimension(measureWidth, measureHeight);

@Override

protected void onLayout(boolean changed, int l, int t, int r, int b) \{

int childLeft = 0;

// 遍历所有子视图

int childCount = getChildCount();

for (int i = 0; i < childCount; i++) \{

View childView = getChildAt(i);

// 获取在onMeasure中计算的视图尺寸

int measureHeight = childView.getMeasuredHeight();

int measuredWidth = childView.getMeasuredWidth();

//将他们横向排列

childView.layout(childLeft, 0, childLeft + measuredWidth, measureHeight);

childLeft += measuredWidth;

private int measureWidth(int pWidthMeasureSpec) \{

int result = 0;

int widthMode = MeasureSpec.getMode(pWidthMeasureSpec);// 得到模式

int widthSize = MeasureSpec.getSize(pWidthMeasureSpec);// 得到尺寸

switch (widthMode) \{

/\*\*

\* mode共有三种情况，取值分别为MeasureSpec.UNSPECIFIED, MeasureSpec.EXACTLY,

\* MeasureSpec.AT\_MOST。

\* MeasureSpec.EXACTLY是精确尺寸，

\* 当我们将控件的layout\_width或layout\_height指定为具体数值时如andorid

\* :layout\_width="50dip"，或者为FILL\_PARENT是，都是控件大小已经确定的情况，都是精确尺寸。

\* MeasureSpec.AT\_MOST是最大尺寸，

\* 当控件的layout\_width或layout\_height指定为WRAP\_CONTENT时

\* ，控件大小一般随着控件的子空间或内容进行变化，此时控件尺寸只要不超过父控件允许的最大尺寸即可

\* 。因此，此时的mode是AT\_MOST，size给出了父控件允许的最大尺寸。

\* MeasureSpec.UNSPECIFIED是未指定尺寸，这种情况不多，一般都是父控件是AdapterView，

\* 通过measure方法传入的模式。

\*/

case MeasureSpec.AT\_MOST:

case MeasureSpec.EXACTLY:

result = widthSize;

break;

return result;

private int measureHeight(int pHeightMeasureSpec) \{

int result = 0;

int heightMode = MeasureSpec.getMode(pHeightMeasureSpec);

int heightSize = MeasureSpec.getSize(pHeightMeasureSpec);

switch (heightMode) \{

case MeasureSpec.AT\_MOST:

case MeasureSpec.EXACTLY:

result = heightSize;

break;

return result;

然后在布局文件中使用该自定义组件：

xmlns:tools="http://schemas.android.com/tools"

android:layout\_width="match\_parent"

android:layout\_height="match\_parent"

android:orientation="vertical"

tools:context=".NetworkTestActivity">

android:id="@+id/cTextView"

android:layout\_width="match\_parent"

android:layout\_height="match\_parent">

在Activity中，调用CTextView的setText方法，传入相关参数即可：

import android.app.Activity;

import android.os.Bundle;

import android.view.animation.AnimationUtils;

public class TestActivity extends Activity \{

@Override

public void onCreate(Bundle savedInstanceState) \{

super.onCreate(savedInstanceState);

setContentView(R.layout.activity\_network\_test);

CTextView cTextView = (CTextView) findViewById(R.id.cTextView);

cTextView.setText("Hello world", AnimationUtils.loadAnimation(this, R.anim.myanim), 300);

其中的第二个参数为动画，我想要的效果是从透明到不透明，myanim.xml:

android:duration="1000"

android:fromAlpha="0.0"

android:toAlpha="1.0" />

如果想实现文字逐个从右侧飞入：

android:duration="1000"

android:fillAfter="true"

android:fromXDelta="50%p"

android:interpolator="@android:anim/anticipate\_interpolator"

android:toXDelta="0" />

总结

以上就是利用Android中的TextView实现逐字动画的全部内容，实现后效果还是很赞的，感兴趣的小伙伴们自己动手实践起来吧。如果有疑问可以留言讨论。

android 文字动画显示,利用Android中的TextView实现逐字显示动画

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关动画效果之文字显示效果（逐行显示和滚动显示）

相关 Android Q横屏显示充电动画的实现方法

相关 Android 加载动画逐帧动画透明弹窗

相关 android 文字动画显示,利用Android中的TextView实现逐字显示动画

相关 Android 逐帧动画&补间动画

相关 Android 动画解析(一) 逐帧动画(Frame Animation)

相关 Android 打印机一样显示TextView

相关 Android 自定义TextView实现文字渐变动画

相关 android实现textview显示系统时间

相关 Android动画——逐帧动画