Android 仿支付宝蚂蚁森林动画效果

最新推荐文章于 2023-08-24 17:47:11 发布

冰糖葫芦三剑客

最新推荐文章于 2023-08-24 17:47:11 发布

阅读量2k

点赞数 2

分类专栏：动画

本文链接：https://blog.csdn.net/shenggaofei/article/details/103751755

版权

动画专栏收录该内容

24 篇文章 0 订阅

订阅专栏

Android 动画可以归纳为以下几种：

下面直接进入主题：

Android 仿支付宝蚂蚁森林动画效果：（一个简单的视图动画+约束布局 ConstraintLayout ）

案例源码：下载地址

1.主函数：

import android.animation.Animator;
import android.animation.AnimatorSet;
import android.animation.ObjectAnimator;
import android.animation.ValueAnimator;
import android.graphics.Color;
import android.os.Bundle;
import android.view.Gravity;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.view.animation.Animation;
import android.view.animation.AnimationUtils;
import android.view.animation.BounceInterpolator;
import android.widget.Button;
import android.widget.EditText;
import android.widget.ImageView;
import android.widget.ProgressBar;
import android.widget.TextView;
import android.widget.Toast;

import com.example.mysgfceshicase.R;
import com.example.mysgfceshicase.sgf.activity.popup.SimpleTooltip;
import com.example.mysgfceshicase.sgf.activity.popup.SimpleTooltipUtils;
import com.example.mysgfceshicase.sgf.activity.sgfmenu.ButtonData;
import com.example.mysgfceshicase.sgf.activity.sgfmenu.ButtonEventListener;
import com.example.mysgfceshicase.sgf.activity.sgfmenu.SectorMenuButton;
import com.example.mysgfceshicase.sgf.utils.RoundedRectProgressBar;
import com.wyt.searchbox.SearchFragment;
import com.wyt.searchbox.custom.IOnSearchClickListener;

import java.util.ArrayList;
import java.util.List;
import java.util.Timer;
import java.util.TimerTask;

import androidx.appcompat.app.AppCompatActivity;
import androidx.appcompat.widget.Toolbar;
import androidx.constraintlayout.widget.ConstraintLayout;
import androidx.core.content.ContextCompat;
import butterknife.BindView;
import butterknife.ButterKnife;

/**
 * 自定义ProgressBar
 * https://blog.csdn.net/u013015161/article/details/50493333?utm_source=blogxgwz4
 * https://blog.csdn.net/yechaoa/article/details/82388637
 * https://github.com/jfeinstein10/SlidingMenu qq侧滑框
 * <p>
 * https://github.com/huazhiyuan2008/RecyclerViewCardGallery
 * https://github.com/HelloHuDi/ViewCapture
 * https://github.com/ppamorim/PrismView
 * https://github.com/robertapengelly92/android-viewhelper
 *
 * https://github.com/Rance935/SectorMenu 一个炫酷的扇形菜单
 * https://github.com/oguzbilgener/CircularFloatingActionMenu
 * https://github.com/facebook/rebound
 * https://www.csdn.net/article/2014-04-22/2819435-facebook-mobile-open-source-projects
 *
 * https://github.com/MartinRGB/RapidInterpolator
 * https://blog.csdn.net/weixin_44248652/article/details/87277216
 * https://blog.csdn.net/easkshark/article/details/46627505
 *
 * 卡片翻转动画和仿支付宝蚂蚁森林水滴收集动画，还有知识星球的云标签，外加微信支付接口调试
 * https://github.com/Onperson/TestAnimationWxpay
 * 仿支付宝蚂蚁森林效果
 * https://github.com/xiaohaibin/CustomWaterView
 * https://github.com/93Laer/WaterView
 * https://blog.csdn.net/yangyong915/article/details/79012025
 * https://github.com/wuxiaojun123/CustomProject
 * https://blog.csdn.net/u010648159/article/details/80297953
 *
 *
 * https://blog.csdn.net/u010126792/article/details/85302050   动画
 *
 *
 */
public class MySgfActivity extends AppCompatActivity implements Toolbar.OnMenuItemClickListener, IOnSearchClickListener, View.OnClickListener {

    @BindView(R.id.toolbar)
    Toolbar toolbar;
    @BindView(R.id.search_info)
    TextView searchInfo;

    private RoundedRectProgressBar bar;
    private Button btn;
    private int progress;
    private Timer timer;
    private int count = 0;
    private SearchFragment searchFragment;
    private ProgressBar progressBar;
    private TextView tvBar;
//    private ImageView imMiddleChicken;
    private SectorMenuButton imMiddleChicken;
    private ImageView imChickenFood,imChickenFoodTopLeft;
    private ImageView imChickenFoodBottomLeft,imChickenFoodUpperRight,imChickenFoodBottomRight;
    private ImageView imMiddleChicken1;
    private ImageView imMiddleChicken2;
    private ImageView imMiddleChicken3;
    private ImageView imMiddleChicken4;
    private ConstraintLayout mConstraintLayout;
    private Animation loadAnimation,loadAnimation_t1,loadAnimation_s;
    private Animation loadAnimation_t2,loadAnimation_t3,loadAnimationUpperRightBack,loadAnimation_t4,loadAnimationTopLeftBack,loadAnimationBottomRightBack,loadAnimationBottomLeftBack;
    private Animation loadAnimation2;
    private Animation loadAnimation3;
    private Animation loadAnimation4;
    private ObjectAnimator objectAnimatorX;
    private ObjectAnimator objectAnimatorY;
    private ImageView imageView2;
    private List<ImageView> imageViewList = new ArrayList<>();
    private ImageView im_close,im_more;
    private TextView tvXin;
    private int foodNum = 0;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_my_sgf);
        ButterKnife.bind(this);

        im_close = findViewById(R.id.im_close);
        tvXin = findViewById(R.id.tv_xin);
        im_more = findViewById(R.id.im_more);
        bar = (RoundedRectProgressBar) findViewById(R.id.bar);
        progressBar = (ProgressBar) findViewById(R.id.progressBar);
        tvBar = (TextView) findViewById(R.id.tv_bar);
        mConstraintLayout = (ConstraintLayout) findViewById(R.id.mConstraintLayout);
        imageView2 = (ImageView) findViewById(R.id.imageView2);
