首页 >Android频道 >【Android研究院之应用开发】 > Android研究院之模仿iPhone列表数据View刷新动画详解(十九)
2012
06-04

Android研究院之模仿iPhone列表数据View刷新动画详解(十九)

                 因为我本人很喜欢在不同的页面之间跳转时加点好玩的动画,今天无意间看到一个动画效果感觉不错,几种效果图如下:既然好玩就写在博客中,直接说就是:该效果类似于iPhone中View的切换动画效果,今天就只介绍上面展示的效果,如果大家要看到更多更好玩的Activity之间切换的效果的话,可以看下小马这篇文章:http://mzh3344258.blog.51cto.com/1823534/807337涉及到插值器与多种动画效果的实现,看完会对Activity之间的动画有个更全的认识,文中不足之处,大家批评指出,共同改进,先谢谢啦,废话不多说,先上效果,再看代码!!

  1. 效果一:
    Android研究院之模仿iPhone列表数据View刷新动画详解(十九) - 雨松MOMO程序研究院 - 1
  2. 效果二:
    Android研究院之模仿iPhone列表数据View刷新动画详解(十九) - 雨松MOMO程序研究院 - 2
  3.  效果三:
    Android研究院之模仿iPhone列表数据View刷新动画详解(十九) - 雨松MOMO程序研究院 - 3
  4. 效果四:(小马犯错的效果):
    Android研究院之模仿iPhone列表数据View刷新动画详解(十九) - 雨松MOMO程序研究院 - 4
  5. 效果五(回旋效果一):
    Android研究院之模仿iPhone列表数据View刷新动画详解(十九) - 雨松MOMO程序研究院 - 5
  6. 效果六(回旋效果二):

Android研究院之模仿iPhone列表数据View刷新动画详解(十九) - 雨松MOMO程序研究院 - 6

            效果看完了,就来看下上面效果实现的具体代码吧, 中间小马会把我自己试验的、犯的错误都以注释的形式写下来的, 大家使用的时候别出错就行了!先来看下使用的布局文件,很简单的布局:

<?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>

 

 下面再来看下实现以上效果的具体代码,代码中所标的顺序与上面显示的效果图一致:

 

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: 小马学习模仿iPhone列表分页旋转刷新
* @author XiaoMa
*/

public class BetweenAnimationActivity extends Activity implements OnClickListener {

	/**资源声明*/
	private Button startNext = null ;
	private ListView firstPage = null ;
	private ListView secondPage = null ;

	/**列表项声明*/
	private static final String firstItem[] =
		{"海阔人生","光辉岁月","无尽空虚","真的爱你","岁月无声","灰色轨迹","再见理想"};

	private static final String secondItem[] =
		{"洗唰唰","爱啦啦","喜欢你","娃哈哈","小马果","大坏蛋","冷雨夜"};

	/**列表页面切换动画插值器声明一*/
	private Interpolator accelerator = new AccelerateInterpolator();
    private Interpolator decelerator = new DecelerateInterpolator();

    /**动画插值器二:效果五与效果六都为以下插值器*/
    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);

        /**
         * 这个地方写下,大家尽量不要在onCreate方法中写太多的操作,
         * 如果涉及到很多配置问题时有些属性设置必须在onCreate()方法中
         * 写,比如:全屏、横竖屏必须在setContentView()前面写,
         * 如果在onCreate()方法中写太多东西的,一句话:太乱!!
         * */

        init();
    }

	/**
	 * 初始化实现
	 */
	private void init(){

		/**资源定位,添加监听*/
		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();
	}

	 //实现列表页面切换

	private void changePage() {

		final ListView visiable  ;
		final ListView invisiable ;

		if(firstPage.getVisibility() == View.GONE){
			visiable = secondPage ;
			invisiable = firstPage ;
		}else{
			visiable = firstPage ;
			invisiable = secondPage ;
		}

//这个地方大家可能看到了ObjectAnimator这个类,一开始我也不知道是什么东西,很简单,查官方文档,官方文档中的解释一堆英文,我//一直说的,我英文烂的要死,但不怕,只要你想,就肯定可以查出来的,大家 只看一句:该类是 ValueAnimator的子类,可以根据给定//的属性名称给目标对象设置动画参数

	//效果一(此处效果顺序与效果图一一对应)
	//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);

	//效果三(这个地方的alpha属性值大家只记一点:值越大越不透明就可以了!!!)
        //final ObjectAnimator invisToVis = ObjectAnimator.ofFloat(invisiable, "alpha", 0.0f, 1.0f );
	//ObjectAnimator visToInvis = ObjectAnimator.ofFloat(visiable, "alpha", 1.0f, 0.0f );

//效果四(此于是我犯的一个错误,很天真的以为应该也有rotationZ属性名称,其实是错的,在ofFloat参数中并无此属性名称,但大家还//是可以看到列表正常,其实显示 效果很不正常了因为后台已经报错,但应用仍然不会停止 ,照常运行,但效果仅仅是两个ListView直接//替换,并无任何动画添加到其中,这个地方大家注意下): ObjectAnimator.ofFloat(invisiable, "rotationZ",-90f, 0f);

	        visToInvis.setDuration(500);
	        visToInvis.setInterpolator(accelerator);
	        invisToVis.setDuration(500);
	        invisToVis.setInterpolator(decelerator);

//这个地方记录下,下面这个监听器小马第一次见到,查阅官方文档解释如下:此监听来监听动画的生命周期如:开始、结束、正在播放、循//环播放等 ,此处切记: Animation是不可以监听动画的,它只负责动画的
	        visToInvis.addListener(new AnimatorListenerAdapter() {
	            @Override
	            public void onAnimationEnd(Animator anim) {

	            	/*
	            	 * 列举几个动画的监听:
	            	 * 一:anim.isRunning(){//TODO}
	            	 * 二:anim.isStarted(){//TODO}
	            	 * 三:anim.end(){//TODO}
	            	 */

	            	visiable.setVisibility(View.GONE);
	                invisToVis.start();
	                invisiable.setVisibility(View.VISIBLE);
	            }
	        });
	        visToInvis.start();
	}

}

 

            最后,小马在这些说下,文章标题中说是分页动画,其实这些动画并不仅仅局限于分页上面的,如果大家把插值器、动画用灵活一点的话, 也可以做出很个性的带有很多动画的应用的,再加上Activity之间的动画与以上这些结合的话就更完美了,Activity之间的动画大家可以参照我之前写的这篇文章(连接如下),希望对大家有所帮助,加油,努力就有收获 ,如若文章中有错误或不足,诚请大家批评指出,小马一定及时改正!谢谢…O_O   http://mzh3344258.blog.51cto.com/1823534/807337


 

最后编辑:
作者:雨松MOMO
专注移动互联网,Unity3D游戏开发
捐 赠写博客不易,如果您想请我喝一杯星巴克的话?就进来看吧!

Android研究院之模仿iPhone列表数据View刷新动画详解(十九)》有 14 条评论

  1. 呵呵 。。。名字好好玩呐! 加油加油,认真对待每一天,一起努力 !!!

  2. 吼吼,小马先谢过了….再次感谢!!

  3. 楼主的东西真好,很多我都是第一次看到,得向你多学习了!

  4. 董福海说:

    你这些东西API Demo里面都有

  5. 不错,这种好文章不多,博主辛苦了。

  6. dinophp说:

    前来学习。童鞋讲讲ListView优化的东西呗

  7. ZXGoto说:

    支持一下小马同学 [good]

留下一个回复

你的email不会被公开。 必填项已用 * 标注。