Android实现直播间飘屏效果（顶部抽奖飘屏右左到右滚动跑马灯效果）

这个功能由两个部分组成
第一部分为组合动画
第二部分为文字如果文字的长度大的话进行滚动
组合动画部分（这个动画xml文件为由左到右平移渐变之后持续2.5秒继续移动到屏幕外）
lucky_msg_in.xml

<!-- res/anim/slide_in_animation.xml -->
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <translate
        android:fromXDelta="100%"
        android:toXDelta="0"
        android:duration="500"/>
    <alpha
         android:duration="250"
         android:fromAlpha="0.0"
         android:toAlpha="1.0"/>

    <translate
        android:fromXDelta="0"
        android:toXDelta="-100%"
        android:duration="250"
        android:startOffset="2500">
    </translate>
</set>

代码

 Animation slideInAnimation = AnimationUtils.loadAnimation(MainActivity.this, 
ry.startAnimation(slideInAnimation);

实现文字滚动

  <TextView
            android:id="@+id/marqueeTextView"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginRight="70dp"
            android:layout_marginLeft="50dp"
            android:gravity="center"
            android:text=""
            android:singleLine="true"
            android:ellipsize="marquee"
            android:focusable="true"
            android:textSize="11dp"
            android:textColor="#ffffff"
            android:focusableInTouchMode="true"
            android:marqueeRepeatLimit="marquee_forever"
            android:scrollHorizontally="true"
            />

  marqueeTextView.setHorizontallyScrolling(true);
                        marqueeTextView.setSelected(true);

那么整体思路发完了 上整体代码
xml部分

  <LinearLayout
        android:id="@+id/ry"
        android:layout_width="match_parent"
        android:layout_height="36dp"
        android:background="@drawable/piaoping1"
        android:gravity="center_vertical"
        android:visibility="gone"
        android:orientation="horizontal">

        <TextView
            android:id="@+id/marqueeTextView"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginRight="70dp"
            android:layout_marginLeft="50dp"
            android:gravity="center"
            android:text=""
            android:singleLine="true"
            android:ellipsize="marquee"
            android:focusable="true"
            android:textSize="11dp"
            android:textColor="#ffffff"
            android:focusableInTouchMode="true"
            android:marqueeRepeatLimit="marquee_forever"
            android:scrollHorizontally="true"

            />
    </LinearLayout>

这个是我的飘屏素材

这个是组合动画

<!-- res/anim/slide_in_animation.xml -->
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <translate
        android:fromXDelta="100%"
        android:toXDelta="0"
        android:duration="500"/>
    <alpha
         android:duration="250"
         android:fromAlpha="0.0"
         android:toAlpha="1.0"/>

    <translate
        android:fromXDelta="0"
        android:toXDelta="-100%"
        android:duration="250"
        android:startOffset="2500">
    </translate>
</set>

public class MainActivity extends AppCompatActivity {
    private TextView marqueeTextView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        marqueeTextView = findViewById(R.id.marqueeTextView);
        findViewById(R.id.bt1).setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                marqueeTextView.setText(""); // 清空文本
                marqueeTextView.setText("哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈");

                // 在主线程中延迟启动滚动
                marqueeTextView.postDelayed(new Runnable() {
                    @Override
                    public void run() {
                        marqueeTextView.setHorizontallyScrolling(true);
                        marqueeTextView.setSelected(true);
                    }
                }, 1000);
                LinearLayout ry = findViewById(R.id.ry);
                ry .setVisibility(View.VISIBLE);
                // 加载动画资源
                Animation slideInAnimation = AnimationUtils.loadAnimation(MainActivity.this, R.anim.lucky_msg_in);
                slideInAnimation.setAnimationListener(new Animation.AnimationListener() {
                    @Override
                    public void onAnimationStart(Animation animation) {
                        // 动画开始时的处理
                    }

                    @Override
                    public void onAnimationEnd(Animation animation) {
                        // 动画结束时的处理
                        marqueeTextView.setText("");
                        marqueeTextView.setHorizontallyScrolling(false); // 停止滚动
                        marqueeTextView.setSelected(false);
                        ry.setVisibility(View.GONE); // 隐藏视图
                    }

                    @Override
                    public void onAnimationRepeat(Animation animation) {
                        // 动画重复时的处理
                    }
                });
                // 启动动画
                ry.startAnimation(slideInAnimation);

            }
        });
    }

最后效果

但是跟原版不一样那么我就加颜色吧

 // 原始文本
                String originalText = "笑笑 在 西游记 获取了 1个唐僧、1个孙悟空、1个猪八戒、1个白龙马";

                // 寻找关键字的位置
                int startIndex = originalText.indexOf("在");
                int endIndex = originalText.indexOf("获取了") + 3;

                // 打印关键字位置，用于调试
                Log.d("MainActivity", "startIndex: " + startIndex + ", endIndex: " + endIndex);

                // 创建 SpannableString 对象
                SpannableString spannableString = new SpannableString(originalText);

                // 设置不同颜色的 ForegroundColorSpan
                spannableString.setSpan(new ForegroundColorSpan(Color.rgb(255, 233, 255)), 0, startIndex, 0);
                spannableString.setSpan(new ForegroundColorSpan(Color.rgb(240, 202, 255)), startIndex, startIndex + 1, 0);
                spannableString.setSpan(new ForegroundColorSpan(Color.rgb(255, 233, 240)), startIndex + 1, endIndex - 4, 0);
                spannableString.setSpan(new ForegroundColorSpan(Color.rgb(240, 202, 255)), endIndex - 4, endIndex, 0);
                spannableString.setSpan(new ForegroundColorSpan(Color.rgb(246, 201, 121)), endIndex, originalText.length(), 0);

                // 将 SpannableString 应用到 TextView
                marqueeTextView.setText(spannableString);

效果

⚠️不要作为不正规或者损害用户利益的功能开发有些饭不能恰⚠️