//        imMiddleChicken = (ImageView) findViewById(R.id.imMiddleChicken);//中间的鸡儿
        imMiddleChicken = (SectorMenuButton) findViewById(R.id.imMiddleChicken);//中间的鸡儿
        imChickenFood = (ImageView) findViewById(R.id.imChickenFood);//右边的鸡食
        imChickenFoodBottomLeft = (ImageView) findViewById(R.id.imChickenFoodBottomLeft);//右边的鸡食
        imChickenFoodTopLeft = (ImageView) findViewById(R.id.imChickenFoodTopLeft);//右边的鸡食
        imChickenFoodUpperRight = (ImageView) findViewById(R.id.imChickenFoodUpperRight);//右边的鸡食
        imChickenFoodBottomRight = (ImageView) findViewById(R.id.imChickenFoodBottomRight);//右边的鸡食
        imMiddleChicken1 = (ImageView) findViewById(R.id.imMiddleChicken1);//中间隐藏的鸡
        imMiddleChicken2 = (ImageView) findViewById(R.id.imMiddleChicken2);//中间隐藏的鸡
        imMiddleChicken3 = (ImageView) findViewById(R.id.imMiddleChicken3);//中间隐藏的鸡
        imMiddleChicken4 = (ImageView) findViewById(R.id.imMiddleChicken4);//中间隐藏的鸡
//        btn = (Button) findViewById(R.id.btn);

        imMiddleChicken.setOnClickListener(this);
        imChickenFood.setOnClickListener(this);
        imMiddleChicken1.setOnClickListener(this);
        imMiddleChicken2.setOnClickListener(this);
        imMiddleChicken3.setOnClickListener(this);
        imMiddleChicken4.setOnClickListener(this);
        im_close.setOnClickListener(this);
        im_more.setOnClickListener(this);
        imChickenFoodBottomLeft.setOnClickListener(this);
        imChickenFoodTopLeft.setOnClickListener(this);
        imChickenFoodUpperRight.setOnClickListener(this);
        imChickenFoodBottomRight.setOnClickListener(this);

        //代码中设置progressBar
        progressBar.setProgressDrawable(ContextCompat.getDrawable(this, R.drawable.progress_bar));
        progressBar.setProgress(88);
        tvBar.setText("88");

        floatAnim(imChickenFood,1000);
        topOrBottom(im_close);
        leftOrRight(im_more);
//        startPopsAnimTrans();
//        loadAnimation_t = AnimationUtils.loadAnimation(this, R.anim.translate_right_top);
        loadAnimation_t1 = AnimationUtils.loadAnimation(this, R.anim.translate_left_bottom);
        loadAnimation_t2 = AnimationUtils.loadAnimation(this, R.anim.translate_left_top);
        loadAnimation_t3 = AnimationUtils.loadAnimation(this, R.anim.translate_right_top);
        loadAnimation_t4 = AnimationUtils.loadAnimation(this, R.anim.translate_right_bottom);
        loadAnimationUpperRightBack = AnimationUtils.loadAnimation(this, R.anim.translate_right_upper_back);
        loadAnimationBottomRightBack = AnimationUtils.loadAnimation(this, R.anim.translate_right_bottom_back);
        loadAnimationTopLeftBack = AnimationUtils.loadAnimation(this, R.anim.translate_left_top2_back);
        loadAnimationBottomLeftBack = AnimationUtils.loadAnimation(this, R.anim.translate_left_bottom_back);
        loadAnimation_s = AnimationUtils.loadAnimation(this, R.anim.scale_zhankai);
        loadAnimation = AnimationUtils.loadAnimation(this, R.anim.anim_top_in);
        loadAnimation2 = AnimationUtils.loadAnimation(this, R.anim.anim_top_in);
        loadAnimation3 = AnimationUtils.loadAnimation(this, R.anim.anim_top_in);
        loadAnimation4 = AnimationUtils.loadAnimation(this, R.anim.anim_top_in);
        imMiddleChicken2.setVisibility(View.GONE);
        imMiddleChicken3.setVisibility(View.GONE);
        imMiddleChicken4.setVisibility(View.GONE);


        final SimpleTooltip tooltip = new SimpleTooltip.Builder(this)
                .anchorView(imageView2)
                .text(R.string.btn_modal_custom)
                .gravity(Gravity.TOP)
                .dismissOnOutsideTouch(false)
                .dismissOnInsideTouch(false)
                .modal(true)
                .animated(true)
                .animationDuration(2000)
                .animationPadding(SimpleTooltipUtils.pxFromDp(50))
                .contentView(R.layout.tooltip_custom, R.id.tv_text)
                .focusable(true)
                .build();
        final EditText ed = tooltip.findViewById(R.id.ed_text);

        tooltip.findViewById(R.id.btn_next).setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v2) {
                if (tooltip.isShowing())
                    tooltip.dismiss();
                new SimpleTooltip.Builder(imageView2.getContext())
                        .anchorView(imageView2)
                        .text(ed.getText())
                        .gravity(Gravity.BOTTOM)
                        .build()
                        .show();
            }
        });

        tooltip.show();


        tvXin.startAnimation(loadAnimation_s);
