引导界面微场景交互设计与技术实现V2.0

        Android项目中使用微场景进行交互有时不一定非的全屏，我们可以把微场景和动画效果结合，从而使的交互体验既有微场景体验又有动画体验，这么做能同时照顾到喜欢微场景交互和喜欢动画交互的用户。是一个微场景交互和动画交互的一种折衷设计！

交互效果：前段效果--->中段效果-->后段效果

技术实现：

 一、微场景的技术实现在上一篇博文中已经详细介绍过，本篇中微场景的实现部分补充如下：

   1、播放微场景视频的控件VideoView的高度设计成手机屏幕宽度的3/4，位置设计为居于屏幕中央。

         //获取VideoView控件

         mPagerVV =(VideoView) findViewById(R.id.vv_plager);

         //获取设备屏幕的宽度

         DisplayMetrics dm = newDisplayMetrics();

         getWindowManager().getDefaultDisplay().getMetrics(dm);

         intscreenWidth = dm.widthPixels;

         //计算VideoView的高度为手机屏幕宽度的3/4

         intvideoViewHeight = (int) (screenWidth *(1.0f * 3 / 4));

   

        RelativeLayout.LayoutParams layoutParams = new RelativeLayout.LayoutParams(LayoutParams.MATCH_PARENT,LayoutParams.MATCH_PARENT);

       //控制VideoView的高度为手机屏幕宽度的3/4

       layoutParams.height =videoViewHeight;

       //控制VideoView的位置为居于屏幕中央

       layoutParams.addRule(RelativeLayout.CENTER_IN_PARENT);

       mPagerVV.setLayoutParams(layoutParams);

    2、对微场景视频播放完成状态进行监听（原因是视频播放完成后要执行关闭动画，换句话说关闭动画执行时机是视频正好播放完成）

 

      mPagerVV.setOnCompletionListener(newOnCompletionListener() {

 

      @Override

      publicvoidonCompletion(MediaPlayer mp) {

      // 该方法会在视频播放完成后回调，在这里执行关闭动画  

      }

    });

 二、动画效果实现

        动画有打开动画和关闭动画，分别作用在上半个界面和下半个界面，并且各自移动的距离为微场景VideoView控件的高的1/2,动画播放时长为3秒。因为动画移动的高是动态获取的，所以这里实现动画是通过代码动态的方式实现，而不使用的静态XML的实现方式。

认识Animation类：

        Animation是Android中代表动画的类，本身只是一个abstract抽象类，通常我们使用它的子类来控制View执行一个位移动画、缩放动画、透明度动画或旋转动画，同时我们也可以设置动画播放的时长、播放的加速度或监听动画播放是否已开始、重复或完成。

认识TranslateAnimation类：

      是Animation动画类的一个子类，代表位移动画类。创建时需要指定动画开始点和结束点偏移量。

 

   常用构造函数如下：

   publicTranslateAnimation(floatfromXDelta, floattoXDelta, floatfromYDelta, floattoYDelta)

   参数说明：fromXDelta(从X轴什么位置)，toXDelta(移动到X轴什么位置)

                     fromYDelta（从Y轴什么位置），toYDelta（移动到Y轴什么位置）

   常用方法如下：(继承于Animation类)

   a)    publicvoid setDuration(longdurationMillis)  设置动画播放时长

   b)    publicvoid setFillAfter(booleanfillAfter)   动画播放完成后，保持当前效果

 

实现步骤：

(1)    创建XML界面（主要是一上一下各显示一张图片）

    <LinearLayout

        android:layout_width="match_parent"

       android:layout_height="match_parent"

       android:orientation="vertical">

       <ImageView

            android:id="@+id/iv_up"

            android:layout_width="match_parent"

            android:layout_height="0dp"

            android:layout_weight="1"

           android:scaleType="centerCrop"

           android:src="@drawable/up"/>

        <ImageView

            android:id="@+id/iv_down"

            android:layout_width="match_parent"

            android:layout_height="0dp"

            android:layout_weight="1"

           android:scaleType="centerCrop"

           android:src="@drawable/down"/>

    </LinearLayout>

（2）在引导界面Activity的onCreate()方法中获取上下图片对应的ImageView控件

  mUpIv = (ImageView)findViewById(R.id.iv_up);

  mDownIv =(ImageView) findViewById(R.id.iv_down);

（3）创建控制mUpIv控件的开与关动画和mDownIv控件的开与关动画

      private AnimationmUpIvOpenAnim;

      privateAnimationmUpIvCloseAnim;

      privateAnimationmDownIvOpenAnim;

      privateAnimationmDownIvCloseAnim;

      //mUpIv控件的开动画

    mUpIvOpenAnim =newTranslateAnimation(0, 0, 0, -videoViewHeight /2);

    mUpIvOpenAnim.setDuration(3000);

    mUpIvOpenAnim.setFillAfter(true);

   //mUpIv控件的关动画

    mUpIvCloseAnim =newTranslateAnimation(0, 0, -videoViewHeight / 2,0);

    mUpIvCloseAnim.setDuration(3000);

    mUpIvCloseAnim.setFillAfter(true);

   //mDownIv控件的开动画

    mDownIvOpenAnim =newTranslateAnimation(0, 0, 0,videoViewHeight /2);

    mDownIvOpenAnim.setDuration(3000);

    mDownIvOpenAnim.setFillAfter(true);

   //mDownIv控件的关动画

    mDownIvCloseAnim =newTranslateAnimation(0, 0, videoViewHeight / 2,0);

    mDownIvCloseAnim.setDuration(3000);

    mDownIvCloseAnim.setFillAfter(true);

（4）播放打开动画

       mUpIv.startAnimation(mUpIvOpenAnim);

       mDownIv.startAnimation(mDownIvOpenAnim);

（5）在监听微场景视频播放完成的回调方法里播放关于动画

     mPagerVV.setOnCompletionListener(newOnCompletionListener() {

      @Override

      publicvoidonCompletion(MediaPlayer mp) {

         mUpIv.startAnimation(mUpIvCloseAnim);

         mDownIv.startAnimation(mDownIvCloseAnim);

      }

    });

（6）如果关闭动画执行完成后想要继续执行某些操作则需要为关闭动画注册动画播放完成监听器。

              在本案例中当关闭动画执行完成后，跳转到主界面，所以需要对关闭动画注册动画播放完成监听器。

       因为本案例中上半界面的关闭动画与下半界面的关闭动画同时开始，同时结束，所以监听哪一个都可以，否则需        要根据实际情况选则对应的动画进行监听。

      下面以监听下半界面关闭动画播放完成为例：

       mDownIvUpAnim.setAnimationListener(new AnimationListener(){

      @Override

      publicvoidonAnimationStart(Animation animation) {

        

       }

     

      @Override

      publicvoidonAnimationRepeat(Animation animation) {

        

      }

      @Override

      publicvoidonAnimationEnd(Animation animation) {

         //关闭动画播放完成后回调此方法，可以在这个方法里执行界面跳转操作

         Intent intent =newIntent(SplashActivity.this, MainActivity.class);

         startActivity(intent);

         finish();

      }

    });