----------8/8/2015 12:10:54 AM
今天看到了雅虎天气的城市之间的页面切换,有视差的感觉,上网查了下,那就是视差的效果。心想正好能够把它用在项目中的引导画面上去,能增加交互性和用户体验,对用户来说是第一印象是增加好感和把应用用下的动力。
于是开始动手找资料,一般应用的引导画面就是ViewPager几张图片之间的切换,用一整张切成好多张,还是每张都不一样,这就需要客户的需求来定了,美工给你切怎么样的图,你就用怎么样的图,我们要把效果做出来。动画的效果主要用到了PageTransformer
,在ViewPager
中调用setPagerTransFarmer(boolean reverseDrawingOrder, PageTransformer transformer)
的方法。我们来看下这两个参数,第一个是一个boolean
值,意思是是否提供一个PageTransFormer
的接口来测绘从最后一个页面到第一个,而不是第一个到最后一个。(说实话这句话看的不是很懂),第二个参数就是我们要用到的接口了,我们要自定义一个该接口的实现类,来确保每个页面再切换的时候会实现我们需要的效果。
来看下这个PageTransformer
这个接口
public interface PageTransformer {
/**
* Apply a property transformation to the given page.
*
* @param page Apply the transformation to this page
* @param position Position of page relative to the current front-and-center
* position of the pager. 0 is front and center. 1 is one full
* page position to the right, and -1 is one page position to the left.
*/
public void transformPage(View page, float position);
}
接口提供了一个需要我们实现的方法,然后在onPageScrolled()
方法中回掉了它,于是确定了这个方法是在每个页面切换的时候调用的。好吧现在我们来实现这个接口
public class BasePagerTransFarmer implements ViewPager.PageTransformer {
@Override
public void transformPage(View page, float position) {
System.out.println("position = " + position);
}
}
想来第一个参数是ViewPager
的当前显示的View
,第二个position
具体是什么玩意儿,我们先把他打印出来看一下吧。
System.out﹕ position = -0.0055555557
System.out﹕ position = 0.99444443
System.out﹕ position = -0.0074074073
System.out﹕ position = 0.9925926
...
System.out﹕ position = -0.9962963
System.out﹕ position = 0.0037037036
System.out﹕ position = -0.99814814
System.out﹕ position = 0.0018518518
划了一张图过去,好像每两个值相加等于一,这个position
应该就是两个页面占屏幕的比例吧,或者应该说是 getLeft
和屏幕宽度的比值,一张正往左边移出去,另一张图从屏幕的右边移进来。
这样,就可以用这个position
的值来确定对View
的动画执行的程度了。
再来看position
的值,取值范围是(-1,1),再根据两张图来仔细点区分可以分成(-1,0],[0,1)。前面是出去的图的取值范围从0到-1,后面是进来的图的取值,从1到0。
这样就可以判断移进来和移出去的图根据这个position
做需要的操作了
if (position<-1) {
}
if(position<=0){
}else if(position<=1){
}
在-1和1之间对view
或者view
中的子元素设置动画,就可以达到我们需要的目的了。
然后来看雅虎天气的视差效果,应该就是让View
中的ImageView
移动的比View
速度慢,就可以达到那种视差效果了。
if (position<-1) {
}else if(position<=0){
page.setTranslationX(0);
page.setAlpha(1);
page.setScaleX(1 );
page.setScaleY(1 );
//page.setRotationY((1+position)*360);
}else if(position<=1){
float scaleFactor = MIN_SCALE
+ (1 - MIN_SCALE) * (1 - Math.abs(position));
page.setTranslationX(width*-position);
page.setAlpha(1 - position);
page.setScaleX(scaleFactor);
page.setScaleY(scaleFactor);
//page.setRotationY((1-position)*360);
}
可以实现渐变,旋转,平移,缩放动画,可以找到最炫酷的组合模式,打造自己满意的效果。