//        imMiddleChicken1.startAnimation(loadAnimation);
        initCenterSectorMenuButton();
        loadAnimation.setAnimationListener(new Animation.AnimationListener() {
            @Override
            public void onAnimationStart(Animation animation) {
                imMiddleChicken1.setVisibility(View.VISIBLE);
            }

            @Override
            public void onAnimationEnd(Animation animation) {
                imMiddleChicken2.setVisibility(View.VISIBLE);
                imMiddleChicken3.setVisibility(View.VISIBLE);
                imMiddleChicken4.setVisibility(View.VISIBLE);
                imMiddleChicken2.startAnimation(loadAnimation2);
                imMiddleChicken3.startAnimation(loadAnimation3);
                imMiddleChicken4.startAnimation(loadAnimation4);
            }

            @Override
            public void onAnimationRepeat(Animation animation) {

            }
        });

        toolbar.setTitle("SearchDialog");//标题
        setSupportActionBar(toolbar);

        searchFragment = SearchFragment.newInstance();

        toolbar.setOnMenuItemClickListener(this);

        searchFragment.setOnSearchClickListener(this);
        reset();
    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        //加载菜单文件
        getMenuInflater().inflate(R.menu.menu_main, menu);
        return true;
    }

    @Override
    public boolean onMenuItemClick(MenuItem item) {
        switch (item.getItemId()) {
            case R.id.action_search://点击搜索
                searchFragment.showFragment(getSupportFragmentManager(), SearchFragment.TAG);
                break;
        }
        return true;
    }

    @Override
    public void OnSearchClick(String keyword) {
        searchInfo.setText(keyword);
    }

    /**
     * 进度条从头到尾跑一次
     */
    private void reset() {
        progress = 0;
        timer = new Timer();
        timer.schedule(new TimerTask() {
            @Override
            public void run() {
                bar.setProgress(progress);
                progress++;
                if (progress > 100) {
                    timer.cancel();
                }
            }
        }, 0, 30);
    }

    @Override
    public void onClick(View v) {
        switch (v.getId()) {
            case R.id.imMiddleChicken:
                int visibility = imMiddleChicken1.getVisibility();
//                if(imMiddleChicken1!=null &&imMiddleChicken1.getVisibility() == View.GONE){
                if (count == 0) {
//                    mConstraintLayout.setBackgroundColor(getResources().getColor(R.color.white));
                    mConstraintLayout.setBackgroundColor(Color.TRANSPARENT);
                    mConstraintLayout.setBackgroundColor(getResources().getColor(R.color.transparent));
                    mConstraintLayout.getBackground().setAlpha(35);//0~255透明度值
//                    imMiddleChicken1.startAnimation(loadAnimation);
                    imMiddleChicken1.setVisibility(View.VISIBLE);
                    imMiddleChicken2.setVisibility(View.VISIBLE);
                    imMiddleChicken3.setVisibility(View.VISIBLE);
                    imMiddleChicken4.setVisibility(View.VISIBLE);
                    imageViewList.clear();
                    imageViewList.add(imMiddleChicken1);
                    imageViewList.add(imMiddleChicken2);
                    imageViewList.add(imMiddleChicken3);
                    imageViewList.add(imMiddleChicken4);
                    //for循环来开始小图标的出现动画
//                    showOpenAnim(80);
//                    for (int i = 0; i < imageViewList.size(); i++) {
//
//                        AnimatorSet set = new AnimatorSet();
//                        //标题1与x轴负方向角度为20°，标题2为100°，转换为弧度
//                        double a = -Math.cos(20 * Math.PI / 180 * (1 * 2 + 1));
//                        double b = -Math.sin(20 * Math.PI / 180 * (2 * 2 + 1));
//                        double x = a * dip2px(80);
//                        double y = b * dip2px(80);
//
//                        set.playTogether(
//                                ObjectAnimator.ofFloat(imageViewList.get(i), "translationX", (float) (x * 0.25), (float) x),
//                                ObjectAnimator.ofFloat(imageViewList.get(i), "translationY", (float) (y * 0.25), (float) y)
//                                , ObjectAnimator.ofFloat(imageViewList.get(i), "alpha", 0, 1).setDuration(2000)
//                        );
//                        set.setInterpolator(new BounceInterpolator());
//                        set.setDuration(500).setStartDelay(100);
//                        set.start();
//
//                        set.addListener(new Animator.AnimatorListener() {
//                            @Override
//                            public void onAnimationStart(Animator animation) {
//
//                            }
//
//                            @Override
//                            public void onAnimationEnd(Animator animation) {
//
//                                //菜单状态置打开
                            isMenuOpen = true;
//                            }
//
//                            @Override
//                            public void onAnimationCancel(Animator animation) {
//
//                            }
//
//                            @Override
//                            public void onAnimationRepeat(Animator animation) {
//
//                            }
//                        });
//                }

                        count = 1;

                } else if (count == 1) {
                    setHideView();
                    showCloseAnim(80);
                    count = 0;
                }


                break;
            case R.id.imChickenFood:
                if(foodNum == 0){
                    foodNum =1;
                    imChickenFoodBottomLeft.startAnimation(loadAnimation_t1);
                    imChickenFoodTopLeft.startAnimation(loadAnimation_t2);
                    imChickenFoodUpperRight.startAnimation(loadAnimation_t3);
                    imChickenFoodBottomRight.startAnimation(loadAnimation_t4);
                }else if(foodNum == 1){
                    foodNum =0;
                    imChickenFoodBottomLeft.startAnimation(loadAnimationBottomLeftBack);//左下
                    imChickenFoodTopLeft.startAnimation(loadAnimationTopLeftBack);//左上
                    imChickenFoodUpperRight.startAnimation(loadAnimationUpperRightBack);//右上
                    imChickenFoodBottomRight.startAnimation(loadAnimationBottomRightBack);//（右下）
                }

                break;
            case R.id.imMiddleChicken1:
                setHideView();
                break;
            case R.id.imMiddleChicken2:
                setHideView();
                break;
            case R.id.imMiddleChicken3:
                setHideView();
                break;
            case R.id.imMiddleChicken4:
                setHideView();
                break;
            case R.id.im_close:
                finish();
                break;
            case R.id.im_more:
                showToast("更多");
                break;
            case R.id.imChickenFoodBottomLeft:
                showToast("imChickenFoodBottomLeft");
                break;
            case R.id.imChickenFoodTopLeft:
                showToast("imChickenFoodTopLeft");
                break;
            case R.id.imChickenFoodUpperRight:
                showToast("imChickenFoodUpperRight");
                break;
            case R.id.imChickenFoodBottomRight:
                showToast("imChickenFoodBottomRight");
                break;
            default:
                break;
        }
    }

    private void setHideView() {
        mConstraintLayout.setBackgroundColor(getResources().getColor(R.color.white));
        mConstraintLayout.getBackground().setAlpha(0);//0~255透明度值
        imMiddleChicken1.setVisibility(View.GONE);
        imMiddleChicken2.setVisibility(View.GONE);
        imMiddleChicken3.setVisibility(View.GONE);
        imMiddleChicken4.setVisibility(View.GONE);
//        loadAnimation.cancel();
//        loadAnimation2.cancel();
//        loadAnimation3.cancel();
//        loadAnimation4.cancel();
    }

    /**
     * 设置平移动画
     */
    private void startPopsAnimTrans() {
        if (objectAnimatorX == null) {
            float[] x = {0f, 60f, 120f, 240f};
            float[] y = {0f, 30f, 220f, 90f};
//            ObjectAnimator translationX = ObjectAnimator.ofFloat(imMiddleChicken4, "translationX", x);
            objectAnimatorX = ObjectAnimator.ofFloat(imageView2, "translationX", x);
            objectAnimatorX.setDuration(2000);
            objectAnimatorY = ObjectAnimator.ofFloat(imageView2, "translationY", y);
            objectAnimatorY.setDuration(2000);
        }
        objectAnimatorX.start();
        objectAnimatorY.start();
    }

    private int dip2px(int value) {
        float density = getResources()
                .getDisplayMetrics().density;
        return (int) (density * value + 0.5f);
    }

    //https://blog.csdn.net/tangxueqin/article/details/79843135
    //打开扇形菜单的属性动画， dp为半径长度
    private void showOpenAnim(int dp) {
        imMiddleChicken1.setVisibility(View.VISIBLE);
        imMiddleChicken2.setVisibility(View.VISIBLE);
        imMiddleChicken3.setVisibility(View.VISIBLE);
        imMiddleChicken4.setVisibility(View.VISIBLE);


        //for循环来开始小图标的出现动画
        for (int i = 0; i < imageViewList.size(); i++) {
            AnimatorSet set = new AnimatorSet();
            //标题1与x轴负方向角度为20°，标题2为100°，转换为弧度
            double a = -Math.cos(20 * Math.PI / 180 * (i * 2 + 1));
            double b = -Math.sin(20 * Math.PI / 180 * (i * 2 + 1));
            double x = a * dip2px(dp);
            double y = b * dip2px(dp);

            set.playTogether(
                    ObjectAnimator.ofFloat(imageViewList.get(i), "translationX", (float) (x * 0.25), (float) x),
                    ObjectAnimator.ofFloat(imageViewList.get(i), "translationY", (float) (y * 0.25), (float) y)
                    , ObjectAnimator.ofFloat(imageViewList.get(i), "alpha", 0, 1).setDuration(2000)
            );
            set.setInterpolator(new BounceInterpolator());
            set.setDuration(500).setStartDelay(100);
            set.start();

            set.addListener(new Animator.AnimatorListener() {
                @Override
                public void onAnimationStart(Animator animation) {

                }

                @Override
                public void onAnimationEnd(Animator animation) {

                    //菜单状态置打开
//                    isMenuOpen = true;
                }

                @Override
                public void onAnimationCancel(Animator animation) {

                }

                @Override
                public void onAnimationRepeat(Animator animation) {

                }
            });
        }
    }

    //转动加号大图标本身45°
