问题描述
我正在阅读一个有关自定义ViewPager
的滑动页面动画的示例,该示例需要将页面(View
)转换为一定数量.该示例来自 文档 .具体而言,它涉及一种称为ZoomOutPageTransformer
的实现,可以在ViewPager
到setPageTransformer()
上对其进行设置,以自定义页面的滑动方式(在其中包含 zoom 动画).
I was reading an example on customizing ViewPager
's sliding page animation that entails translating the page(View
) to a certain amount. The example is from the docs. Specifically, it is about an implementation called ZoomOutPageTransformer
that can be set on a ViewPager
through setPageTransformer()
to customize how the page slides(incorporating a zoom animation in it).
这就是最终结果的样子:
This is how the end result is supposed to look like:
现在,他们描述了他们将如何去做:
Now, they describe how they are going to do it:
position
参数指示给定页面的位置 相对于屏幕的中心.这是一个动态的属性 随着用户滚动浏览页面而变化.当页面填满 屏幕上,其position
值为0. 在屏幕右侧,其position
值为1.如果用户滚动 在第一页和第二页之间的中间位置,第一页的position
为-0.5, 第二页的position
为0.5.基于以下页面的position
在屏幕上,您可以通过设置页面来创建自定义幻灯片动画 使用诸如setAlpha()
,setTranslationX()
或 setScaleY()
.
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. Based on the position
of the pages on the screen, you can create custom slide animations by setting page properties with methods such as setAlpha()
, setTranslationX()
, or setScaleY()
.
这是他们提供的PageTransformer
的实现:
And this is the implementation of the PageTransformer
that they have provided:
public class ZoomOutPageTransformer implements ViewPager.PageTransformer {
private static final float MIN_SCALE = 0.85f;
private static final float MIN_ALPHA = 0.5f;
public void transformPage(View view, float position) {
int pageWidth = view.getWidth();
int pageHeight = view.getHeight();
if (position < -1) { // [-Infinity,-1)
// This page is way off-screen to the left.
view.setAlpha(0);
} else if (position <= 1) { // [-1,1]
// Modify the default slide transition to shrink the page as well
float scaleFactor = Math.max(MIN_SCALE, 1 - Math.abs(position));
float vertMargin = pageHeight * (1 - scaleFactor) / 2;
float horzMargin = pageWidth * (1 - scaleFactor) / 2;
if (position < 0) {
view.setTranslationX(horzMargin - vertMargin / 2);
} else {
view.setTranslationX(-horzMargin + vertMargin / 2);
}
// Scale the page down (between MIN_SCALE and 1)
view.setScaleX(scaleFactor);
view.setScaleY(scaleFactor);
// Fade the page relative to its size.
view.setAlpha(MIN_ALPHA +
(scaleFactor - MIN_SCALE) /
(1 - MIN_SCALE) * (1 - MIN_ALPHA));
} else { // (1,+Infinity]
// This page is way off-screen to the right.
view.setAlpha(0);
}
}
}
问题:
我听不懂这句话,
view.setTranslationX(horzMargin - vertMargin / 2);
我的理解是position
参数的值1.0等于覆盖屏幕宽度,即w.因此,如果页面的中心移动了x个position
单位,则以像素/dp表示的平移将为w * x.但是他们在转换量计算中使用了一些余量计算.
My understanding was that a value of 1.0 for position
parameter equates to covering the screen width, i.e, w. So, if the center of a page has moved x units of position
then the translation in terms of pixels/dp would be, w*x. But they are using some margin calculation for the translation amount calculation.
任何人都可以解释他们如何进行此计算以及我的计算有什么问题吗?
Can anyone explain how they have done this calculation and what would be wrong with my calculation?
推荐答案
您在这里缺少一件事,将PageTransformer应用于已定位的视图之后.
There is one thing you are missing here, the PageTransformer is applied to the views AFTER they have been positioned.
因此,无论是否在PageView上附加了PageTransformer,当您在页面之间滚动时,您只需进行具有SNAP功能的滚动(如LiseView中的滚动)即可.
So, with or without a PageTransformer attached to the PageView - when you scroll between pages - you simply doing a scroll (like in a LiseView) with SNAP capabilities.
PageTransformer仅在其上添加效果.
所以,
float vertMargin = pageHeight * (1 - scaleFactor) / 2;
float horzMargin = pageWidth * (1 - scaleFactor) / 2;
if (position < 0) {
view.setTranslationX(horzMargin - vertMargin / 2);
} else {
view.setTranslationX(-horzMargin + vertMargin / 2);
}
不可以移动页面-只是为了补偿页面的缩小.
is NOT to move the pages - but to compensate the page shrinking.
没有它,页面将有一些丑陋的副作用.尝试一下,删除行:)-视图将向右/向左移动,但位置将关闭.
Without it, the page will have some ugly side effects. TRY IT, remove the lines :) - The views will go right/left but the positioning will be off.
因此,平移X不会移动页面,但是在这种情况下,只需管理页面间距即可改善动画效果-上面是数学运算.它的作用是根据屏幕的高度/宽度减少页面之间的间隔.首先,它消除了空间(horzMargin),然后增加了一点间距(-vertMargin/2)
So, the translation X does not move the page, but, in this case, simply manages the pages spacing to improve the animation feel - the above is the Math for it. What it does is to reduce the space between the pages based on the screen height/width. First it negates the space (horzMargin) then it adds a little spacing (- vertMargin / 2)
这就是为什么计算不佳(w * x)的原因-您正在尝试移动页面-但是页面已经在移动.
And that is why your calculation is not good (w*x) - You are trying to move the page - But it is already moving.
这篇关于滑动ViewPager来查看翻译的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!