垂直 ViewPager 中的动画
Animation in a vertical ViewPager
我需要在垂直方向制作这个动画ViewPager
:
https://www.youtube.com/watch?v=wuE-4jjnp3g
这是我迄今为止尝试过的:
viewPager = (VerticalViewPager) rootView.findViewById(R.id.viewpager);
viewPager.setPageTransformer(false, new ViewPager.PageTransformer() {
@Override
public void transformPage(View page, float position) {
if (position >= 0.5F && position <= 1F) {
float progressStart = 0.5f;
float progressEnd = 1f;
float progressDelta = progressEnd - progressStart;
float progress = (position - progressStart)/progressDelta;
if(progress>1)progress=1;
if(progress<0)progress=0;
float endValue = 1f;
float startValue = 0.8f;
float delta = endValue - startValue;
progress = 1-progress;
float currentScale = startValue + delta*progress;
ViewCompat.setPivotY(page,0);
ViewCompat.setScaleX(page, currentScale);
ViewCompat.setScaleY(page, 0.9F);
ViewCompat.setTranslationY(page, 0);
} else {
ViewCompat.setScaleX(page, 1.0F); //- width
ViewCompat.setScaleY(page, 0.9F); //- height
}
}
});
这是结果:
https://www.youtube.com/watch?v=G9W2lCKP-_s
我正在使用垂直方向的原始 ViewPager 的副本,查看代码:https://github.com/Devlight/InfiniteCycleViewPager/blob/master/infinitecycleviewpager/src/main/java/com/gigamole/infinitecycleviewpager/VerticalViewPager.java
显然它还没有关闭,我需要预览下一页并使两页更接近。
请帮忙
谢谢。
我需要预览下一页
你必须添加
android:paddingBottom="200dp"
android:clipToPadding="false"
到您的<com.gigamole.infinitecycleviewpager.VerticalViewPager
布局
在您的 java 代码中放置它,当然您应该调整布局 startTranslation
和 startValue
以及 paddingBottom
viewPager.setPageTransformer(true, new ViewPager.PageTransformer() {
@Override
public void transformPage(View page, float position) {
ViewCompat.setPivotY(page,0);
ViewCompat.setPivotX(page,page.getWidth()/2);
float endTranslation = 0f;
float startTranslation = -400f;
float deltaTranslation = endTranslation - startTranslation;
float endScale = 1f;
float startScale = 0.8f;
float deltaScale = endScale - startScale;
float progressStart = 0.5f;
float progressEnd = 1f;
float progressDelta = progressEnd - progressStart;
float progress = (position - progressStart)/progressDelta;
if(progress>1)progress=1;
if(progress<0)progress=0;
progress = 1-progress;
float currentScale = startScale + deltaScale*progress;
ViewCompat.setScaleX(page, currentScale);
ViewCompat.setScaleY(page, currentScale);
float currentTranslation = startTranslation + deltaTranslation*progress;
ViewCompat.setTranslationY(page, currentTranslation);
}
我需要在垂直方向制作这个动画ViewPager
:
https://www.youtube.com/watch?v=wuE-4jjnp3g
这是我迄今为止尝试过的:
viewPager = (VerticalViewPager) rootView.findViewById(R.id.viewpager);
viewPager.setPageTransformer(false, new ViewPager.PageTransformer() {
@Override
public void transformPage(View page, float position) {
if (position >= 0.5F && position <= 1F) {
float progressStart = 0.5f;
float progressEnd = 1f;
float progressDelta = progressEnd - progressStart;
float progress = (position - progressStart)/progressDelta;
if(progress>1)progress=1;
if(progress<0)progress=0;
float endValue = 1f;
float startValue = 0.8f;
float delta = endValue - startValue;
progress = 1-progress;
float currentScale = startValue + delta*progress;
ViewCompat.setPivotY(page,0);
ViewCompat.setScaleX(page, currentScale);
ViewCompat.setScaleY(page, 0.9F);
ViewCompat.setTranslationY(page, 0);
} else {
ViewCompat.setScaleX(page, 1.0F); //- width
ViewCompat.setScaleY(page, 0.9F); //- height
}
}
});
这是结果:
https://www.youtube.com/watch?v=G9W2lCKP-_s
我正在使用垂直方向的原始 ViewPager 的副本,查看代码:https://github.com/Devlight/InfiniteCycleViewPager/blob/master/infinitecycleviewpager/src/main/java/com/gigamole/infinitecycleviewpager/VerticalViewPager.java
显然它还没有关闭,我需要预览下一页并使两页更接近。
请帮忙
谢谢。
我需要预览下一页
你必须添加
android:paddingBottom="200dp"
android:clipToPadding="false"
到您的<com.gigamole.infinitecycleviewpager.VerticalViewPager
布局
在您的 java 代码中放置它,当然您应该调整布局 startTranslation
和 startValue
以及 paddingBottom
viewPager.setPageTransformer(true, new ViewPager.PageTransformer() {
@Override
public void transformPage(View page, float position) {
ViewCompat.setPivotY(page,0);
ViewCompat.setPivotX(page,page.getWidth()/2);
float endTranslation = 0f;
float startTranslation = -400f;
float deltaTranslation = endTranslation - startTranslation;
float endScale = 1f;
float startScale = 0.8f;
float deltaScale = endScale - startScale;
float progressStart = 0.5f;
float progressEnd = 1f;
float progressDelta = progressEnd - progressStart;
float progress = (position - progressStart)/progressDelta;
if(progress>1)progress=1;
if(progress<0)progress=0;
progress = 1-progress;
float currentScale = startScale + deltaScale*progress;
ViewCompat.setScaleX(page, currentScale);
ViewCompat.setScaleY(page, currentScale);
float currentTranslation = startTranslation + deltaTranslation*progress;
ViewCompat.setTranslationY(page, currentTranslation);
}