仿360卫士首页以及实现帧动画 -

在下个路口

浏览: 111164 次
性别:

最近访客更多访客>>

yoke_snowwolf

linshizhanghaoninee

Cantonese

techdo

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

仿360卫士首页以及实现帧动画

博客分类：

Android

android 帧动画仿360卫士首页 animation—list

先上效果图，这样才能知道是不是你想要的效果！
这是仿360卫士首页效果图

这是帧动画效果图：

接着上代码：
实现360首页就只有一个Activity，很方便就可以用到你自己的项目中。

  /**
 * 高仿360首页
 * 
 * @author Administrator
 * 
 */
public class MainActivity extends Activity {
	private ImageView ivOne;
	private ImageView ivTwo;
	private LinearLayout lastOneItem;

	
	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_imitate_main);
		initViews();
	}

	public void initViews(){
		ivOne = (ImageView) findViewById(R.id.iv_one);
		ivTwo = (ImageView) findViewById(R.id.iv_two);
		vpMain = (ViewPager) findViewById(R.id.vp_main);
		views = new ArrayList<View>();
		views.add(View.inflate(this,
				R.layout.activity_imitate_rootblock_main_first, null));
		views.add(View.inflate(this, R.layout.activity_imitate_main_second,
				null));
		lastOneItem=(LinearLayout)views.get(0).findViewById(R.id.last_oneItem);
		lastOneItem.setOnClickListener(new OnClickListener() {
			@Override
			public void onClick(View v) {
				Intent intent=new Intent();
				intent.setClass(MainActivity.this, AnimationTestActivity.class);
				startActivity(intent);
			}
		});
		MyAdapter adapter = new MyAdapter();
		MyListener listener = new MyListener();
		vpMain.setAdapter(adapter);
		vpMain.setOnPageChangeListener(listener);
	}

	public void next(View v) {
		flipit(ivOne, ivTwo);
		vpMain.setCurrentItem((vpMain.getCurrentItem() + 1) % views.size());

	}

	private Interpolator accelerator = new AccelerateInterpolator();
	private Interpolator decelerator = new DecelerateInterpolator();
	private ViewPager vpMain;
	private List<View> views;

	/**
	 * @param one
	 * @param two
	 */
	private void flipit(View one, View two) {
		final View visible;
		final View invisible;
		if (one.getVisibility() == View.GONE) {
			visible = two;
			invisible = one;

		} else {
			invisible = two;
			visible = one;

		}
		ObjectAnimator visToInvis = ObjectAnimator.ofFloat(visible,
				"rotationY", 0f, 90f);
		visToInvis.setDuration(500);
		visToInvis.setInterpolator(accelerator);
		final ObjectAnimator invisToVis = ObjectAnimator.ofFloat(invisible,
				"rotationY", -90f, 0f);
		invisToVis.setDuration(500);
		invisToVis.setInterpolator(decelerator);
		visToInvis.addListener(new AnimatorListenerAdapter() {
			@Override
			public void onAnimationEnd(Animator anim) {
				visible.setVisibility(View.GONE);
				invisToVis.start();
				invisible.setVisibility(View.VISIBLE);
			}
		});
		visToInvis.start();
	}

	class MyAdapter extends PagerAdapter {

		@Override
		public int getCount() {
			return views.size();
		}

		@Override
		public boolean isViewFromObject(View view, Object obj) {
			return view == obj;
		}

		@Override
		public void destroyItem(ViewGroup container, int position, Object object) {
			container.removeView(views.get(position));
		}

		@Override
		public Object instantiateItem(ViewGroup container, int position) {
			container.addView(views.get(position));
			return views.get(position);
		}

	} 

	class MyListener implements OnPageChangeListener {

		@Override
		public void onPageScrollStateChanged(int arg0) {
		}

		@Override
		public void onPageScrolled(int arg0, float arg1, int arg2) {
		}

		@Override
		public void onPageSelected(int arg0) {
			flipit(ivOne, ivTwo);
		}

	}

}

    代码主要分为四个模块，第一initViews()初始界面，在这里面用到了适配器以及pageListener，所以接下来我们应该实现这两个模块。继承PagerAdapter，实现OnPageChangeListener。最后是最重要的一个方法了，flipit（）这个方法实现了界面滑动时候的动画。

   其实在这里主要是想说帧动画是怎么实现的，所以以上的360首页只是轻描淡写的带过了，只是因为正好我把两个实现放在了一个项目中，所以就一起发上来了，同时也得感谢网上相关的资源，这个界面很多都参照了网上，但是具体出处我已经找不到了。

