关于动画效果 about android-infinitecards

[BakerJQ]

没太明白你的意思，你是指demo里的style1和style2么，这两个有些步骤下动画是有一样的

[drogbababa]

具体来说是这样，我的程序中有style1，style2，style3这三种动画模式（与demo中一致）。 首先，初始化的时候我定义的是style2动画效果，这时手指点击mCardView会有两个卡片交换的效果。然后，我在给一个button设置事件，先设置style1模式，在让第二张卡片移动到第一个位置。重点是，我在button事件的末尾又加上了setStyle2; 但是之后我在用手指点击mCardView时，它的效果并不是style2，而是style1（与button的时间一样）。

[BakerJQ]

方便贴一下代码么

[drogbababa]

okok,我就放在这里，我的按钮用的是第三方的fab...
public class ColorFragment extends Fragment implements View.OnClickListener {
private InfiniteCardView mCardView;
private BaseAdapter mAdapter;
private FabOptions fabOptions;

private int[] resId = {R.color.colorPrimary, R.color.colorAccent,R.color.colorPrimaryDark};

@Nullable
@Override
public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, Bundle savedInstanceState) {
    View view = inflater.inflate(R.layout.fragment_colorpanel, container, false);
    mCardView = (InfiniteCardView)view.findViewById(R.id.cardview);
    fabOptions = (FabOptions)view.findViewById(R.id.fab_options);
    init();
    return view;
}

private void init(){
    mAdapter = new MyAdapter(resId);
    setStyle2();
    mCardView.setAdapter(mAdapter);
    fabOptions.setBackgroundColor(R.color.colorPrimary);
    fabOptions.setButtonsMenu(R.menu.menu_faboptions);
    fabOptions.setFabColor(R.color.colorPrimary);
    fabOptions.setOnClickListener(this);
}

private void setStyle1() {
    mCardView.setClickable(true);
    mCardView.setAnimType(InfiniteCardView.ANIM_TYPE_FRONT);
    mCardView.setAnimInterpolator(new OvershootInterpolator(-18));
    mCardView.setTransformerToFront(new DefaultTransformerToFront());
    mCardView.setTransformerToBack(new AnimationTransformer() {
        @Override
        public void transformAnimation(View view, float fraction, int cardWidth, int cardHeight, int fromPosition, int toPosition) {
            int positionCount = fromPosition - toPosition;
            float scale = (0.8f - 0.1f * fromPosition) + (0.1f * fraction * positionCount);
            ViewHelper.setScaleX(view, scale);
            ViewHelper.setScaleY(view, scale);
            if (fraction < 0.5) {
                ViewCompat.setRotationX(view, 180 * fraction);
            } else {
                ViewCompat.setRotationX(view, 180 * (1 - fraction));
            }
        }

        @Override
        public void transformInterpolatedAnimation(View view, float fraction, int cardWidth, int cardHeight, int fromPosition, int toPosition) {
            int positionCount = fromPosition - toPosition;
            float scale = (0.8f - 0.1f * fromPosition) + (0.1f * fraction * positionCount);
            ViewHelper.setTranslationY(view, -cardHeight * (0.8f - scale) * 0.5f - cardWidth * (0.02f *
                    fromPosition - 0.02f * fraction * positionCount));
        }
    });
    mCardView.setZIndexTransformerToBack(new ZIndexTransformer() {
        @Override
        public void transformAnimation(CardItem card, float fraction, int cardWidth, int cardHeight, int fromPosition, int toPosition) {
            if (fraction < 0.4f) {
                card.zIndex = 1f + 0.01f * fromPosition;
            } else {
                card.zIndex = 1f + 0.01f * toPosition;
            }
        }

        @Override
        public void transformInterpolatedAnimation(CardItem card, float fraction, int cardWidth, int cardHeight, int fromPosition, int toPosition) {

        }
    });
}


private void setStyle2() {
    mCardView.setClickable(true);
    mCardView.setAnimType(InfiniteCardView.ANIM_TYPE_SWITCH);
    mCardView.setAnimInterpolator(new OvershootInterpolator(-18));
    mCardView.setTransformerToFront(new DefaultTransformerToFront());
    mCardView.setTransformerToBack(new AnimationTransformer() {
        @Override
        public void transformAnimation(View view, float fraction, int cardWidth, int cardHeight, int fromPosition, int toPosition) {
            int positionCount = fromPosition - toPosition;
            float scale = (0.8f - 0.1f * fromPosition) + (0.1f * fraction * positionCount);
            ViewHelper.setScaleX(view, scale);
            ViewHelper.setScaleY(view, scale);
            if (fraction < 0.5) {
                ViewCompat.setRotationX(view, 180 * fraction);
            } else {
                ViewCompat.setRotationX(view, 180 * (1 - fraction));
            }
        }

        @Override
        public void transformInterpolatedAnimation(View view, float fraction, int cardWidth, int cardHeight, int fromPosition, int toPosition) {
            int positionCount = fromPosition - toPosition;
            float scale = (0.8f - 0.1f * fromPosition) + (0.1f * fraction * positionCount);
            ViewHelper.setTranslationY(view, -cardHeight * (0.8f - scale) * 0.5f - cardWidth * (0.02f *
                    fromPosition - 0.02f * fraction * positionCount));
        }
    });
    mCardView.setZIndexTransformerToBack(new ZIndexTransformer() {
        @Override
        public void transformAnimation(CardItem card, float fraction, int cardWidth, int cardHeight, int fromPosition, int toPosition) {
            if (fraction < 0.4f) {
                card.zIndex = 1f + 0.01f * fromPosition;
            } else {
                card.zIndex = 1f + 0.01f * toPosition;
            }
        }

        @Override
        public void transformInterpolatedAnimation(CardItem card, float fraction, int cardWidth, int cardHeight, int fromPosition, int toPosition) {

        }
    });
}


