关于动画效果 #4

drogbababa · 2017-06-25T07:03:29Z

您好，我看了demo，发现了一个问题。就是我先用某个动画效果（setStyle1）完成动作后，紧接着设置另一个动画效果（setStyle2）。后面如果做动作的话，效果还是style1的。请问这是为什么？

BakerJQ · 2017-06-25T09:25:11Z

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

drogbababa · 2017-06-25T09:33:33Z

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

BakerJQ · 2017-06-25T09:35:33Z

方便贴一下代码么

drogbababa · 2017-06-25T09:38:22Z

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 · 2017-06-25T09:40:12Z

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

BakerJQ · 2017-06-25T09:42:48Z

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

drogbababa · 2017-06-25T09:44:34Z

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

drogbababa · 2017-06-25T09:47:49Z

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

BakerJQ · 2017-06-25T09:49:53Z

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

BakerJQ · 2017-06-25T09:50:34Z

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

drogbababa · 2017-06-25T09:50:57Z

多谢指点，我会看的！

BakerJQ · 2017-06-25T09:52:30Z

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

drogbababa · 2017-06-25T09:53:54Z

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

BakerJQ · 2017-06-25T14:01:58Z

已经加入动画listener

drogbababa · 2017-06-25T14:39:32Z

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

BakerJQ · 2017-06-25T14:44:49Z

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

drogbababa · 2017-06-25T14:51:11Z

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

BakerJQ · 2017-06-27T13:05:20Z

已经更新到jCenter了，1.0.2

drogbababa · 2017-06-27T13:08:24Z

多谢LZ^_^

BakerJQ closed this as completed Jun 25, 2017

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

关于动画效果 #4

关于动画效果 #4

drogbababa commented Jun 25, 2017

BakerJQ commented Jun 25, 2017

drogbababa commented Jun 25, 2017

BakerJQ commented Jun 25, 2017

drogbababa commented Jun 25, 2017

drogbababa commented Jun 25, 2017

BakerJQ commented Jun 25, 2017

drogbababa commented Jun 25, 2017

drogbababa commented Jun 25, 2017

BakerJQ commented Jun 25, 2017

BakerJQ commented Jun 25, 2017

drogbababa commented Jun 25, 2017

BakerJQ commented Jun 25, 2017

drogbababa commented Jun 25, 2017

BakerJQ commented Jun 25, 2017

drogbababa commented Jun 25, 2017

BakerJQ commented Jun 25, 2017

drogbababa commented Jun 25, 2017

BakerJQ commented Jun 27, 2017

drogbababa commented Jun 27, 2017

关于动画效果 #4

关于动画效果 #4

Comments

drogbababa commented Jun 25, 2017

BakerJQ commented Jun 25, 2017

drogbababa commented Jun 25, 2017

BakerJQ commented Jun 25, 2017

drogbababa commented Jun 25, 2017

drogbababa commented Jun 25, 2017

BakerJQ commented Jun 25, 2017

drogbababa commented Jun 25, 2017

drogbababa commented Jun 25, 2017

BakerJQ commented Jun 25, 2017

BakerJQ commented Jun 25, 2017

drogbababa commented Jun 25, 2017

BakerJQ commented Jun 25, 2017

drogbababa commented Jun 25, 2017

BakerJQ commented Jun 25, 2017

drogbababa commented Jun 25, 2017

BakerJQ commented Jun 25, 2017

drogbababa commented Jun 25, 2017

BakerJQ commented Jun 27, 2017

drogbababa commented Jun 27, 2017