//        ObjectAnimator rotate = ObjectAnimator.ofFloat(imgPublish, "rotation", 0, 90).setDuration(300);
//        rotate.setInterpolator(new BounceInterpolator());
//        rotate.start();

    //关闭扇形菜单的属性动画，参数与打开时相反
    private void showCloseAnim(int dp) {


        //for循环来开始小图标的出现动画
        for (int i = 0; i < imageViewList.size(); i++) {
            AnimatorSet set = new AnimatorSet();
            double a = -Math.cos(20 * Math.PI / 180 * (i * 2 + 1));
            double b = -Math.sin(20 * Math.PI / 180 * (i * 2 + 1));
            double x = a * dip2px(dp);
            double y = b * dip2px(dp);

            set.playTogether(
                    ObjectAnimator.ofFloat(imageViewList.get(i), "translationX", (float) x, (float) (x * 0.25)),
                    ObjectAnimator.ofFloat(imageViewList.get(i), "translationY", (float) y, (float) (y * 0.25)),
                    ObjectAnimator.ofFloat(imageViewList.get(i), "alpha", 1, 0).setDuration(2000)
            );
//      set.setInterpolator(new AccelerateInterpolator());
            set.setDuration(500);
            set.start();

            set.addListener(new Animator.AnimatorListener() {
                @Override
                public void onAnimationStart(Animator animation) {

                }

                @Override
                public void onAnimationEnd(Animator animation) {

                    imMiddleChicken1.setVisibility(View.GONE);
                    imMiddleChicken2.setVisibility(View.GONE);
                    imMiddleChicken3.setVisibility(View.GONE);
                    imMiddleChicken4.setVisibility(View.GONE);

                    //菜单状态置关闭
//                    isMenuOpen = false;
                }

                @Override
                public void onAnimationCancel(Animator animation) {

                }

                @Override
                public void onAnimationRepeat(Animator animation) {

                }
            });
        }
    }
    private void initCenterSectorMenuButton() {
        final List<ButtonData> buttonDatas = new ArrayList<>();
        int[] drawable = {R.mipmap.ji, R.mipmap.xiaoji,
                R.mipmap.xiaoji1, R.mipmap.xiaoji2, R.mipmap.xiaoji3,
                R.mipmap.jitui, R.mipmap.xiaoji3, R.mipmap.ji,
                R.mipmap.xiaoji};
        for (int i = 0; i < 9; i++) {
            ButtonData buttonData = ButtonData.buildIconButton(this, drawable[i], 0);
            buttonData.setBackgroundColorId(this, R.color.colorAccent);
            buttonDatas.add(buttonData);
        }
        imMiddleChicken.setButtonDatas(buttonDatas);
        setListener(imMiddleChicken);
    }
    private void setListener(final SectorMenuButton button) {
        button.setButtonEventListener(new ButtonEventListener() {
            @Override
            public void onButtonClicked(int index) {
                showToast("button" + index);
            }

            @Override
            public void onExpand() {
//                showToast("onExpand");
            }

            @Override
            public void onCollapse() {
//                showToast("onCollapse");
            }
        });
    }

    private void showToast(String text) {
        Toast.makeText(MySgfActivity.this, text, Toast.LENGTH_SHORT).show();
    }
    /**
     * 上下浮动的动画
     * @param view
     * @param delay
     */
    private void floatAnim(View view,int delay){
        List<Animator> animators = new ArrayList<>();
        ObjectAnimator translationXAnim = ObjectAnimator.ofFloat(view, "translationX", -6.0f,6.0f,-6.0f);
        translationXAnim.setDuration(1500);
        translationXAnim.setRepeatCount(ValueAnimator.INFINITE);//无限循环
//        translationXAnim.setRepeatMode(ValueAnimator.INFINITE);//
        translationXAnim.start();
        animators.add(translationXAnim);
        ObjectAnimator translationYAnim = ObjectAnimator.ofFloat(view, "translationY", -3.0f,3.0f,-3.0f);
        translationYAnim.setDuration(1000);
        translationYAnim.setRepeatCount(ValueAnimator.INFINITE);
//        translationYAnim.setRepeatMode(ValueAnimator.INFINITE);
        translationYAnim.start();
        animators.add(translationYAnim);

        AnimatorSet btnSexAnimatorSet = new AnimatorSet();
        btnSexAnimatorSet.playTogether(animators);
        btnSexAnimatorSet.setStartDelay(delay);
        btnSexAnimatorSet.start();
    }
    /**
     * 左右浮动动画
     * @param view
     */
    private void leftOrRight(View view){
        ObjectAnimator translationXAnim = ObjectAnimator.ofFloat(view, "translationX", -6.0f,6.0f,-6.0f);
        translationXAnim.setDuration(1500);
        translationXAnim.setRepeatCount(ValueAnimator.INFINITE);//无限循环
//        translationXAnim.setRepeatMode(ValueAnimator.INFINITE);//
        translationXAnim.start();
    }

    /**
     * 上下浮动动画
     * @param view
     */
    private void topOrBottom(View view){
        ObjectAnimator translationYAnim = ObjectAnimator.ofFloat(view, "translationY", -3.0f,3.0f,-3.0f);
        translationYAnim.setDuration(1500);
        translationYAnim.setRepeatCount(ValueAnimator.INFINITE);
//        translationYAnim.setRepeatMode(ValueAnimator.INFINITE);
        translationYAnim.start();
    }

}

