1. 程式人生 > >貌似Keep登入首頁 圖片在背景移動

貌似Keep登入首頁 圖片在背景移動

1.效果圖

這裡寫圖片描述
因為只能傳2M以下的圖片,所以移動的效果看不出來。
這種圖片在背景慢慢移動好像在好幾個APP中看到了,記得以前版本的QQ也有,現在沒了,Keep還有,就是一個translate動畫(不知道Keep是不是這樣做的,效果差不多)。

2.乾貨

做這個思路主要就是寫一個translate動畫xml檔案

<translate xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="20000"
    android:fromXDelta="-500"
    android:fromYDelta
="0" android:repeatCount="1000" android:repeatMode="reverse" android:toXDelta="0" android:toYDelta="0" >
</translate>

其中:
fromXDelta 表示移動X軸的起始位置,這裡-500,說明在原點(0,0)圖片的左上角,往左移動500畫素
fromYDelta 同理 表示移動Y軸的起始位置,這裡0,表示在Y軸上不動,那X Y軸合起來就是圖片從原點往左移動500px的地方開始移動。
toXDelta 表示終點X軸的座標
toYDelta 同理 然後這兩個座標合起來就是說終點的座標是原點
repeatCount 重複次數
repeatMode 重複型別,這裡有兩種reverse表示倒序回放,restart表示重新回到原點再開始。
所以整個動畫檔案總結起來就是,從原點的左邊500畫素開始往右邊移動,移動到原點為止,在從原點往左邊移動,一直這樣迴圈1000次,一次的時間是20000ms



使用這個動畫檔案,先將存放圖片的佈局寫出來,就是一個Imageview

<?xml version="1.0" encoding="utf-8"?>
<ImageView
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/iv"
    android:src="@mipmap/img"
    android:scaleType="centerCrop"
    android:layout_width="match_parent"
    android:layout_height
="match_parent" >
</ImageView>

注意我這裡使用了scaleType=”centerCrop”這個屬性,不太清楚的可以看這裡android:scaleType=”centerCrop”
,這裡我用一張圖片對比了下,這個屬性到底起了什麼作用。
使用這個動畫檔案的程式碼如下

        ImageView iv = (ImageView) this.findViewById(R.id.iv);
        Animation animation = AnimationUtils.loadAnimation(this, R.anim.trans_anim);
        iv.startAnimation(animation);

執行出來的效果如下(因為圖片大小的原因,只能放這麼點移動距離)
這裡寫圖片描述
可以看到確實是從(-500,0)開始移動,往(0,0)移動,但是明顯效果不太好。
因為起點是-500,所以導致圖片另一邊空出500px了,新增下面的屬性到imagevie

 android:layout_marginRight="-200dp"

不一定要這個值,這相當於將圖片往右邊移動了200dp,再然後起點-500px時就不怕空白出500px了,因為兩者dp和px並不是1:1等換的,所以這個值最好比500px多點.
在執行就沒問題了

專案地址