滑动菜单栏SlidingMenu动画效果的实现

      通过上一篇文章的学习，相信你们对开源项目SlidingMenu的用法已经有了一个很是深刻的了解，那么这一章博

主就来教你们滑动菜单栏滑动时动画效果的实现。博主这里用了三个不一样动画效果的基础示例来教你们如何去实现，

等 你们 弄懂了以后彻底能够作到触类旁通，去实现更多不一样的动画效果，让你的应用软件给用户带来眼前一亮的效

果。

1、SlidingMenu动画效果示例一

一、示例一效果图

 

       该示例实现了滑动时缩放的效果，看左边的效果图能够明显的感受到，滑动菜单栏刚刚打开时的图片比右边的效

果图 滑动菜单栏打开一大半的图片要小。这里用到的是比例缩放的动画效果。

           

二、示例一项目结构图

 

三、示例一代码讲解

 

关于项目中资源文件的部分我就不详细讲解了，在上篇文章中已经详细的介绍过了，这地方我就着重的讲解一下MainActivity类，也是主程序入口类，滑动菜单栏和滑动的效果都是在此类中实现。

package com.example.myslidingmenudemo08; import android.graphics.Canvas; import android.os.Bundle; import android.view.MenuItem; import com.jeremyfeinstein.slidingmenu.lib.SlidingMenu; import com.jeremyfeinstein.slidingmenu.lib.SlidingMenu.CanvasTransformer; import com.jeremyfeinstein.slidingmenu.lib.app.SlidingFragmentActivity; public class MainActivity extends SlidingFragmentActivity {  private CanvasTransformer mTransformer;  @Override  public void onCreate(Bundle savedInstanceState) {   super.onCreate(savedInstanceState);   setTitle("Zoom");      initAnimation();      initSlidingMenu();      getActionBar().setDisplayHomeAsUpEnabled(true);  }  /**   * 初始化滑动菜单   */  private void initSlidingMenu(){   // 设置主界面视图   setContentView(R.layout.content_frame);   getSupportFragmentManager().beginTransaction().replace(R.id.content_frame, new SampleListFragment()).commit();        // 设置滑动菜单视图   setBehindContentView(R.layout.menu_frame);   getSupportFragmentManager().beginTransaction().replace(R.id.menu_frame, new SampleListFragment()).commit();   // 设置滑动菜单的属性值   SlidingMenu sm = getSlidingMenu();   sm.setShadowWidthRes(R.dimen.shadow_width);   sm.setShadowDrawable(R.drawable.shadow);   sm.setBehindOffsetRes(R.dimen.slidingmenu_offset);   sm.setFadeDegree(0.35f);   sm.setTouchModeAbove(SlidingMenu.TOUCHMODE_FULLSCREEN);   sm.setBehindScrollScale(0.0f);   sm.setBehindCanvasTransformer(mTransformer);      setSlidingActionBarEnabled(true);  }  /**   * 初始化动画效果   */  private void initAnimation(){   mTransformer = new CanvasTransformer(){    @Override    public void transformCanvas(Canvas canvas, float percentOpen) {     float scale = (float) (percentOpen*0.25 + 0.75);     canvas.scale(scale, scale, canvas.getWidth()/2, canvas.getHeight()/2);    }       };  }    @Override  public boolean onOptionsItemSelected(MenuItem item) {   switch (item.getItemId()) {   case android.R.id.home:    toggle();    return true;   }   return super.onOptionsItemSelected(item);  }   }

你们能够先看一遍上面的这段代码，要想实现动画效果主要有三个步骤：

<1> 先定义一个CanvasTransformer接口对象，这个接口是在slidingmenu_library类库中封装好的，因此要想运行此项目还要导入slidingmenu_library类库，这个导入的方法已经在前面详细的介绍过了，不清楚的同窗能够参考：

【Android UI设计与开发】第16期：滑动菜单栏（一）开源项目SlidingMenu的使用

private CanvasTransformer mTransformer;

<2> 而后再实例化此接口，重写接口中的方法：

mTransformer = new CanvasTransformer(){    @Override    public void transformCanvas(Canvas canvas, float percentOpen) {     float scale = (float) (percentOpen*0.25 + 0.75);     canvas.scale(scale, scale, canvas.getWidth()/2, canvas.getHeight()/2);    }       };

咱们能够看到在transformCanvas(Canvas canvas, float percentOpen)方法中，有两个参数：

① Canvas canvas：画布类；

② float percentOpen：滑动菜单栏打开时的百分比值。

<3> 最后在把实例化的接口对象赋给SlidingMenu类中的setBehindCanvasTransformer()方法：

sm.setBehindCanvasTransformer(mTransformer);

这样，一个滑动菜单栏打开时的动画效果就配置好了，怎么样？仍是很简单的吧。

2、SlidingMenu动画效果示例二

 

一、 示例二效果图

该示例主要实现了当滑动菜单栏打开时滑动伸缩的效果，你们经过两站效果图的对比能够很清楚的看到。

                  

二、 示例二项目结构图

 

      你们能够拿此图跟示例一的项目结构图作对比，会发现几乎都是如出一辙的，不同的只是MainActivity类中动画

的实现代码不同，仅此而已。

 

三、 示例二项目代码

 

MainActivity.java：

package com.yangyu.myslidingmenudemo09; import android.graphics.Canvas; import android.os.Bundle; import android.view.MenuItem; import com.jeremyfeinstein.slidingmenu.lib.SlidingMenu; import com.jeremyfeinstein.slidingmenu.lib.SlidingMenu.CanvasTransformer; import com.jeremyfeinstein.slidingmenu.lib.app.SlidingFragmentActivity; public class MainActivity extends SlidingFragmentActivity {  private CanvasTransformer mTransformer;  @Override  public void onCreate(Bundle savedInstanceState) {   super.onCreate(savedInstanceState);   setTitle("Scale");      initAnimation();      initSlidingMenu();      getActionBar().setDisplayHomeAsUpEnabled(true);  }  /**   * 初始化滑动菜单   */  private void initSlidingMenu(){   // 设置主界面视图   setContentView(R.layout.content_frame);   getSupportFragmentManager().beginTransaction().replace(R.id.content_frame, new SampleListFragment()).commit();        // 设置滑动菜单视图   setBehindContentView(R.layout.menu_frame);   getSupportFragmentManager().beginTransaction().replace(R.id.menu_frame, new SampleListFragment()).commit();   // 设置滑动菜单的属性值   SlidingMenu sm = getSlidingMenu();   sm.setShadowWidthRes(R.dimen.shadow_width);   sm.setShadowDrawable(R.drawable.shadow);   sm.setBehindOffsetRes(R.dimen.slidingmenu_offset);   sm.setFadeDegree(0.35f);   sm.setTouchModeAbove(SlidingMenu.TOUCHMODE_FULLSCREEN);   sm.setBehindScrollScale(0.0f);   sm.setBehindCanvasTransformer(mTransformer);      setSlidingActionBarEnabled(true);  }  /**   * 初始化动画效果   */  private void initAnimation(){   mTransformer = new CanvasTransformer(){    @Override    public void transformCanvas(Canvas canvas, float percentOpen) {     canvas.scale(percentOpen, 1, 0, 0);    }       };  }    @Override  public boolean onOptionsItemSelected(MenuItem item) {   switch (item.getItemId()) {   case android.R.id.home:    toggle();    return true;   }   return super.onOptionsItemSelected(item);  }   }

      

          细心的读者会发现，整段代码中跟示例一的代码比起来，只是initAnimation()方法中的代码改变了一点点，正是

因 为改变这一点点的代码，就能够实现了滑动伸缩的动画效果。 

3、SlidingMenu动画效果示例三

 

一、示例三效果图

        该示例效果实现了当滑动菜单栏刚刚打开时，滑动菜单栏的视图内容从下方渐渐的往上移动，等滑动菜单栏彻底

打开时，该视图就会移动到最顶端。你们对比两张效果图就能够很清楚的看到此效果了。 

      

 

二、示例三项目结构图

 

三、示例三项目代码

 

MainActivity.java：

package com.yangyu.myslidingmenudemo10; import android.graphics.Canvas; import android.os.Bundle; import android.view.MenuItem; import android.view.animation.Interpolator; import com.jeremyfeinstein.slidingmenu.lib.SlidingMenu; import com.jeremyfeinstein.slidingmenu.lib.SlidingMenu.CanvasTransformer; import com.jeremyfeinstein.slidingmenu.lib.app.SlidingFragmentActivity; public class MainActivity extends SlidingFragmentActivity {  private CanvasTransformer mTransformer;     @Override  public void onCreate(Bundle savedInstanceState) {   super.onCreate(savedInstanceState);   setTitle("Slide Up");      initAnimation();      initSlidingMenu();      getActionBar().setDisplayHomeAsUpEnabled(true);  }  /**   * 初始化滑动菜单   */  private void initSlidingMenu(){   // 设置主界面视图   setContentView(R.layout.content_frame);   getSupportFragmentManager().beginTransaction().replace(R.id.content_frame, new SampleListFragment()).commit();        // 设置滑动菜单视图   setBehindContentView(R.layout.menu_frame);   getSupportFragmentManager().beginTransaction().replace(R.id.menu_frame, new SampleListFragment()).commit();   // 设置滑动菜单的属性值   SlidingMenu sm = getSlidingMenu();   sm.setShadowWidthRes(R.dimen.shadow_width);   sm.setShadowDrawable(R.drawable.shadow);   sm.setBehindOffsetRes(R.dimen.slidingmenu_offset);   sm.setFadeDegree(0.35f);   sm.setTouchModeAbove(SlidingMenu.TOUCHMODE_FULLSCREEN);   sm.setBehindScrollScale(0.0f);   sm.setBehindCanvasTransformer(mTransformer);      setSlidingActionBarEnabled(true);  }  private static Interpolator interp = new Interpolator() {   @Override   public float getInterpolation(float t) {    t -= 1.0f;    return t * t * t + 1.0f;   }  };    /**   * 初始化动画效果   */  private void initAnimation(){   mTransformer = new CanvasTransformer(){    @Override    public void transformCanvas(Canvas canvas, float percentOpen) {     canvas.translate(0, canvas.getHeight() * (1 - interp.getInterpolation(percentOpen)));    }   };  }    @Override  public boolean onOptionsItemSelected(MenuItem item) {   switch (item.getItemId()) {   case android.R.id.home:    toggle();    return true;   }   return super.onOptionsItemSelected(item);  }   }

在这段代码中，咱们将会使用到一个动画插入器 Interpolator接口 ，这个接口是干嘛用的呢？

答：在Android的动画效果实现中，咱们使用Interpolator来控制动画的进度。Interpolator 定义了动画的变化速度，能够实现匀速、正加速、负加速、无规则变加速等。因此要想实现缓慢往上移动的效果就要使用到此它，而且重写此接口中的getInterpolation(float t)方法。

 

       好的，关于开源项目SlidingMenu最基础的使用方法差很少讲解到这里就要结束

了， 你们会发现这个 开源项目 直接拿过来仍是很是好用的，里面的各类方法都已经被封

装的 很是好了。关于后面的滑动菜单栏专题，博主仍是会从实战出发，模仿几个当前非

常优 秀的应用软件的滑动菜单栏的效果，如唱吧、网易新闻、印象笔记等等。但愿你们

能继 续关注！