2.布局：

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/mConstraintLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <androidx.appcompat.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/colorPrimary"
        app:layout_scrollFlags="scroll|enterAlways"
        tools:ignore="MissingConstraints" />

    <TextView
        android:id="@+id/search_info"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="80dp"
        android:text="蚂蚁庄园"
        android:textColor="@color/blue"
        android:textSize="15sp"
        app:layout_constraintDimensionRatio="4:3"
        app:layout_constraintHorizontal_bias="0.044"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        tools:ignore="MissingConstraints" />

    <TextView
        android:layout_width="150dp"
        android:layout_height="50dp"
        android:layout_marginTop="124dp"
        android:background="@drawable/pos0"
        app:layout_constraintDimensionRatio="4:3"
        app:layout_constraintHorizontal_bias="0.154"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <ImageView
        android:id="@+id/cat_image"
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:layout_marginTop="124dp"
        android:src="@mipmap/touxiang"
        app:layout_constraintDimensionRatio="4:3"
        app:layout_constraintHorizontal_bias="0.044"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <ImageView
        android:id="@+id/im_mingci"
        android:layout_width="20dp"
        android:layout_height="20dp"
        android:layout_marginLeft="15dp"
        android:layout_marginTop="164dp"
        android:src="@mipmap/dengji"
        app:layout_constraintDimensionRatio="4:3"
        app:layout_constraintHorizontal_bias="0.044"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/tv_paihang"
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:layout_marginLeft="5dp"
        android:layout_marginTop="124dp"
        android:background="@mipmap/xin"
        android:gravity="center"
        android:src="@mipmap/touxiang"
        android:text="8"
        app:layout_constraintStart_toEndOf="@+id/cat_image"
        android:textColor="@color/white"
        app:layout_constraintDimensionRatio="4:3"
        app:layout_constraintHorizontal_bias="0.194"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/tv_xin"
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:layout_marginLeft="5dp"
        android:layout_marginTop="124dp"
        android:background="@mipmap/xin"
        android:gravity="center"
        android:src="@mipmap/touxiang"
        android:text="2"
        android:textColor="@color/white"
        app:layout_constraintDimensionRatio="4:3"
        app:layout_constraintHorizontal_bias="0.334"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintStart_toEndOf="@+id/tv_paihang"
        app:layout_constraintTop_toTopOf="parent" />

    <ImageView
        android:id="@+id/cat_image0"
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:layout_marginTop="323dp"
        android:src="@mipmap/touxiang"
        app:layout_constraintDimensionRatio="4:3"
        app:layout_constraintHorizontal_bias="0.961"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <ImageView
        android:id="@+id/cat_image0_top"
        android:layout_width="20dp"
        android:layout_height="20dp"
        android:layout_marginTop="323dp"
        android:src="@mipmap/close"
        app:layout_constraintDimensionRatio="4:3"
        app:layout_constraintHorizontal_bias="0.961"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <ImageView
        android:id="@+id/cat_image1"
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:layout_marginTop="260dp"
        android:src="@mipmap/touxiang"
        app:layout_constraintDimensionRatio="4:3"
        app:layout_constraintHorizontal_bias="0.961"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <ImageView
        android:id="@+id/cat_image1_top"
        android:layout_width="20dp"
        android:layout_height="20dp"
        android:layout_marginTop="260dp"
        android:src="@mipmap/close"
        app:layout_constraintDimensionRatio="4:3"
        app:layout_constraintHorizontal_bias="0.961"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <ImageView
        android:id="@+id/cat_image2"
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:layout_marginTop="196dp"
        android:src="@mipmap/touxiang"
        app:layout_constraintDimensionRatio="4:3"
        app:layout_constraintHorizontal_bias="0.961"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <ImageView
        android:id="@+id/cat_image2_top"
        android:layout_width="20dp"
        android:layout_height="20dp"
        android:layout_marginTop="196dp"
        android:src="@mipmap/close"
        app:layout_constraintDimensionRatio="4:3"
        app:layout_constraintHorizontal_bias="0.961"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <ImageView
        android:id="@+id/cat_image3"
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:layout_marginTop="124dp"
        android:src="@mipmap/touxiang"
        app:layout_constraintDimensionRatio="4:3"
        app:layout_constraintHorizontal_bias="0.961"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <ImageView
        android:id="@+id/cat_image3_top"
        android:layout_width="20dp"
        android:layout_height="20dp"
        android:layout_marginTop="124dp"
        android:src="@mipmap/close"
        app:layout_constraintDimensionRatio="4:3"
        app:layout_constraintHorizontal_bias="0.961"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:layout_width="80dp"
        android:layout_height="30dp"
        android:layout_marginTop="64dp"
        android:background="@drawable/pos0"
        app:layout_constraintDimensionRatio="4:3"
        app:layout_constraintHorizontal_bias="0.961"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <ImageView
        android:id="@+id/im_more"
        android:layout_width="20dp"
        android:layout_height="20dp"
        android:layout_marginTop="68dp"
        android:layout_marginRight="20dp"
        android:src="@mipmap/more"
        app:layout_constraintDimensionRatio="4:3"
        app:layout_constraintHorizontal_bias="0.961"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="@+id/im_close"
        app:layout_constraintTop_toTopOf="parent" />

    <ImageView
        android:id="@+id/im_close"
        android:layout_width="20dp"
        android:layout_height="20dp"
        android:layout_marginTop="68dp"
        android:layout_marginRight="10dp"
        android:src="@mipmap/close"
        app:layout_constraintDimensionRatio="4:3"
        app:layout_constraintHorizontal_bias="0.961"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <!--    底部按钮-->
