也许有人已经有了现成的解决方案,或者可以告诉我如何在 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-->
试试这个
<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++;
}
}
}
资源
那里 是 不 限制 到 什么 你 能 完成, 除了 这 限制 你 地方 在 你的 自己的 思维。