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

http://tech.ddvip.com/2013-07/1374012929199169.html

经过上一篇文章的学习，相信大家对开源项目SlidingMenu的用法已经有了一个非常深入的了解，那么这一章博主就来教大家滑动菜单栏滑动时动画效果的实现。博主这里用了三个不同动画效果的基础示例来教大家如何去实现，等大家弄懂了之后完全可以做到举一反三，去实现更多不同的动画效果，让你的应用软件给用户带来眼前一亮的效果。

一、SlidingMenu动画效果示例一

1、示例一效果图

      该示例实现了滑动时缩放的效果，看左边的效果图可以明显的感觉到，滑动菜单栏刚刚打开时的图片比右边的效果图滑动菜单栏打开一大半的图片要小。这里用到的是比例缩放的动画效果。

         

2、示例一项目结构图

3、示例一代码讲解

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

双击代码全选

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76

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> 然后再实例化此接口，重写接口中的方法：

双击代码全选

1 2 3 4 5 6 7 8

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);  

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

二、SlidingMenu动画效果示例二