<!--    HorizontalScrollView设置长条背景-->
<!--    android:scrollbarTrackVertical="@drawable/seek_blue_bg"-->
<!--    设置短条背景-->
<!--    android:scrollbarThumbVertical="@drawable/seek"-->
<!--    设置滚动条位置-->
<!--    android:scrollbarStyle=”outsideInset”-->
    <HorizontalScrollView
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:scrollbars="none"
        android:scrollbarTrackVertical="@drawable/banner_selector_point_yes"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintDimensionRatio="4:3"
        app:layout_constraintHorizontal_bias="0.041"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/cat_image"
        app:layout_constraintVertical_bias="0.905"
        tools:ignore="MissingConstraints">

        <androidx.constraintlayout.widget.ConstraintLayout
            android:layout_width="match_parent"
            android:layout_marginRight="10dp"
            android:layout_height="match_parent">


            <ImageView
                android:id="@+id/im_01"
                android:layout_width="50dp"
                android:layout_height="50dp"
                android:src="@mipmap/pengyouquan"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintDimensionRatio="4:3"
                app:layout_constraintHorizontal_bias="0.041"
                app:layout_constraintLeft_toLeftOf="parent"
                app:layout_constraintRight_toRightOf="parent"
                app:layout_constraintVertical_bias="0.905" />

            <ImageView
                android:layout_width="20dp"
                android:layout_height="20dp"
                android:src="@mipmap/close"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintDimensionRatio="4:3"
                app:layout_constraintHorizontal_bias="0.136"
                app:layout_constraintLeft_toLeftOf="parent"
                app:layout_constraintRight_toRightOf="parent"
                app:layout_constraintTop_toTopOf="parent"
                app:layout_constraintVertical_bias="0.0" />

            <ImageView
                android:id="@+id/im_03"
                android:layout_width="50dp"
                android:layout_height="50dp"
                android:layout_marginLeft="10dp"
                android:src="@mipmap/pengyouquan"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintLeft_toLeftOf="parent"
                app:layout_constraintRight_toRightOf="parent"
                app:layout_constraintStart_toEndOf="@+id/im_02"
                app:layout_constraintVertical_bias="0.904" />

            <ImageView
                android:layout_width="20dp"
                android:layout_height="20dp"
                android:src="@mipmap/close"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintDimensionRatio="4:3"
                app:layout_constraintLeft_toLeftOf="parent"
                app:layout_constraintRight_toRightOf="parent"
                app:layout_constraintTop_toTopOf="parent"
                app:layout_constraintVertical_bias="0.0" />

            <ImageView
                android:id="@+id/im_02"
                android:layout_width="50dp"
                android:layout_height="50dp"
                android:layout_marginLeft="10dp"
                android:src="@mipmap/pengyouquan"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintDimensionRatio="4:3"
                app:layout_constraintLeft_toLeftOf="parent"
                app:layout_constraintRight_toRightOf="parent"
                app:layout_constraintStart_toEndOf="@+id/im_01"
                app:layout_constraintVertical_bias="0.905" />

            <ImageView
                android:layout_width="20dp"
                android:layout_height="20dp"
                android:src="@mipmap/close"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintDimensionRatio="4:3"
                app:layout_constraintHorizontal_bias="0.33"
                app:layout_constraintLeft_toLeftOf="parent"
                app:layout_constraintRight_toRightOf="parent"
                app:layout_constraintTop_toTopOf="parent"
                app:layout_constraintVertical_bias="0.0" />

            <ImageView
                android:id="@+id/im_04"
                android:layout_width="50dp"
                android:layout_height="50dp"
                android:layout_marginLeft="10dp"
                android:src="@mipmap/pengyouquan"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintLeft_toLeftOf="parent"
                app:layout_constraintRight_toRightOf="parent"
                app:layout_constraintStart_toEndOf="@+id/im_03"
                app:layout_constraintVertical_bias="0.905" />

            <ImageView
                android:layout_width="20dp"
                android:layout_height="20dp"
                android:src="@mipmap/close"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintDimensionRatio="4:3"
                app:layout_constraintHorizontal_bias="0.678"
                app:layout_constraintLeft_toLeftOf="parent"
                app:layout_constraintRight_toRightOf="parent"
                app:layout_constraintTop_toTopOf="parent"
                app:layout_constraintVertical_bias="0.0" />

            <ImageView
                android:id="@+id/im_05"
                android:layout_width="50dp"
                android:layout_height="50dp"
                android:layout_marginLeft="10dp"
                android:src="@mipmap/pengyouquan"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintLeft_toLeftOf="parent"
                app:layout_constraintRight_toRightOf="parent"
                app:layout_constraintStart_toEndOf="@+id/im_04"
                app:layout_constraintVertical_bias="0.905" />

            <ImageView
                android:layout_width="20dp"
                android:layout_height="20dp"
                android:src="@mipmap/close"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintDimensionRatio="4:3"
                app:layout_constraintHorizontal_bias="0.853"
                app:layout_constraintLeft_toLeftOf="parent"
                app:layout_constraintRight_toRightOf="parent"
                app:layout_constraintTop_toTopOf="parent"
                app:layout_constraintVertical_bias="0.0" />

            <ImageView
                android:id="@+id/im_06"
                android:layout_width="50dp"
                android:layout_height="50dp"
                android:layout_marginRight="10dp"
                android:layout_marginLeft="10dp"
                android:src="@mipmap/pengyouquan"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintLeft_toLeftOf="parent"
                app:layout_constraintRight_toRightOf="parent"
                app:layout_constraintStart_toEndOf="@+id/im_05" />

            <ImageView
                android:layout_width="20dp"
                android:layout_height="20dp"
                android:src="@mipmap/close"
                android:visibility="gone"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintHorizontal_bias="1.0"
                app:layout_constraintLeft_toLeftOf="parent"
                app:layout_constraintRight_toRightOf="parent"
                app:layout_constraintTop_toTopOf="parent"
                app:layout_constraintVertical_bias="0.0" />
        </androidx.constraintlayout.widget.ConstraintLayout>
    </HorizontalScrollView>


    <com.example.mysgfceshicase.sgf.utils.RoundedRectProgressBar
        android:id="@+id/bar"
        android:layout_width="100dp"
        android:layout_height="18dp"
        android:progress="50"
        app:backColor="#E6E6E6"
        app:barColor="#33CC99"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintDimensionRatio="4:3"
        app:layout_constraintHorizontal_bias="0.12"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/cat_image"
        app:layout_constraintVertical_bias="0.681"
        app:textColor="#FFFFFF" />

    <ProgressBar
        android:id="@+id/progressBar"
        style="?android:attr/progressBarStyleHorizontal"
        android:layout_width="100dp"
        android:layout_height="18dp"
        android:max="100"
        android:progress="50"
        android:progressDrawable="@drawable/progress_bar"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintDimensionRatio="4:3"
        app:layout_constraintHorizontal_bias="0.12"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/cat_image"
        app:layout_constraintVertical_bias="0.728" />

    <TextView
        android:id="@+id/tv_bar"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="30dp"
        android:gravity="center"
        android:progressDrawable="@drawable/progress_bar"
        android:text="100"
        android:textColor="@color/blue"
        android:textSize="15sp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintDimensionRatio="4:3"
        app:layout_constraintHorizontal_bias="0.12"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/cat_image"
        app:layout_constraintVertical_bias="0.728" />


    <ImageView
        android:id="@+id/imChickenFoodBottomLeft"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@mipmap/xiaoji"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintDimensionRatio="4:3"
        app:layout_constraintHorizontal_bias="0.832"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/cat_image"
        app:layout_constraintVertical_bias="0.611" />
    <ImageView
        android:id="@+id/imChickenFoodTopLeft"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@mipmap/xiaoji"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintDimensionRatio="4:3"
        app:layout_constraintHorizontal_bias="0.832"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/cat_image"
        app:layout_constraintVertical_bias="0.611" />
    <ImageView
        android:id="@+id/imChickenFoodUpperRight"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@mipmap/xiaoji"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintDimensionRatio="4:3"
        app:layout_constraintHorizontal_bias="0.832"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/cat_image"
        app:layout_constraintVertical_bias="0.611" />
    <ImageView
        android:id="@+id/imChickenFoodBottomRight"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@mipmap/xiaoji"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintDimensionRatio="4:3"
        app:layout_constraintHorizontal_bias="0.832"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/cat_image"
        app:layout_constraintVertical_bias="0.611" />
    <ImageView
        android:id="@+id/imChickenFood"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@mipmap/xiaoji"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintDimensionRatio="4:3"
        app:layout_constraintHorizontal_bias="0.832"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/cat_image"
        app:layout_constraintVertical_bias="0.611" />


