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

经过上一篇文章的学习,相信大家对开源项目SlidingMenu的用法已经有了一个非常深入的了解,那么这一章博

主就来教大家滑动菜单栏滑动时动画效果的实现。博主这里用了三个不同动画效果的基础示例来教大家如何去实现,

等 大家 弄懂了之后完全可以做到举一反三,去实现更多不同的动画效果,让你的应用软件给用户带来眼前一亮的效

果。

一、SlidingMenu动画效果示例一

1、示例一效果图

该示例实现了滑动时缩放的效果,看左边的效果图可以明显的感觉到,滑动菜单栏刚刚打开时的图片比右边的效

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

           

2、示例一项目结构图

3、示例一代码讲解

关于项目中资源文件的部分我就不详细讲解了,在上篇文章中已经详细的介绍过了,这地方我就着重的讲解一下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);

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

二、SlidingMenu动画效果示例二

1、 示例二效果图

该示例主要实现了当滑动菜单栏打开时滑动伸缩的效果,大家通过两站效果图的对比可以很清楚的看到。

                  

2、 示例二项目结构图

大家可以拿此图跟示例一的项目结构图做对比,会发现几乎都是一模一样的,不一样的只是MainActivity类中动画

的实现代码不一样,仅此而已。

3、 示例二项目代码

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()方法中的代码改变了一点点,正是

因 为改变这一点点的代码,就可以实现了滑动伸缩的动画效果。

三、SlidingMenu动画效果示例三

1、示例三效果图

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

打开时,该视图就会移动到最顶端。大家对比两张效果图就可以很清楚的看到此效果了。 

      

2、示例三项目结构图

3、示例三项目代码

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最基础的使用方法差不多讲解到这里就要结束

了, 大家会发现这个 开源项目 直接拿过来还是非常好用的,里面的各种方法都已经被封

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

常优 秀的应用软件的滑动菜单栏的效果,如唱吧、网易新闻、印象笔记等等。希望大家

能继 续关注!

时间: 2024-10-07 19:45:35

滑动菜单栏SlidingMenu动画效果的实现的相关文章

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

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

Android--ViewPager多页面滑动切换以及动画效果

背景                                                                                           ViewPager.它是google SDk中自带的一个附加包的一个类,可以用来实现屏幕间的切换.这个附加包是android-support-v4.jar. 根据屏幕的分辨率和图片的宽度计算动画移动的偏移量 代码                                                   

【Android UI设计与开发】10:滑动菜单栏(二)SlidingMenu 动画效果的实现

其实就是在显示菜单栏时,有个动画的效果.代码比较简单,下面进行说明. 1.效果图如下,手机上查看效果更佳 2.代码实现,这里只讲解动画效果的实现,具体代码可在源代码中查看 <1> 先定义一个CanvasTransformer接口对象,这个接口是在slidingmenu_library类库中封装好的 private CanvasTransformer mTransformer; <2> 然后再实例化此接口,重写接口中的方法,例如示例1中的方法: /** * transformCanv

cell 滑动实现旋转动画效果

效果图(真机效果好一点.毕竟 gif) tableView角度旋转动画.gif -(void)tableView:(UITableView *)tableView willDisplayCell:(UITableViewCell *)cell forRowAtIndexPath:(NSIndexPath *)indexPath {CATransform3D rotation; rotation = CATransform3DMakeRotation( (90.0*M_PI)/180, 0.0, 

使用ViewPager多页面滑动切换以及动画效果

https://github.com/eltld/Viewpager

windows phone水平滑动翻页动画效果

XAM部分: <phone:PhoneApplicationPage.Resources> <Storyboard x:Name="Init" > <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)" Storyboard.TargetName="

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

转载请注明出处:http://blog.csdn.net/yangyu20121224/article/details/9255829   由于最近的工作确实比较忙的原因,所以这个系列的教程有一段时间没有更新了,也请各位读者见谅.这期博主要给大家带来的是关于滑动菜单栏的实现效果. 一.SlidingMenu简介 相信大家对SlidingMenu都不陌生了,它是一种比较新的设置界面或配置界面的效果,在主界面左滑或者右滑出现设置界面效果,能方便的进行各种操作.很多优秀的应用都采用了这种界面方案,像f

带动画效果的抽屉菜单栏

带动画效果的抽屉菜单栏 带动画效果的抽屉菜单栏,将android L 中drawer-indicator/back-arrow移植到低版本Android系统中. 下载地址:http://www.devstore.cn/code/info/960.html 运行截图:

【Android UI设计与开发】9:滑动菜单栏(一)开源项目SlidingMenu的使用和示例

一.SlidingMenu简介 相信大家对SlidingMenu都不陌生了,它是一种比较新的设置界面或配置界面的效果,在主界面左滑或者右滑出现设置界面效果,能方便的进行各种操作.很多优秀的应用都采用了这种界面方案,像facebook.人人网.everynote.Google+等等.如下图所示: 因为效果确实比较新颖,所以在很多的应用开发中去实现此效果,解决的办法也是不尽相同.诸多比较以后发 现,还是GitHub上的开源项目SlidingMenu提供了最佳的实现:定制灵活.各种阴影和渐变以及动画的