Android 动画可以归纳为以下几种:
- 视图动画(View 动画)
- 帧动画(Frame 动画、Drawable 动画)
- 属性动画
- 触摸反馈动画(Ripple Effect)
- 揭露动画(Reveal Effect)
- 转场动画 & 共享元素(Activity 切换动画)
- 视图状态动画(Animate View State Changes)
- 矢量图动画(Vector 动画)
- 约束布局实现的关键帧动画(ConstraintSet 动画)
下面直接进入主题:
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
案例源码:下载地址