<!--    <ImageView-->
<!--        android:id="@+id/imMiddleChicken"-->
<!--        android:layout_width="wrap_content"-->
<!--        android:layout_height="wrap_content"-->
<!--        android:src="@mipmap/ji"-->
<!--        app:layout_constraintBottom_toBottomOf="parent"-->
<!--        app:layout_constraintDimensionRatio="4:3"-->
<!--        app:layout_constraintHorizontal_bias="0.498"-->
<!--        app:layout_constraintLeft_toLeftOf="parent"-->
<!--        app:layout_constraintRight_toRightOf="parent"-->
<!--        app:layout_constraintTop_toBottomOf="@+id/cat_image"-->
<!--        app:layout_constraintVertical_bias="0.58" />-->
    <com.example.mysgfceshicase.sgf.activity.sgfmenu.SectorMenuButton
        android:id="@+id/imMiddleChicken"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:aebAnimDurationMillis="175"
        app:aebBlurBackground="true"
        app:aebBlurRadius="10"
        app:aebButtonElevation="0dp"
        app:aebButtonGapDp="60dp"
        app:aebEndAngleDegree="360"
        app:aebIsSelectionMode="false"
        app:aebMainButtonRotateAnimDurationMillis="300"
        app:aebMainButtonRotateDegree="0"
        app:aebMainButtonSizeDp="50dp"
        app:aebRippleEffect="true"
        app:aebStartAngleDegree="0"
        app:aebSubButtonSizeDp="50dp"
        android:src="@mipmap/ji"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintDimensionRatio="4:3"
        app:layout_constraintHorizontal_bias="0.498"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/cat_image"
        app:layout_constraintVertical_bias="0.58" />

    <ImageView
        android:id="@+id/imMiddleChicken1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@mipmap/xiaoji1"
        android:visibility="gone"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintDimensionRatio="4:3"
        app:layout_constraintHorizontal_bias="0.717"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/cat_image"
        app:layout_constraintVertical_bias="0.498" />

    <ImageView
        android:id="@+id/imMiddleChicken2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@mipmap/xiaoji2"
        android:visibility="gone"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintDimensionRatio="4:3"
        app:layout_constraintHorizontal_bias="0.799"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/cat_image"
        app:layout_constraintVertical_bias="0.639" />

    <ImageView
        android:id="@+id/imMiddleChicken3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@mipmap/xiaoji3"
        android:visibility="gone"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintDimensionRatio="4:3"
        app:layout_constraintHorizontal_bias="0.253"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/cat_image"
        app:layout_constraintVertical_bias="0.498" />


    <ImageView
        android:id="@+id/imageView2"
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:src="@mipmap/touxiang"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintDimensionRatio="4:3"
        app:layout_constraintHorizontal_bias="0.173"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/cat_image"
        app:layout_constraintVertical_bias="0.611" />

    <ImageView
        android:id="@+id/imageView2_bottom"
        android:layout_width="20dp"
        android:layout_height="20dp"
        android:src="@mipmap/close"
        app:layout_constraintBottom_toBottomOf="@+id/imageView2"
        app:layout_constraintDimensionRatio="4:3"
        app:layout_constraintHorizontal_bias="0.199"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/cat_image"
        app:layout_constraintVertical_bias="1.0" />

    <ImageView
        android:id="@+id/imMiddleChicken4"
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:src="@mipmap/jitui"
        android:visibility="gone"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintDimensionRatio="4:3"
        app:layout_constraintHorizontal_bias="0.193"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/cat_image"
        app:layout_constraintVertical_bias="0.639" />

    <Switch
        android:id="@+id/switch2"
        style="@style/Theme.MyTheme"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="180dp"
        android:text="Switch"
        app:layout_constraintDimensionRatio="4:3"
        app:layout_constraintHorizontal_bias="0.044"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        tools:ignore="MissingConstraints" />

    <androidx.appcompat.widget.SwitchCompat
        android:id="@+id/switch3"
        style="@style/MySwitch"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="210dp"
        android:text="Switch"
        app:layout_constraintDimensionRatio="4:3"
        app:layout_constraintHorizontal_bias="0.044"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        tools:ignore="MissingConstraints" />


