web-dev-qa-db-ja.com

Android文字ごとのテキスト表示アニメーション

アニメーションを実行するための効率的な方法を知っている人は、テキストを文字ごとに表示することです。お気に入り：

T
Th
Thi
この
このi
これは
...

等々。

ありがとう！

androidanimationtextcharacter
37
zegnus

これは最もエレガントなソリューションではないかもしれませんが、おそらく最も簡単なのは、完全なシーケンスが表示されるまでテキストを時々更新するTextViewを持つHandlerのクイックサブクラスです。

public class Typewriter extends TextView {

    private CharSequence mText;
    private int mIndex;
    private long mDelay = 500; //Default 500ms delay


    public Typewriter(Context context) {
        super(context);
    }

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

    private Handler mHandler = new Handler();
    private Runnable characterAdder = new Runnable() {
        @Override
        public void run() {
            setText(mText.subSequence(0, mIndex++));
            if(mIndex <= mText.length()) {
                mHandler.postDelayed(characterAdder, mDelay);
            }
        }
    };

    public void animateText(CharSequence text) {
        mText = text;
        mIndex = 0;

        setText("");
        mHandler.removeCallbacks(characterAdder);
        mHandler.postDelayed(characterAdder, mDelay);
    }

    public void setCharacterDelay(long millis) {
        mDelay = millis;
    }
}

その後、次のようなアクティビティでこれを使用できます。

public class MyActivity extends Activity {
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        Typewriter writer = new Typewriter(this);
        setContentView(writer);

        //Add a character every 150ms
        writer.setCharacterDelay(150);
        writer.animateText("Sample String");
    }
}

各文字が追加されたアニメーション効果が必要な場合は、代わりにサブクラス化TextSwitcherを参照してください。

お役に立てば幸いです！

99
Devunwired

devunwiredのタイプライタークラスを使用する

次に、レイアウトで：

<com.example.fmm.Typewriter
    Android:id="@+id/typewriter"
    Android:layout_alignParentTop="true"
    Android:layout_width="fill_parent"
    Android:layout_height="wrap_content"/>

アクティビティのコード：

Typewriter writer = (Typewriter)findViewById(R.id.typewriter);
        //Add a character every 150ms
        writer.setCharacterDelay(150);
        writer.animateText("Sample String");
15
K-RAD

余分なクラスを設定する必要はありません

setCharacterDelay（150）;
animateText（ "Sample String"）;

private Handler mHandler = new Handler();
private Runnable characterAdder = new Runnable() {
@Override
public void run() {
    tv.setText(mText.subSequence(0, mIndex++));
    if(mIndex <= mText.length()) {
        mHandler.postDelayed(characterAdder, mDelay);
    }
}
};

public void animateText(CharSequence text) {
mText = text;
mIndex = 0;

tv.setText("");
mHandler.removeCallbacks(characterAdder);
mHandler.postDelayed(characterAdder, mDelay);
}

public void setCharacterDelay(long millis) {
mDelay = millis;
}
9
Viswanath Lekshmanan

devunwired with xmlレイアウトのこの新しいコピー

    public class Typewriter extends TextView {

    private CharSequence mText;
    private int mIndex;
    private long mDelay = 500; //Default 500ms delay


    public Typewriter(Context context) {
        super(context);
    }

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

    private Handler mHandler = new Handler();
    private Runnable characterAdder = new Runnable() {
        @Override
        public void run() {
            setText(mText.subSequence(0, mIndex++));
            if(mIndex <= mText.length()) {
                mHandler.postDelayed(characterAdder, mDelay);
            }
        }
    };

    public void animateText(CharSequence text) {
        mText = text;
        mIndex = 0;

        setText("");
        mHandler.removeCallbacks(characterAdder);
        mHandler.postDelayed(characterAdder, mDelay);
    }

    public void setCharacterDelay(long millis) {
        mDelay = millis;
    }
}

コード使用

        textView = (Typewriter)findViewById(R.id.textView1);
    //Add a character every 150ms
    textView.setCharacterDelay(150);
    textView.animateText("Sample String");

次に、classStartでtextViewを定義します

3
Baha'a Odeh

私は再帰的な方法を使用し、言葉の間に少し遅延を追加して、人間の感覚を高めました。 textViewをテキストとともにビューとして送信し、最初から入力する長さとして「1」を送信します

  private fun typingAnimation(view: TextView, text: String, length: Int) {
    var delay = 100L
    if(Character.isWhitespace(text.elementAt(length-1))){
        delay = 600L
    }
    view.text = text.substring(0,length)
    when (length) {
        text.length -> return
        else -> Handler().postDelayed({
            typingAnimation(view, text, length+1 )
        }, delay)
    }
}
1
Shashank Bhushan