private void setStyle3() {
    mCardView.setClickable(true);
    mCardView.setAnimType(InfiniteCardView.ANIM_TYPE_FRONT_TO_LAST);
    mCardView.setAnimInterpolator(new OvershootInterpolator(-8));
    mCardView.setTransformerToFront(new DefaultCommonTransformer());
    mCardView.setTransformerToBack(new AnimationTransformer() {
        @Override
        public void transformAnimation(View view, float fraction, int cardWidth, int cardHeight, int fromPosition, int toPosition) {
            int positionCount = fromPosition - toPosition;
            float scale = (0.8f - 0.1f * fromPosition) + (0.1f * fraction * positionCount);
            ViewHelper.setScaleX(view, scale);
            ViewHelper.setScaleY(view, scale);
            if (fraction < 0.5) {
                ViewCompat.setTranslationX(view, cardWidth * fraction * 1.5f);
                ViewCompat.setRotationY(view, -45 * fraction);
            } else {
                ViewCompat.setTranslationX(view, cardWidth * 1.5f * (1f - fraction));
                ViewCompat.setRotationY(view, -45 * (1 - fraction));
            }
        }

        @Override
        public void transformInterpolatedAnimation(View view, float fraction, int cardWidth, int cardHeight, int fromPosition, int toPosition) {
            int positionCount = fromPosition - toPosition;
            float scale = (0.8f - 0.1f * fromPosition) + (0.1f * fraction * positionCount);
            ViewHelper.setTranslationY(view, -cardHeight * (0.8f - scale) * 0.5f - cardWidth * (0.02f *
                    fromPosition - 0.02f * fraction * positionCount));
        }
    });
    mCardView.setZIndexTransformerToBack(new ZIndexTransformer() {
        @Override
        public void transformAnimation(CardItem card, float fraction, int cardWidth, int cardHeight, int fromPosition, int toPosition) {
            if (fraction < 0.5f) {
                card.zIndex = 1f + 0.01f * fromPosition;
            } else {
                card.zIndex = 1f + 0.01f * toPosition;
            }
        }

        @Override
        public void transformInterpolatedAnimation(CardItem card, float fraction, int cardWidth, int cardHeight, int fromPosition, int toPosition) {

        }
    });
}

@Override
public void onClick(View v) {
    switch (v.getId()) {
        case R.id.faboptions_pre:
            setStyle1();
            mCardView.bringCardToFront(mAdapter.getCount() - 1);
            break;

        case R.id.faboptions_next:
            setStyle3();
            mCardView.bringCardToFront(1);
            break;

        case R.id.faboptions_clear:
            if (mCardView.isAnimating()) {
                return;
            }
            setStyle2();
            mCardView.setAdapter(mAdapter);
            break;

        case R.id.faboptions_share:

            break;

        default:
            // no-op
    }
    setStyle2();//我提的就是这句话
}

private static class MyAdapter extends BaseAdapter {
    private int[] resIds = {};

    MyAdapter(int[] resIds) {
        this.resIds = resIds;
    }

    @Override
    public int getCount() {
        return resIds.length;
    }

    @Override
    public Integer getItem(int position) {
        return resIds[position];
    }

    @Override
    public long getItemId(int position) {
        return position;
    }

    @Override
    public View getView(int position, View convertView, ViewGroup parent) {
        if (convertView == null) {
            convertView = LayoutInflater.from(parent.getContext()).inflate(R.layout
                    .item_card, parent, false);
        }
        convertView.setBackgroundResource(resIds[position]);
        return convertView;
    }
}

}

[drogbababa]

在onClick()（fab的点击事件）的末尾我用了setStyle2();我感觉之后我在手动点击mCardView应该还是style2啊。。。

[BakerJQ]

ok，原因是这样的，你可以到CardAnimationHelper类中看一下，所有设置“style”的方法都有一个前置判断，就是当前不在动画状态下，所以你开始了动画后，立马设置另一个style是无效的，因为当前动画还没结束。之所以这样做，是为了防止一个动画过程中，立马设置另一个动画而导致动画效果错乱。

[drogbababa]

那么我怎么能在动画结束后设置style呢？

[drogbababa]

用一个while循环？我试试啊。。。

[BakerJQ]

建议不要这样，目前你可以在设置的transformer中，判断fraction是否为1来确定当前动画是否完成，我会考虑加一个listener，来监听动画是否完成

[BakerJQ]

另外你可以看下这篇文章，里面介绍了一下实现这个库的思路
http://bakerjq.com/2017/05/28/20170528_InfiniteCard/

[drogbababa]

多谢指点，我会看的！

[BakerJQ]

不谢，加了listener后我会在issue里告诉你再close

[drogbababa]

欧克欧克，还是得谢...

[BakerJQ]

已经加入动画listener

[drogbababa]

已收到，您没有在gradle上面更新版本，我怎么使用？

[BakerJQ]

今天jcenter那一直传不上。。。你可以先直接下下来导包吧。。。后面会传上去

[drogbababa]

哈哈，可以的，我先用AAR包了，以后估计懒得换了。。。。。

[BakerJQ]

已经更新到jCenter了，1.0.2

[drogbababa]

多谢LZ^_^