</androidx.constraintlayout.widget.ConstraintLayout>

3.xml动画文件：

（展开动画效果）

R.anim.translate_left_bottom：

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="1000"
    android:fillAfter="true"
    android:interpolator="@android:anim/overshoot_interpolator">
    <translate
        android:duration="1000"
        android:fillAfter="true"
        android:fromXDelta="0"
        android:fromYDelta="0"
        android:toXDelta="-80%"
        android:toYDelta="50%" />
    <scale
        android:fromXScale="0.0"
        android:fromYScale="0.0"
        android:pivotX="50%"
        android:pivotY="50%"
        android:toXScale="1.0"
        android:toYScale="1.0" />
    <alpha
        android:fromAlpha="0.5"
        android:toAlpha="1" />
    <!--平移至右下方-->
</set>

R.anim.translate_left_top：

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="1000"
    android:fillAfter="true"
    android:interpolator="@android:anim/overshoot_interpolator">
    <translate
        android:duration="1000"
        android:fillAfter="true"
        android:fromXDelta="0"
        android:fromYDelta="0"
        android:toXDelta="-80%"
        android:toYDelta="-50%" />
    <scale
        android:fromXScale="0.0"
        android:fromYScale="0.0"
        android:pivotX="50%"
        android:pivotY="50%"
        android:toXScale="1.0"
        android:toYScale="1.0" />
    <alpha
        android:fromAlpha="0.5"
        android:toAlpha="1" />
    <!--平移至右下方-->
</set>

R.anim.translate_right_top：

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="1000"
    android:fillAfter="true"
    android:interpolator="@android:anim/overshoot_interpolator">
    <translate
        android:duration="1000"
        android:fillAfter="true"
        android:fromXDelta="0"
        android:fromYDelta="0"
        android:toXDelta="80%"
        android:toYDelta="-50%" />
    <scale
        android:fromXScale="0.0"
        android:fromYScale="0.0"
        android:pivotX="50%"
        android:pivotY="50%"
        android:toXScale="1.0"
        android:toYScale="1.0" />
    <alpha
        android:fromAlpha="0.5"
        android:toAlpha="1" />
    <!--平移至右下方-->
</set>

R.anim.translate_right_bottom：

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="1000"
    android:fillAfter="true"
    android:interpolator="@android:anim/overshoot_interpolator">
    <translate
        android:duration="1000"
        android:fillAfter="true"
        android:fromXDelta="0"
        android:fromYDelta="0"
        android:toXDelta="80%"
        android:toYDelta="50%" />
    <scale
        android:fromXScale="0.0"
        android:fromYScale="0.0"
        android:pivotX="50%"
        android:pivotY="50%"
        android:toXScale="1.0"
        android:toYScale="1.0" />
    <alpha
        android:fromAlpha="0.5"
        android:toAlpha="1" />
    <!--平移至右下方-->
</set>

（关闭动画效果）

R.anim.translate_right_upper_back：

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="1000"
    android:fillAfter="true"
    android:interpolator="@android:anim/overshoot_interpolator">
    <translate
        android:duration="1000"
        android:fillAfter="true"
        android:fromXDelta="80"
        android:fromYDelta="-50%"
        android:toXDelta="1"
        android:toYDelta="1" />
    <scale
        android:fromXScale="1.0"
        android:fromYScale="1.0"
        android:toXScale="0.0"
        android:pivotX="50%"  android:pivotY="50%"
        android:toYScale="0.0" />
    <alpha
        android:fromAlpha="1"
        android:toAlpha="0" />
    <!--关闭动画效果，从右上角平移到0坐标，渐变缩放-->
</set>

R.anim.translate_right_bottom_back：

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="1000"
    android:fillAfter="true"
    android:interpolator="@android:anim/overshoot_interpolator">
    <translate
        android:duration="1000"
        android:fillAfter="true"
        android:fromXDelta="50%"
        android:fromYDelta="50%"
        android:toXDelta="1"
        android:toYDelta="1" />
    <scale
        android:fromXScale="1.0"
        android:fromYScale="1.0"
        android:toXScale="0.0"
        android:pivotX="50%"  android:pivotY="50%"
        android:toYScale="0.0" />
    <alpha
        android:fromAlpha="1"
        android:toAlpha="0" />
    <!--关闭动画效果，从右下角平移到0坐标，渐变缩放-->
</set>

R.anim.translate_left_top2_back：

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="1000"
    android:fillAfter="true"
    android:interpolator="@android:anim/overshoot_interpolator">
    <translate
        android:duration="1000"
        android:fillAfter="true"
        android:fromXDelta="-80%"
        android:fromYDelta="-50%"
        android:toXDelta="1"
        android:toYDelta="1" />
    <scale
        android:fromXScale="1.0"
        android:fromYScale="1.0"
        android:toXScale="0.0"
        android:pivotX="50%"  android:pivotY="50%"
        android:toYScale="0.0" />
    <alpha
        android:fromAlpha="1"
        android:toAlpha="0" />
    <!--关闭动画效果，从左上角平移到0坐标，渐变缩放-->
</set>

R.anim.translate_left_bottom_back：

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="1000"
    android:fillAfter="true"
    android:interpolator="@android:anim/overshoot_interpolator">
    <translate
        android:duration="1000"
        android:fillAfter="true"
        android:fromXDelta="-50%"
        android:fromYDelta="50%"
        android:toXDelta="1"
        android:toYDelta="1" />
    <scale
        android:fromXScale="1.0"
        android:fromYScale="1.0"
        android:toXScale="0.0"
        android:pivotX="50%"  android:pivotY="50%"
        android:toYScale="0.0" />
    <alpha
        android:fromAlpha="1"
        android:toAlpha="0" />
    <!--关闭动画效果，从左下角平移到0坐标，渐变缩放-->
</set>

当然，你也可以在代码中实现动画效果，记得加上插值器参考https://blog.csdn.net/shenggaofei/article/details/102766201

案例源码：下载地址

冰糖葫芦三剑客

关注

2
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
Android 仿支付宝蚂蚁森林动画效果

Android 动画可以归纳为以下几种：视图动画（View 动画）帧动画（Frame 动画、Drawable 动画）属性动画触摸反馈动画（Ripple Effect）揭露动画（Reveal Effect）转场动画 & 共享元素（Activity 切换动画）视图状态动画（Animate View State Changes）矢量图动画（Vector 动画） ...
复制链接

扫一扫

专栏目录