Android 模仿iPhone列表數(shù)據(jù)View刷新動(dòng)畫(huà)詳解
因?yàn)槲冶救撕芟矚g在不同的頁(yè)面之間跳轉(zhuǎn)時(shí)加點(diǎn)好玩的動(dòng)畫(huà),今天無(wú)意間看到一個(gè)動(dòng)畫(huà)效果感覺(jué)不錯(cuò),幾種效果圖如下:既然好玩就寫(xiě)在博客中,直接說(shuō)就是:該效果類(lèi)似于iPhone中View的切換動(dòng)畫(huà)效果,今天就只介紹上面展示的效果。
廢話(huà)不多說(shuō),先上效果,再看代碼?。?/p>
效果一:

效果二:

效果三:

效果四:(犯錯(cuò)的效果):

效果五(回旋效果一):

效果六(回旋效果二):

效果看完了,就來(lái)看下上面效果實(shí)現(xiàn)的具體代碼吧, 中間會(huì)把我自己試驗(yàn)的、犯的錯(cuò)誤都以注釋的形式寫(xiě)下來(lái)的, 大家使用的時(shí)候別出錯(cuò)就行了!先來(lái)看下使用的布局文件,很簡(jiǎn)單的布局:
XML/HTML代碼
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="fill_parent" android:orientation="vertical" > <ListView android:id="@+id/firstPage" android:layout_width="fill_parent" android:layout_weight="1.0" android:layout_height="0dip"/> <ListView android:id="@+id/secondPage" android:layout_width="fill_parent" android:layout_weight="1.0" android:layout_height="0dip" android:visibility="gone"/> <Button android:id="@+id/startNext" android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="@string/next" /> </LinearLayout>
XML/HTML代碼
<strong> 下面再來(lái)看下實(shí)現(xiàn)以上效果的具體代碼,代碼中所標(biāo)的順序與上面顯示的效果圖一致:</strong>
Java代碼
package com.xiaoma.www;
import android.animation.Animator;
import android.animation.AnimatorListenerAdapter;
import android.animation.ObjectAnimator;
import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.animation.AccelerateInterpolator;
import android.view.animation.CycleInterpolator;
import android.view.animation.DecelerateInterpolator;
import android.view.animation.Interpolator;
import android.view.animation.OvershootInterpolator;
import android.widget.ArrayAdapter;
import android.widget.Button;
import android.widget.ListView;
/**
* @Title: BetweenAnimationActivity.java
* @Package com.xiaoma.www
* @Description: 小馬學(xué)習(xí)模仿iPhone列表分頁(yè)旋轉(zhuǎn)刷新
* @author XiaoMa
*/
public class BetweenAnimationActivity extends Activity implements OnClickListener {
/**資源聲明*/
private Button startNext = null ;
private ListView firstPage = null ;
private ListView secondPage = null ;
/**列表項(xiàng)聲明*/
private static final String firstItem[] =
{"海闊人生","光輝歲月","無(wú)盡空虛","真的愛(ài)你","歲月無(wú)聲","灰色軌跡","再見(jiàn)理想"};
private static final String secondItem[] =
{"洗唰唰","愛(ài)啦啦","喜歡你","娃哈哈","小馬果","大壞蛋","冷雨夜"};
/**列表頁(yè)面切換動(dòng)畫(huà)插值器聲明一*/
private Interpolator accelerator = new AccelerateInterpolator();
private Interpolator decelerator = new DecelerateInterpolator();
/**動(dòng)畫(huà)插值器二:效果五與效果六都為以下插值器*/
private Interpolator accelerator1= new CycleInterpolator(45f);
private Interpolator decelerator1= new OvershootInterpolator();
/** Called when the activity is first created. */
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
/**
* 這個(gè)地方寫(xiě)下,大家盡量不要在onCreate方法中寫(xiě)太多的操作,
* 如果涉及到很多配置問(wèn)題時(shí)有些屬性設(shè)置必須在onCreate()方法中
* 寫(xiě),比如:全屏、橫豎屏必須在setContentView()前面寫(xiě),
* 如果在onCreate()方法中寫(xiě)太多東西的,一句話(huà):太亂?。?
* */
init();
}
/**
* 初始化實(shí)現(xiàn)
*/
private void init(){
/**資源定位,添加監(jiān)聽(tīng)*/
startNext = (Button)findViewById(R.id.startNext);
startNext.setOnClickListener(this);
firstPage = (ListView)findViewById(R.id.firstPage);
secondPage = (ListView)findViewById(R.id.secondPage);
ArrayAdapter<String> firstAdapter = new ArrayAdapter<String>
(this, android.R.layout.simple_list_item_1,firstItem);
ArrayAdapter<String> secondAdapter = new ArrayAdapter<String>
(this, android.R.layout.simple_list_item_1, secondItem);
firstPage.setAdapter(firstAdapter);
secondPage.setAdapter(secondAdapter);
}
@Override
public void onClick(View v) {
changePage();
}
//實(shí)現(xiàn)列表頁(yè)面切換
private void changePage() {
final ListView visiable ;
final ListView invisiable ;
if(firstPage.getVisibility() == View.GONE){
visiable = secondPage ;
invisiable = firstPage ;
}else{
visiable = firstPage ;
invisiable = secondPage ;
}
//這個(gè)地方大家可能看到了ObjectAnimator這個(gè)類(lèi),一開(kāi)始我也不知道是什么東西,很簡(jiǎn)單,查官方文檔,官方文檔中的解釋一堆英文,我//一直說(shuō)的,我英文爛的要死,但不怕,只要你想,就肯定可以查出來(lái)的,大家 只看一句:該類(lèi)是 ValueAnimator的子類(lèi),可以根據(jù)給定//的屬性名稱(chēng)給目標(biāo)對(duì)象設(shè)置動(dòng)畫(huà)參數(shù)
//效果一(此處效果順序與效果圖一一對(duì)應(yīng))
//final ObjectAnimator invisToVis = ObjectAnimator.ofFloat(invisiable, "rotationX",-90f, 0f);
ObjectAnimator visToInvis = ObjectAnimator.ofFloat(visiable, "rotationX", 0f, 90f);
//效果二
final ObjectAnimator invisToVis = ObjectAnimator.ofFloat(invisiable, "rotationY",-90f, 0f);
ObjectAnimator visToInvis = ObjectAnimator.ofFloat(visiable, "rotationY", 0f, 90f);
//效果三(這個(gè)地方的alpha屬性值大家只記一點(diǎn):值越大越不透明就可以了?。。?
//final ObjectAnimator invisToVis = ObjectAnimator.ofFloat(invisiable, "alpha", 0.0f, 1.0f );
//ObjectAnimator visToInvis = ObjectAnimator.ofFloat(visiable, "alpha", 1.0f, 0.0f );
//效果四(此于是我犯的一個(gè)錯(cuò)誤,很天真的以為應(yīng)該也有rotationZ屬性名稱(chēng),其實(shí)是錯(cuò)的,在ofFloat參數(shù)中并無(wú)此屬性名稱(chēng),但大家還//是可以看到列表正常,其實(shí)顯示 效果很不正常了因?yàn)楹笈_(tái)已經(jīng)報(bào)錯(cuò),但應(yīng)用仍然不會(huì)停止 ,照常運(yùn)行,但效果僅僅是兩個(gè)ListView直接//替換,并無(wú)任何動(dòng)畫(huà)添加到其中,這個(gè)地方大家注意下): ObjectAnimator.ofFloat(invisiable, "rotationZ",-90f, 0f);
visToInvis.setDuration(500);
visToInvis.setInterpolator(accelerator);
invisToVis.setDuration(500);
invisToVis.setInterpolator(decelerator);
//這個(gè)地方記錄下,下面這個(gè)監(jiān)聽(tīng)器小馬第一次見(jiàn)到,查閱官方文檔解釋如下:此監(jiān)聽(tīng)來(lái)監(jiān)聽(tīng)動(dòng)畫(huà)的生命周期如:開(kāi)始、結(jié)束、正在播放、循//環(huán)播放等 ,此處切記: Animation是不可以監(jiān)聽(tīng)動(dòng)畫(huà)的,它只負(fù)責(zé)動(dòng)畫(huà)的
visToInvis.addListener(new AnimatorListenerAdapter() {
@Override
public void onAnimationEnd(Animator anim) {
/*
* 列舉幾個(gè)動(dòng)畫(huà)的監(jiān)聽(tīng):
* 一:anim.isRunning(){//TODO}
* 二:anim.isStarted(){//TODO}
* 三:anim.end(){//TODO}
*/
visiable.setVisibility(View.GONE);
invisToVis.start();
invisiable.setVisibility(View.VISIBLE);
}
});
visToInvis.start();
}
}
最后,再說(shuō)下,文章標(biāo)題中說(shuō)是分頁(yè)動(dòng)畫(huà),其實(shí)這些動(dòng)畫(huà)并不僅僅局限于分頁(yè)上面的,如果大家把插值器、動(dòng)畫(huà)用靈活一點(diǎn)的話(huà), 也可以做出很個(gè)性的帶有很多動(dòng)畫(huà)的應(yīng)用的,再加上Activity之間的動(dòng)畫(huà)與以上這些結(jié)合的話(huà)就更完美了,Activity之間的動(dòng)畫(huà)大家可以參照我之前寫(xiě)的這篇文章(連接如下),希望對(duì)大家有所幫助。
相關(guān)文章
解決Android應(yīng)用冷啟動(dòng)時(shí)出現(xiàn)的白屏問(wèn)題的方法
本篇文章主要介紹了解決Android應(yīng)用冷啟動(dòng)時(shí)出現(xiàn)的白屏問(wèn)題的方法,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-08-08
Android之有效防止按鈕多次重復(fù)點(diǎn)擊的方法(必看篇)
下面小編就為大家?guī)?lái)一篇Android之有效防止按鈕多次重復(fù)點(diǎn)擊的方法(必看篇)。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-04-04
Andriod arcgis保存Mapview為圖片的實(shí)例代碼
這篇文章主要介紹了Andriod arcgis保存Mapview為圖片的實(shí)例代碼 的相關(guān)資料,需要的朋友可以參考下2016-03-03
Android編程中光線(xiàn)傳感器的調(diào)用方法詳解
這篇文章主要介紹了Android編程中光線(xiàn)傳感器的調(diào)用方法,結(jié)合實(shí)例形式分析了Android光線(xiàn)傳感器的調(diào)用方法、函數(shù)、屬性相關(guān)使用技巧,需要的朋友可以參考下2017-08-08
Android原生側(cè)滑控件DrawerLayout使用方法詳解
這篇文章主要為大家詳細(xì)介紹了Android原生側(cè)滑控件DrawerLayout的使用方法,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-12-12
Android Compose實(shí)現(xiàn)聯(lián)系人列表流程
聲明式UI,更簡(jiǎn)單的自定義,實(shí)時(shí)帶交互的預(yù)覽功能Compose并不是類(lèi)似于Recyclerview的高級(jí)控件,而是直接拋棄了View,ViewGroup那套東西,從上到下魯了一套全新的框架,直白點(diǎn)說(shuō)就是它的渲染機(jī)制,布局機(jī)制,觸摸算法,以及UI具體寫(xiě)法全都是新的2023-03-03
自定義View系列之kotlin繪制手勢(shì)設(shè)置溫度控件的方法
這篇文章主要給大家介紹了關(guān)于自定義View系列之kotlin繪制手勢(shì)設(shè)置溫度控件的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2018-07-07

