如何在Android Studio中用XML实现LinkedIn加载动画？

用户提供的LinkedIn加载动画的CSS和HTML代码如下：

body{
    margin:0;
    padding:0
}
.wrapper{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    transition:2s
}
.wrapper img{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%)
}
.cover{
    position:relative;
    width:130px;
    height:5px;
    background:#d3d3d3;
    border-radius:20px;
    margin-top:75px;
    overflow:hidden;
    transition:2s
}
.cover:before{
    content:"";
    position:absolute;
    width:68px;
    height:5px;
    left:-30px;
    background:#1e90ff;
    border-radius:20px;
    animation:link 1s infinite ease;
    transition:1s
}
@keyframes link{
    50%{
        left:96px
    }
}

<div class="wrapper"><div class="cover"></div></div>

用户曾尝试提取动画帧放入animation-list，但希望有更直接的实现方法：

<!-- loading.xml -->

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/bg_color"/>
    <item android:bottom="50dp" android:gravity="bottom">
        <animation-list android:drawable="@drawable/frame1" android:duration="100" />
        <animation-list android:drawable="@drawable/frame2" android:duration="100" />
        <animation-list android:drawable="@drawable/frame3" android:duration="100" />
        <animation-list android:drawable="@drawable/frame4" android:duration="100" />
        <animation-list android:drawable="@drawable/frame5" android:duration="100" />
    </item>
</layer-list>

直接实现方案 #

我们可以通过layer-list结合位移动画属性来实现，无需逐帧制作：

1. 创建灰色背景条Drawable (drawable/loading_bg.xml) #

对应CSS中的.cover，实现圆角灰色背景：

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <solid android:color="#d3d3d3"/>
    <corners android:radius="20dp"/>
    <size android:width="130dp" android:height="5dp"/>
</shape>

2. 创建蓝色滑块Drawable (drawable/loading_slider.xml) #

对应CSS中的.cover:before，实现圆角蓝色滑动块：

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <solid android:color="#1e90ff"/>
    <corners android:radius="20dp"/>
    <size android:width="68dp" android:height="5dp"/>
</shape>

3. 组合背景与滑块 (drawable/loading_combined.xml) #

用layer-list将两者叠加，滑块初始位置设置在背景左侧外部：

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- 灰色背景条 -->
    <item android:drawable="@drawable/loading_bg"/>
    <!-- 蓝色滑块，初始左移30dp匹配CSS初始位置 -->
    <item android:drawable="@drawable/loading_slider"
        android:left="-30dp"/>
</layer-list>

4. 创建位移动画 (anim/loading_translate.xml) #

实现滑块从左到右再反向滑动的循环动画，对应CSS的@keyframes link：

<?xml version="1.0" encoding="utf-8"?>
<translate xmlns:android="http://schemas.android.com/apk/res/android"
    android:fromXDelta="0"
    android:toXDelta="126dp" <!-- 计算逻辑：96dp - (-30dp) = 126dp，匹配CSS位移量 -->
    android:duration="1000"
    android:interpolator="@android:anim/ease_in_out_interpolator"
    android:repeatCount="infinite"
    android:repeatMode="reverse"/>

5. 在布局中使用并启动动画 #

在布局文件中添加ImageView承载动画：

<ImageView
    android:id="@+id/loading_view"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center"
    android:src="@drawable/loading_combined"/>

在代码中启动动画（可放在Activity或Fragment的初始化逻辑中）：

ImageView loadingView = findViewById(R.id.loading_view);
Animation translateAnim = AnimationUtils.loadAnimation(this, R.anim.loading_translate);
loadingView.startAnimation(translateAnim);

内容的提问来源于stack exchange，提问作者C.F.G