遅すぎることはわかっていますが、まだGoogleから誰かがここに到着する可能性があります。実際、私も自分のアプリにこのようなものが必要だったので、自分で作成しました。 Fade-In TextView を試してみると、すべてのキャラクターが滑らかなアルファアニメーションで表示されます。使い方も非常に簡単です。

XMLレイアウトで

    <believe.cht.fadeintextview.TextView
        Android:id="@+id/textView"
        Android:layout_width="match_parent"
        Android:layout_height="wrap_content"
        Android:textSize="30sp"
        Android:textColor="@Android:color/black"

        app:letterDuration="250"/>

アクティビティ/フラグメント内

believe.cht.fadeintextview.TextView textView = (believe.cht.fadeintextview.TextView) findViewById(R.id.textView);

textView.setLetterDuration(250); // sets letter duration programmatically
textView.isAnimating(); // returns current animation state (boolean)
textView.setText(); // sets the text with animation

詳細情報

Fade-In TextViewライブラリは、ネイティブTextViewクラスからプロパティを直接継承します。つまり、すべてのネイティブTextViewメソッドがサポートされます。複数行のサポートを含む実質的に制限はありません。ライブラリには、ビューを完全に制御できる独自のメソッドと属性もいくつかあります。

1
cht

上記のソリューションのほとんどは、さまざまなエラーをスローします。解決策は古いと思います。私はこれにつまずいたAndroidスタジオプラグインとそれは魅力のように動作します。

1. AutoTypeTextViewのインストールは簡単です。 build.gradleを追加するだけです

'com.krsticdragan：autotypetextview：1.1'をコンパイルします

2. AutoTypeTextViewの追加とそのタグの使用に使用する新しいネームスペースを追加します。

xmlns：attv = "http://schemas.Android.com/apk/res-auto"

したがって、ルートレイアウトは次のようになります。

<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:Android="http://schemas.Android.com/apk/res/Android" xmlns:tools="http://schemas.Android.com/tools" xmlns:attv="http://schemas.Android.com/apk/res-auto"

  1. これをxmlファイルに追加します。

    <com.dragankrstic.autotypetextview.AutoTypeTextView Android:id="@+id/lblTextWithoutMistakes" Android:layout_width="wrap_content" Android:layout_height="wrap_content" attv:animateTextTypeWithoutMistakes="Hello World!" />

これら3つの手順だけで、準備完了です。 詳細についてはこちらのドキュメントをご覧ください

0
Seunope

Kotlinコードを操作するときに@Devunwiredの答えに追加するだけで、
変更しました（animateText関数で）：
mHandler.postDelayed(mRunnable,mDelay)からmRunnable.run()へ

したがって、最終的なKotlinクラスは次のようになります。

_class TextViewAnimationComponent(context: Context,attributeSet: AttributeSet?) : TextView(context,attributeSet) {
    private var mHandler = Handler()
    private var mText:CharSequence = ""
    private var mIndex:Int = 0
    private var mDelay:Long = 500

    private val mRunnable = object: Runnable{
        override fun run() {
            text = mText.subSequence(0,mIndex++)
            if(mIndex <= mText.length){
                mHandler.postDelayed(this,mDelay)
            }
        }
    }

    fun animateText(mText:CharSequence){
        this.mText = mText
        mIndex = 0

        text = ""
        mHandler.removeCallbacks(mRunnable)
        mRunnable.run()
//        mHandler.postDelayed(mRunnable,mDelay)
    }

    fun setCharacterDelay(millis:Long){
        mDelay = millis
    }
}
_



[。
内部アクティビティ：

_    private fun animateText(mText: CharSequence, delayMillis: Long, postFunction:() -> Unit){
        var mIndex = 0

        val runnable = object : Runnable {
            override fun run() {

                // RunRunnable is a boolean flag; used in case you want to interrupt the execution
                if(runRunnable) {
                    if (mIndex <= mText.length) {

                        // change textViewSwitchStateValue with your own TextView id
                        textViewSwitchStateValue.text = mText.subSequence(0, mIndex++)
                        Handler().postDelayed(this, delayMillis)
                    } else {

                        // After all the characters finished animating; Clear the TextView's text and then run the postFunction
                        textViewSwitchStateValue.text = ""
                        postFunction()
                    }
                }
            }
        }
        runOnUiThread(runnable)
_

ロードドットをアニメーション化する簡単な例：
animateText(". . .", 400){switchStateON()}

0
dongkichan

理論的には

string text = "hello"
string temp = "h"

iterate: temp += if (text.length > temp.length) text[temp.length]; wait

もちろん、runmethodで反復を行います。

0
RobotRock