introduce

The project of the company includes IM module, which contains the function of red envelope. When opening red envelope, I felt that it was too monotonous and not fun if the button was not rotated, so I referred to the red envelope of wechat, and the word “open” was rotated when opening it. Here is the main use of frame animation, first on the effect:

The implementation of rotation animation

At the beginning, AnimationDrawable was used and animation-list was defined. Although the above results could be achieved, it was found that the animation was not particularly smooth, and some of it was sluggish. Finally, I found FrameAnimation on Github. Its design idea is to store image resources in arrays, and then switch them through the set period. In this way, the performance is higher than using AnimationDrawable, the memory consumption is smaller, and the animation is relatively smooth.

The use of FrameAnimation

Defines an array of image resources

 private int[] mImgResIds = new int[]{
            R.mipmap.icon_open_red_packet1,
            R.mipmap.icon_open_red_packet2,
            R.mipmap.icon_open_red_packet3,
            R.mipmap.icon_open_red_packet4,
            R.mipmap.icon_open_red_packet5,
            R.mipmap.icon_open_red_packet6,
            R.mipmap.icon_open_red_packet7,
            R.mipmap.icon_open_red_packet7,
            R.mipmap.icon_open_red_packet8,
            R.mipmap.icon_open_red_packet9,
            R.mipmap.icon_open_red_packet4,
            R.mipmap.icon_open_red_packet10,
            R.mipmap.icon_open_red_packet11,
    };
    
Copy the code

Each frame is a different Angle picture of the button

Create a FrameAnimation object

  mFrameAnimation = new FrameAnimation(mIvOpen, mImgResIds, 125, true);
        mFrameAnimation.setAnimationListener(new FrameAnimation.AnimationListener() {
            @Override
            public void onAnimationStart() {
                Log.i(""."start");
            }

            @Override
            public void onAnimationEnd() {
                Log.i(""."end");
            }

            @Override
            public void onAnimationRepeat() {
                Log.i(""."repeat");
            }

            @Override
            public void onAnimationPause() { mIvOpen.setBackgroundResource(R.mipmap.icon_open_red_packet1); }});Copy the code

A FrameAnimation allows you to set up a listener for certain times during animation execution.

Click monitor of the button in the pop-up box

 @OnClick({R.id.iv_close, R.id.iv_open})
    public void onClick(View view) {
        switch (view.getId()) {
            case R.id.iv_close:
                stopAnim();
                if(mListener ! = null) { mListener.onCloseClick(); }break;

            case R.id.iv_open:
                if(mFrameAnimation ! = null) {// If it is rotating, it returns directlyreturn;
                }

                startAnim();

                if(mListener ! = null) { mListener.onOpenClick(); }break; }}Copy the code

Callback to OnRedPacketDialogClickListener interface, when open the button click play box, if you have already in the rotation, you do not need to rotate.

A red envelope pops up in the Activity

    
     public void showDialog(View view){
        RedPacketEntity entity = new RedPacketEntity("chaychan"."http://upload.51qianmai.com/20171205180511192.png"."Good luck, chicken tonight.");
        showRedPacketDialog(entity);
    }

    public void showRedPacketDialog(RedPacketEntity entity) {
        if (mRedPacketDialogView == null) {
            mRedPacketDialogView = View.inflate(this, R.layout.dialog_red_packet, null);
            mRedPacketViewHolder = new RedPacketViewHolder(this, mRedPacketDialogView);
            mRedPacketDialog = new CustomDialog(this, mRedPacketDialogView, R.style.custom_dialog);
            mRedPacketDialog.setCancelable(false);
        }

        mRedPacketViewHolder.setData(entity);
        mRedPacketViewHolder.setOnRedPacketDialogClickListener(new OnRedPacketDialogClickListener() {
            @Override
            public void onCloseClick() {
                mRedPacketDialog.dismiss();
            }

            @Override
            public void onOpenClick() {// get a red envelope, call interface}}); mRedPacketDialog.show(); }Copy the code

The relevant business logic after clicking the button can be implemented in the onOpenClick() callback.

Changes to the FrameAnimation

FrameAnimation does not have a callback to pause the drawing. If we successfully open the red envelope or the request fails (network exception), the button should pause the rotation. In this case, we need to listen for pause and switch the picture to the first frame in the callback.

Here, imitation wechat red envelope open animation is introduced, in order to facilitate your reference, I will also upload the demo code to Github.

Github.com/chaychan/Re…