我有一些项目要显示,目前我使用滚动动画的列表视图。但是,我想制作Shazam Discover面板的相同动画,我不知道我是否必须使用ListView或其他小工具……有什么想法吗?提前感谢!
发布于 2018-06-30 01:03:57
感谢这两个链接,
我解决了我自己的问题:),所以我在这里发布了解决方案
为了再现上面相同的动画(就像一个纸堆),我最后使用了一个带有pagetransformer animation的垂直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
发布于 2018-06-29 06:06:41
https://stackoverflow.com/questions/51091611
复制相似问题