如何在android studio中为textView中的文本创建淡入动画?

问题描述 投票:0回答:1

也许有人已经有了现成的解决方案,或者可以告诉我如何在 android studio 中制作类似的动画?

淡入文字动画

我在html + CSS中找到了一个例子,但我不知道是否有任何方法可以将其应用到TextView?如果有人遇到并找到解决方案,我将非常感激。

@import url("https://fonts.googleapis.com/css?family=Montserrat&display=swap");

* {
  padding: 0;
  margin: 0;
}

body {
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

h1 {
  font-family: "Montserrat Medium";
  max-width: 40ch;
  text-align: center;
  transform: scale(0.94);
  animation: scale 3s forwards cubic-bezier(0.5, 1, 0.89, 1);
}
@keyframes scale {
  100% {
    transform: scale(1);
  }
}

span {
  display: inline-block;
  opacity: 0;
  filter: blur(4px);
}

span:nth-child(1) {
  animation: fade-in 0.8s 0.1s forwards cubic-bezier(0.11, 0, 0.5, 0);
}

span:nth-child(2) {
  animation: fade-in 0.8s 0.2s forwards cubic-bezier(0.11, 0, 0.5, 0);
}

span:nth-child(3) {
  animation: fade-in 0.8s 0.3s forwards cubic-bezier(0.11, 0, 0.5, 0);
}

span:nth-child(4) {
  animation: fade-in 0.8s 0.4s forwards cubic-bezier(0.11, 0, 0.5, 0);
}

span:nth-child(5) {
  animation: fade-in 0.8s 0.5s forwards cubic-bezier(0.11, 0, 0.5, 0);
}

span:nth-child(6) {
  animation: fade-in 0.8s 0.6s forwards cubic-bezier(0.11, 0, 0.5, 0);
}

span:nth-child(7) {
  animation: fade-in 0.8s 0.7s forwards cubic-bezier(0.11, 0, 0.5, 0);
}

span:nth-child(8) {
  animation: fade-in 0.8s 0.8s forwards cubic-bezier(0.11, 0, 0.5, 0);
}

span:nth-child(9) {
  animation: fade-in 0.8s 0.9s forwards cubic-bezier(0.11, 0, 0.5, 0);
}

span:nth-child(10) {
  animation: fade-in 0.8s 1s forwards cubic-bezier(0.11, 0, 0.5, 0);
}

span:nth-child(11) {
  animation: fade-in 0.8s 1.1s forwards cubic-bezier(0.11, 0, 0.5, 0);
}

span:nth-child(12) {
  animation: fade-in 0.8s 1.2s forwards cubic-bezier(0.11, 0, 0.5, 0);
}

span:nth-child(13) {
  animation: fade-in 0.8s 1.3s forwards cubic-bezier(0.11, 0, 0.5, 0);
}

span:nth-child(14) {
  animation: fade-in 0.8s 1.4s forwards cubic-bezier(0.11, 0, 0.5, 0);
}

span:nth-child(15) {
  animation: fade-in 0.8s 1.5s forwards cubic-bezier(0.11, 0, 0.5, 0);
}

span:nth-child(16) {
  animation: fade-in 0.8s 1.6s forwards cubic-bezier(0.11, 0, 0.5, 0);
}

span:nth-child(17) {
  animation: fade-in 0.8s 1.7s forwards cubic-bezier(0.11, 0, 0.5, 0);
}

span:nth-child(18) {
  animation: fade-in 0.8s 1.8s forwards cubic-bezier(0.11, 0, 0.5, 0);
}

@keyframes fade-in {
  100% {
    opacity: 1;
    filter: blur(0);
  }
}
<h1>
  <span>There</span>
  <span>are</span>
  <span>no</span>
  <span>limits</span>
  <span>to</span>
  <span>what</span>
  <span>you</span>
  <span>can</span>
  <span>accomplish,</span>
  <span>except</span>
  <span>the</span>
  <span>limits</span>
  <span>you</span>
  <span>place</span>
  <span>on</span>
  <span>your</span>
  <span>own</span>
  <span>thinking.</span>
</h1>
<!--Brian Tracy-->

java android android-animation
1个回答
0
投票

试试这个

<TextView
    android:id="@+id/typewriter_text"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:textSize="24sp"
    android:textColor="#000000"
    android:layout_gravity="center"
    android:text="Your text will appear here"
    />

活动

import android.os.Bundle;
import android.os.Handler;
import android.support.v7.app.AppCompatActivity;
import android.widget.TextView;

public class TypewriterActivity extends AppCompatActivity {

    private TextView typewriterText;
    private String[] textArray;
    private int currentIndex = 0;
    private Handler handler = new Handler();

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_typewriter);

        typewriterText = findViewById(R.id.typewriter_text);
        // Split the text into an array of words
        textArray = getResources().getStringArray(R.array.typewriter_text_array);
        
        // Start the typewriter effect
        startTypewriterAnimation();
    }

    private void startTypewriterAnimation() {
        if (currentIndex < textArray.length) {
            String currentText = textArray[currentIndex];
            typewriterText.setText(currentText.subSequence(0, currentText.length() - 1));
            handler.postDelayed(new Runnable() {
                @Override
                public void run() {
                    startTypewriterAnimation();
                }
            }, 100); // Delay between characters (adjust as needed)
            currentIndex++;
        }
    }
}

资源

那里 是 不 限制 到 什么 你 能 完成, 除了 这 限制 你 地方 在 你的 自己的 思维。
© www.soinside.com 2019 - 2024. All rights reserved.