android3.0自带ViewPager动画

原创 2016年05月30日 11:10:02

Create ViewPager transitions: a PagerTransformer example

The ViewPager is a great UI element, providing a smooth swipe animation for switching between pages. But what if a different scrolling effect is required? Fear not, the support library provides a useful solution called the PagerTransformer. It was introduced in revision 11, and is supported from API level 11 (Honeycomb) or greater.

Usage is pretty straightforward, just attach a PageTransformer to the ViewPager:

viewpager.setPageTransformer(false, new ViewPager.PageTransformer() {
    @Override
    public void transformPage(View page, float position) {
        // do transformation here
        }
});

The transformPage() method has a View and a position parameter. The former represents the current view or fragment, while the latter contains its position. Scrolling events are triggered by both the starting page and the target page, the corresponding _transformPage() _calls occur simultaneously. A value of zero means the current page is in the center, 1 means a full page offset to the right side, -1 means a full page offset to the left side. Quoted from the developer site: > The position parameter indicates where a given page is located relative to the center of the screen. It is a dynamic property that changes as the user scrolls through the pages. When a page fills the screen, its position value is 0. When a page is drawn just off the right side of the screen, its position value is 1. If the user scrolls halfway between pages one and two, page one has a position of -0.5 and page two has a position of 0.5. It is a good idea to normalize the position, so you don’t have to bother with the numbers being negative or positive. It’s pretty easy, just do this in every call:

final float normalizedposition = Math.abs(Math.abs(position) - 1);

Now you have a variable that goes from 0 to 1 (and the other way, respectively) if the user scrolls the ViewPager. What you do with it is up to your imagination; here are some basic examples. First, we’ll fade the pages in and out:

@Override
public void transformPage(View page, float position) {
    final float normalizedposition = Math.abs(Math.abs(position) - 1);
    page.setAlpha(normalizedposition);
}

These lines perform a scaling effect from and to 50%:

@Override
public void transformPage(View page, float position) {
final float normalizedposition = Math.abs(Math.abs(position) - 1);
    page.setScaleX(normalizedposition / 2 + 0.5f);
    page.setScaleY(normalizedposition / 2 + 0.5f);
}

The last example rotates the pages around their Z axis by 30 degrees; you don’t need to normalize for this one. The effect is similar to the cover flow UI pattern:

@Override
public void transformPage(View page, float position) {
    page.setRotationY(position * -30);
}

Of course rotating the views or fragments around the axes is also possible, but the effect might be a bit overwhelming for the user, so I don’t recommend it. Anyway, it can be done with the other setRotation()methods.

These are just some basic examples, you can do much neater stuff with the PagerTransformer. See this linkat the official dev site for two good looking effects. You can also combine it with a PagerTitleStrip or aPagerTabStrip.

版权声明:本文为博主原创文章,未经博主允许不得转载。

【Android进阶】自定义带动画切换效果的ViewPager

1.引言 ViewPager是我们比较熟悉的一个控件,用于视图切换或作为首页的切换,默认是没有动画切换效果的,当然我们可以通过setPageTransform来添加各种各样的动画,这里我们介绍另外一...
  • u010583599
  • u010583599
  • 2016年07月27日 11:54
  • 1218

ViewPager 16种切换动画,早晚能用到

相信很多同学都用过Viewpager但是,Viewpager提供的动画不能应对我们所有的需求,今天就给大家带来16+的动画效果,你可以用,更可以自定义...
  • AndroidMsky
  • AndroidMsky
  • 2015年12月10日 13:58
  • 6810

ViewPager 从入门到带你撸个启动页之实战PageTransformer切换动画特效(四)

转载请注明出处(万分感谢!): http://blog.csdn.net/javazejian/article/details/52141393 关联文章: ViewPager 从入门到...
  • javazejian
  • javazejian
  • 2016年08月09日 10:03
  • 3136

ViewPager的过渡动画

ViewPager中setPageTransformer()的一些简单理解
  • hbl_for_android
  • hbl_for_android
  • 2016年05月01日 10:28
  • 598

ViewPager+属性动画 实现炫酷视差动画效果

ViewPager有一个setPageTransform()方法可以实现很多酷炫的动画效果 先来个仿QQ的侧滑面板效果 vp.setPageTransformer(true, new Page...
  • B1ueKid
  • B1ueKid
  • 2016年05月13日 15:02
  • 3811

Android为ViewPager增加切换动画——自定义ViewPager

在上篇博客中,我写了一个使用属性动画为ViewPager添加切换动画的方法,并且可以兼容到Android3.0以下版本的设备上,那么关于为ViewPager添加动画的方式还会有另外一种实现方案,就是自...
  • lee_tianya
  • lee_tianya
  • 2015年03月16日 09:14
  • 2550

Android实现ViewPager滑屏动作并添加动画效果

安卓滑屏添加动画效果
  • My_harbor
  • My_harbor
  • 2017年04月02日 13:46
  • 688

ViewPageerTransform深入理解,给viewpager切换加动画

ViewPagerTransforms的深入理解每当viewpager上一个可见或依附的页面发生了滚动事件就会调用PageTransformer,这让应用可以使用自定义transformation让v...
  • qq_21793463
  • qq_21793463
  • 2016年08月20日 23:02
  • 4533

Fragment在ViewPager中的初始动画

Fragment生命周期,ViewPager设置,PagerAdapter子类,可见初始动画
  • baidu_20596139
  • baidu_20596139
  • 2016年03月14日 21:11
  • 868

Android ViewPager 自定义翻页动画

自定义ViewPager的翻页动画
  • vv765947965
  • vv765947965
  • 2016年12月15日 14:14
  • 1014
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:android3.0自带ViewPager动画
举报原因:
原因补充:

(最多只允许输入30个字)