滑動菜單欄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最基礎的使用方法差很少講解到這裏就要結束

了， 你們會發現這個 開源項目 直接拿過來仍是很是好用的，裏面的各類方法都已經被封

裝的 很是好了。關於後面的滑動菜單欄專題，博主仍是會從實戰出發，模仿幾個當前非

常優 秀的應用軟件的滑動菜單欄的效果，如唱吧、網易新聞、印象筆記等等。但願你們

能繼 續關注！