Android - ViewPager动画(纸堆)
我有一些项目要显示，目前我使用滚动动画的列表视图。但是，我想制作Shazam Discover面板的相同动画，我不知道我是否必须使用ListView或其他小工具……有什么想法吗？提前感谢！
回答 2
Stack Overflow用户
发布于 2018-06-30 01:03:57
感谢这两个链接，
我解决了我自己的问题:)，所以我在这里发布了解决方案
为了再现上面相同的动画(就像一个纸堆)，我最后使用了一个带有pagetransformer animation的垂直viewpager
所以我有：
- ViewPager：包含要display
- PagerAdapter的项:实例化每个片段的适配器:幻灯片动画
- A items
- PageTransformer ：包含ViewPager
纸堆动画
这里的第一个困难是创建纸张堆叠动画，它意味着堆叠当前…在每个项目之间创建"z-index“顺序，否则旧项目将在前面，而当前项目将在后面。(我说的有道理吗？:P)
因此，我决定为ViewPager的每个视图添加一个带有其位置值的标记，并在PageTransformer上使用它来定义视图的translationZ。因此，位置索引的第一个项目视图，即= 0，有一个z-ViewPager= 0，第二个z-= 1...因此创建一个纸堆!！
恰当的“破坏”
第二个困难是在完美的时刻隐藏和显示之前的项目……因为在默认情况下，ViewPager只显示两个视图，并在加载第三个视图时调用destroyItem。所以我们看到了最后一个视图的破坏...在我的第一条消息的视频中，我们可以看到，当当前视图在其他视图之前通过时，最后一个视图将被删除，那么如何做到这一点？
我决定在PagerAdapter中创建一个ArrayList<View>，并在调用instantiateItem函数时添加每个视图。我还创建了一个Getter来从我的片段中获取ArrayList。在我的Framgment中，我向我的ViewPager添加了一个addOnPageChangeListener。使用此侦听器，我可以确定显示ViewPager的哪个视图(使用位置和视图的ArrayList )和positionOffset，使用这两个变量，我可以在完美的时刻隐藏或显示以前的视图……
代码
我澄清了下面的代码，使其成为泛型
片段
public class MyFragment extends Fragment {
private ViewPager viewPager;
@Nullable
@Override
public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
View rootView = inflater.inflate(R.layout.fragment, container, false);
viewPager = (ViewPager) rootView.findViewById(R.id.viewpager);
final MyPagerAdapter pagerAdapter = new MyPagerAdapter(getActivity());
viewPager.setAdapter(pagerAdapter);
viewPager.setPageTransformer(true, new PaperStackTransformer());
viewPager.setRotation(90); // Vertical viewpager
viewPager.setOffscreenPageLimit(10); // To display more than 2 view (and 10 to avoid bugs...)
final ArrayList<View> views = MyPagerAdapter.getViews();
final float[] previousPositionOffset = new float[1];
viewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
if (positionOffset > 0.9 || positionOffset < 0.1) return;
float dif = previousPositionOffset[0] - positionOffset;
// Change values (0.40 and 0.70) to conform to your PageViewer view
if (positionOffset > 0.40 && positionOffset < 0.70 ){
// at this moment current view hide the previous
if (dif < 0) {
// If we scroll down we hide the previous view
int p = position - 2;
if (p >= 0 && views.get(p).getVisibility() == View.VISIBLE) {
views.get(p).setVisibility(View.INVISIBLE);
}
}
else if (dif > 0) {
// If we scroll up we show the previous view
int p = position - 2;
if (p >= 0 && views.get(p).getVisibility() == View.INVISIBLE) {
views.get(p).setVisibility(View.VISIBLE);
}
}
}
previousPositionOffset[0] = positionOffset;
}
@Override
public void onPageSelected(int position) {
}
@Override
public void onPageScrollStateChanged(int state) {
}
});
return rootView;
}}
PagerAdapter
public class MyPagerAdapter extends PagerAdapter {
private ArrayList<View> views;
...
public ArrayList<View> getViews() {
return views;
}
...
@Override
public Object instantiateItem(ViewGroup container, int position) {
...
View view = inflater.inflate(R.layout.view, null, false);
...
view.setTag(position); // To the "z-index" order on PageTransformer
view.setRotation(-90f); // Vertical ViewPager
((ViewPager) container).addView(view);
views.add(view); // add the view to the list
return view;
}
...}
PageTransformer
public class PaperStackTransformer implements ViewPager.PageTransformer {
private static final float MIN_SCALE = 0.9f;
public void transformPage(View view, float position) {
if (position < -1) { // [-Infinity,-1)
view.setTranslationX(1150 * -position);
float scaleFactor = MIN_SCALE
+ (1 - MIN_SCALE) * (1 - Math.abs(position));
view.setScaleX(scaleFactor);
view.setScaleY(scaleFactor);
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) view.setTranslationZ((int) view.getTag()*1.0f);
} else if (position <= 0) { // [-1,0]
view.setAlpha(1 - position);
view.setTranslationX(1150 * -position);
float scaleFactor = MIN_SCALE
+ (1 - MIN_SCALE) * (1 - Math.abs(position));
view.setScaleX(scaleFactor);
view.setScaleY(scaleFactor);
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) view.setTranslationZ((int) view.getTag()*1.0f);
} else if (position <= 1) { // (0,1]
view.setAlpha(1);
view.setTranslationX(1);
view.setScaleX(1);
view.setScaleY(1);
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) view.setTranslationZ((int) view.getTag()*1.0f);
} else { // (1,+Infinity]
view.setAlpha(1);
}
}}
结论
所以listview不是解决方案，我希望这段代码能帮助一些人。my paper stack animation :D
Stack Overflow用户
发布于 2018-06-29 06:06:41
https://stackoverflow.com/questions/51091611
复制相似问题