Android Drawable 动画和缩放

Question

我正在尝试让一个图层列表可绘制对象从其自身的一端移动到另一端。图层列表必须是当前屏幕宽度的 400%。这是我到目前为止所做的:

我正在努力让它按照下图所示的方式工作。

包含 View loading.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:id="@+id/loading" >

    <ImageView
        android:id="@+id/iv_loading"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerVertical="true"
        android:scaleType="matrix"
        android:layout_alignParentLeft="true"
        android:src="@drawable/scale_loading" />

    <TextView
        android:layout_below="@id/iv_loading"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="20dp"
        android:textSize="20sp"
        android:layout_marginRight="20dp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="L O A D I N G"/>


</RelativeLayout>

loading_line.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
    <item android:left="0dp" android:right="420dp">
        <shape android:shape="rectangle">
            <gradient 
                android:startColor="#FFFFFFFF" 
                android:endColor="@color/green_100"
                android:angle="0" />            
            <size 
                android:width="60dp"
                android:height="2dp" />

        </shape>
    </item>
    <item android:left="60dp" android:right="360dp">
        <shape android:shape="rectangle">       
            <gradient 
                android:startColor="@color/green_100" 
                android:endColor="#FFFFFFFF"
                android:angle="0" />
            <size
                android:width="60dp"
                android:height="2dp" />           
        </shape>    
    </item>
    <item android:left="120dp" android:right="300dp">
        <shape android:shape="rectangle">
            <gradient 
                android:startColor="#FFFFFFFF" 
                android:endColor="@color/blue_100"
                android:angle="0" />            
            <size 
                android:width="60dp"
                android:height="2dp" />

        </shape>
    </item>
    <item android:left="180dp" android:right="240dp">
        <shape android:shape="rectangle">       
            <gradient 
                android:startColor="@color/blue_100" 
                android:endColor="#FFFFFFFF"
                android:angle="0" />
            <size
                android:width="60dp"
                android:height="2dp" />           
        </shape>    
    </item>
        <item android:left="240dp" android:right="180dp">
        <shape android:shape="rectangle">
            <gradient 
                android:startColor="#FFFFFFFF" 
                android:endColor="@color/red_100"
                android:angle="0" />            
            <size 
                android:width="60dp"
                android:height="2dp" />

        </shape>
    </item>
    <item android:left="300dp" android:right="120dp">
        <shape android:shape="rectangle">       
            <gradient 
                android:startColor="@color/red_100" 
                android:endColor="#FFFFFFFF"
                android:angle="0" />
            <size
                android:width="60dp"
                android:height="10dp" />              
        </shape>    
    </item>
    <item android:left="360dp" android:right="60dp">
        <shape android:shape="rectangle">
            <gradient 
                android:startColor="#FFFFFFFF" 
                android:endColor="@color/green_100"
                android:angle="0" />            
            <size 
                android:width="60dp"
                android:height="2dp" />

        </shape>
    </item>
    <item android:left="420dp" android:right="0dp">
        <shape android:shape="rectangle">       
            <gradient 
                android:startColor="@color/green_100" 
                android:endColor="#FFFFFFFF"
                android:angle="0" />
            <size
                android:width="60dp"
                android:height="2dp" />           
        </shape>    
    </item>
</layer-list>

loading_left_to_right.xml

<?xml version="1.0" encoding="utf-8"?>
<set>
  <translate xmlns:android="http://schemas.android.com/apk/res/android"
   android:fromXDelta="100%"
   android:toXDelta="0"
   android:interpolator="@android:anim/linear_interpolator"
   android:duration="5000"/>
</set>

scale_loading.xml

<?xml version="1.0" encoding="utf-8"?>
<scale xmlns:android="http://schemas.android.com/apk/res/android"
        android:drawable="@drawable/loading_line"
        android:scaleGravity="center_vertical|center_horizontal"
        android:scaleHeight="100%"
        android:scaleWidth="400%" />

Android 中的代码:

    View view = inflater.inflate(R.layout.loading, container, false);               
    ImageView myImage = (ImageView) view.findViewById(R.id.iv_loading);
    Animation animation = AnimationUtils.loadAnimation(getActivity(), R.anim.loading_left_to_right);
    animation.setRepeatCount(Animation.INFINITE);
    myImage.startAnimation(animation);

这是我希望 loading_line.xml 的外观和动画效果的图片集:

Answer 1

这是我的工作代码:

loading.xml

android:scaleX 在缩放 drawable 方面工作得更好，它完全没有 scale_loading.xml

<ImageView
    android:id="@+id/iv_loading"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_centerVertical="true"
    android:layout_alignParentLeft="true"
    android:src="@drawable/loading_line"
    android:scaleX="4"
    />

<TextView
    android:layout_below="@id/iv_loading"
    android:layout_centerHorizontal="true"
    android:layout_marginTop="20dp"
    android:textSize="20sp"
    android:layout_marginRight="20dp"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="L O A D I N G"/>

loading_left_to_right.xml

必须稍微调整 XDelta

<set xmlns:android="http://schemas.android.com/apk/res/android">
<translate xmlns:android="http://schemas.android.com/apk/res/android"
    android:fromXDelta="150%"
    android:toXDelta="-150%"
    android:duration="1000"
    android:repeatMode="restart"
    android:repeatCount="infinite"/>

MyActivity.java

只需启动动画。我有一个线性插值器组，但这取决于你，先生。

Animation animation = AnimationUtils.loadAnimation(this, R.anim.loading_left_to_right);
myImage.startAnimation(animation);

总结

这些都是我编辑的文件。不再需要 scale_loading.xml。

希望这对您有所帮助!这是一个非常可爱的动画，祝您制作一切顺利!