以下就是实现帧动画的具体实现过程。
    android自带的动画有两种，tween和frame，这两者的概念就不介绍了。在这里实现的是frame。其实利用animation-list来实现帧动画是非常简单的。

 <?xml version="1.0" encoding="UTF-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
   android:id="@+id/screen_full"
   android:layout_width="fill_parent"  
   android:layout_height="fill_parent"  
   android:orientation="vertical">  
    <ImageView 
        	android:id="@+id/animationIV"  
            android:layout_width="200dp"  
            android:layout_height="300dp"  
            android:padding="5dp"  
            android:layout_gravity="center_horizontal"
            android:src="@drawable/animation1/>   
  </LinearLayout>

主界面布局很简单，就是一个ImageView，主要是设置src的那一句，animation1是一个动画xml，该布局文件放在drawable目录下，其具体内容如下：

<?xml version="1.0" encoding="UTF-8"?>
<animation-list  
  xmlns:android="http://schemas.android.com/apk/res/android"
  android:oneshot="false"> 
    <item android:drawable="@drawable/icon1" android:duration="150"></item>  
    <item android:drawable="@drawable/icon2" android:duration="150"></item>  
    <item android:drawable="@drawable/icon3" android:duration="150"></item>  
    <item android:drawable="@drawable/icon4" android:duration="150"></item>  
    <item android:drawable="@drawable/icon5" android:duration="150"></item>  
    <item android:drawable="@drawable/icon6" android:duration="150"></item>  
    <item android:drawable="@drawable/icon7" android:duration="150"></item>  
    <item android:drawable="@drawable/icon8" android:duration="150"></item>  
</animation-list>

根标签为animation-list，其中oneshot为true代表着只展示一遍，设置为false会不停的循环播放动画 ,不写默认false
    根标签下，通过item标签对动画中的每一个图片进行声明
    android:duration 表示展示所用的该图片的时间长度
之后就是在Activity中设置了：
   关联好主界面后，得到屏幕宽度

requestWindowFeature(Window.FEATURE_NO_TITLE); 
WindowManager wm=(WindowManager) this.getSystemService(WINDOW_SERVICE); 
screenWidth=wm.getDefaultDisplay().getWidth();

给全屏设置监听：

fullScreen=(LinearLayout) findViewById(R.id.screen_full);
fullScreen.setOnTouchListener(touchListener);

触摸事件的具体实现：

OnTouchListener touchListener=new OnTouchListener() {
		@Override
		public boolean onTouch(View v, MotionEvent event) {
			if(event.getAction()==MotionEvent.ACTION_DOWN){
				float x=event.getX();
				if(x>screenWidth/2){
					animationIV.setImageResource(R.drawable.animation1);  
	                animationDrawable = (AnimationDrawable) animationIV.getDrawable();  
	                animationDrawable.start(); 
				}else{
					 animationIV.setImageResource(R.drawable.animation2);  
		             animationDrawable = (AnimationDrawable) animationIV.getDrawable();  
		             animationDrawable.start();  
				}
			}
			if(event.getAction()==MotionEvent.ACTION_UP){
				animationDrawable = (AnimationDrawable) animationIV.getDrawable();  
                animationDrawable.stop();  
			}
			return true;
		}
	};

当用户触摸屏幕的时候，启动帧动画，

animationIV.setImageResource(R.drawable.animation1);  
animationDrawable = (AnimationDrawable) 
animationIV.getDrawable();  
animationDrawable.start();

        这里我是判断触摸的位置，当触摸在屏幕右侧，即触摸点>屏幕宽度/2时，启动向前走的动画，触摸屏幕左侧，触摸点<屏幕宽度/2时，启动向后退的动画。其中后退动画animation2跟animation1一样，同为存放在drawable目录下，只不过把item倒着写了一遍，从icon8到icon1。当手指离开屏幕，停止动画。帧动画的停止与结束主要是通过AnimationDrawable对象的start()和stop()方法实现。就这样实现了按屏幕右侧向前走，按屏幕左侧向后退的功能。它的用处很多，在游戏里面实现人物的行走动画就是通过这种方式的，稍加改进做四个方向的判断，就可以实现游戏人物的移动动画了，每个方向原理都是一样的！
    下面是帧动画的素材图片