这个demo只用到了
AnimatorSet和ObjectAnimator:ObjectAnimator的作用是:对某一个属性进行精确的控制.
AnimatorSet的作用是对ObjectAnimator设置的属性进行综合控制,如同时进行,或者精确的控制谁先进行谁后进行等这里要细说一下ObjectAnimator:/** 说明: * ObjectAnimator的大部分方法中,如ofFloat(),ifInt(),ofObject()等方法里有两个参数,第一个参数 * Object 类型的target,为执行动画的控件,这里为imageView,官方的解释为This object should have a * public method on it called setName(), 意思是这个参数对象只要有setXxx()的方法就可以, * 第二个参数为String 类型的propertyName参数,官方对这个参数的解释为where name is the value * of the propertyName parameter,这个的定语where指的就是上一句的setName()方法, * 意思是第二个参数的值为第一个参数的setXxx()方法中的Xxx,以imageView为例:imageView有很多set方法, * 如setBackground();setX();setY();setTranslationX();setTranslationY();setScaleX(); * setScaleY();setRotationX();setRotationY();setPivotX();setPivotY();setAlpha()等等, * 那么第二个参数的值就可以为Background,X,Y,TranslationX,TranslationY;ScaleX,ScaleY, * RotationX,RotationY,PivotX,PivotY,Alpha等,参数值大小写均可.大多数情况下我们用到的值为 * 以下几个: * X x轴最终位置 * Y y轴最终位置 * alpha 透明度 * rotation z轴旋转(平面效果) * rotationX x轴翻转(3D效果) * rotationY y轴翻转(3D效果) * translationX x水平偏移(平面效果) * translationY y水平偏移(平面效果) * ScaleX (注意为)Y轴缩放(3D效果) * ScaleY (注意为)X轴缩放(3D效果) */
对animator.setInterpolator(TimeInterpolator value)方法的参数再作一下说明:
animator.setInterpolator(TimeInterpolator value)方法的参数有如下几个常用值可以设置: * * new BounceInterpolator() 自由落体的效果(到达指定距离回弹几下) * new AccelerateDecelerateInterpolator() 先慢后快再慢(系统默认)* new AccelerateInterpolator() 由慢变快
* new AnticipateInterpolator() 先缓慢往指定方向的反方向移,再加速往指定方向移
* new AnticipateOvershootInterpolator() 先缓慢往指定方向的反方向移,再加速往指定方向移,再缓慢往指 定方向的反方向移
* new DecelerateInterpolator() 由快变慢
* new FastOutLinearInInterpolator() 快速匀速运动
* new FastOutSlowInInterpolator() 先慢后快再慢
* new LinearInterpolator() 缓慢匀速移动
* new LinearOutSlowInInterpolator() 先极快后慢
* new OvershootInterpolator() 快速运动超出指定距离后缓慢返回
*
*/需要用到的主要的知识介绍完毕,下面上代码:
对应的布局文件:package com.example.administrator.animatorandanimation; import android.animation.AnimatorSet; import android.animation.ObjectAnimator; import android.os.Bundle; import android.os.Handler; import android.support.v7.app.AppCompatActivity; import android.view.View; import android.view.animation.BounceInterpolator; import android.view.animation.LinearInterpolator; import android.widget.ImageView; import android.widget.Toast; public class SecondActivity extends AppCompatActivity implements View.OnClickListener { private ImageView image, btn_01, btn_02, btn_03, btn_04; private boolean flag = true;//用来判断按钮点击状态 @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_second); initView(); initEvent(); } @Override public void onClick(View v) { switch (v.getId()) { case R.id.image: if (flag) { AnimatorSet set = new AnimatorSet(); ObjectAnimator animator01 = ObjectAnimator.ofFloat(btn_01, "TranslationX", -140f, 0f); ObjectAnimator animator02 = ObjectAnimator.ofFloat(btn_02, "TranslationX", 140f, 0f); ObjectAnimator animator03 = ObjectAnimator.ofFloat(btn_03, "TranslationY", -140f, 0f); ObjectAnimator animator04 = ObjectAnimator.ofFloat(btn_04, "TranslationY", 140f, 0f); animator01.setInterpolator(new BounceInterpolator());//设置为自由落体运动 animator02.setInterpolator(new BounceInterpolator()); animator03.setInterpolator(new BounceInterpolator()); animator04.setInterpolator(new BounceInterpolator()); viewStateVisible();//设置控件可见 set.playTogether(animator01, animator02, animator03, animator04);//让动画效果同时实现 set.setDuration(500);//动画持续时间 set.start();//开启动画 flag = false;//把标志置为false,用于回收弹出去的控件 } else { AnimatorSet set = new AnimatorSet(); ObjectAnimator animator01 = ObjectAnimator.ofFloat(btn_01, "TranslationX", 0f, -140f); ObjectAnimator animator02 = ObjectAnimator.ofFloat(btn_02, "TranslationX", 0f, 140f); ObjectAnimator animator03 = ObjectAnimator.ofFloat(btn_03, "TranslationY", 0f, -140f); ObjectAnimator animator04 = ObjectAnimator.ofFloat(btn_04, "TranslationY", 0f, 140f); animator01.setInterpolator(new LinearInterpolator());//设置为缓慢匀速直线运动 animator02.setInterpolator(new LinearInterpolator()); animator03.setInterpolator(new LinearInterpolator()); animator04.setInterpolator(new LinearInterpolator()); set.playTogether(animator01, animator02, animator03, animator04); set.setDuration(500); set.start(); //设置一个延时,作用就是当再次点击按钮回收这些控件时,不会立刻消失,而是会延时250ms在消失 Handler handler = new Handler(); handler.postDelayed(new Runnable() { @Override public void run() { viewStateGone(); } }, 250); flag = true;//把标志置为true,用于再次释放控件 } break; case R.id.btn_01: Toast.makeText(this, "btn_01", Toast.LENGTH_SHORT).show(); //viewStateGone(); break; case R.id.btn_02: Toast.makeText(this, "btn_02", Toast.LENGTH_SHORT).show(); //viewStateGone(); break; case R.id.btn_03: Toast.makeText(this, "btn_03", Toast.LENGTH_SHORT).show(); //viewStateGone(); break; case R.id.btn_04: Toast.makeText(this, "btn_04", Toast.LENGTH_SHORT).show(); //viewStateGone(); break; } } private void initView() { image = (ImageView) findViewById(R.id.image); btn_01 = (ImageView) findViewById(R.id.btn_01); btn_02 = (ImageView) findViewById(R.id.btn_02); btn_03 = (ImageView) findViewById(R.id.btn_03); btn_04 = (ImageView) findViewById(R.id.btn_04); } private void initEvent() { image.setOnClickListener(this); btn_01.setOnClickListener(this); btn_02.setOnClickListener(this); btn_03.setOnClickListener(this); btn_04.setOnClickListener(this); } //view的状态为不可见 public void viewStateGone() { btn_01.setVisibility(View.GONE); btn_02.setVisibility(View.GONE); btn_03.setVisibility(View.GONE); btn_04.setVisibility(View.GONE); } //view的状态为可见 public void viewStateVisible() { btn_01.setVisibility(View.VISIBLE); btn_02.setVisibility(View.VISIBLE); btn_03.setVisibility(View.VISIBLE); btn_04.setVisibility(View.VISIBLE); } }
中间的imageView用到了自定义控件,控件样子是一个圆形,下面是自定义控件的代码:<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:paddingLeft="@dimen/activity_horizontal_margin" android:paddingRight="@dimen/activity_horizontal_margin" android:paddingTop="@dimen/activity_vertical_margin" android:paddingBottom="@dimen/activity_vertical_margin" > <ImageView android:id="@+id/image" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerInParent="true" android:src="@drawable/button_shape"/> <ImageView android:id="@+id/btn_01" android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/btn_01" android:layout_centerInParent="true" android:layout_alignLeft="@+id/image" android:layout_marginLeft="140dp" android:visibility="gone" /> <ImageView android:id="@+id/btn_02" android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/btn_02" android:layout_centerInParent="true" android:layout_alignRight="@+id/image" android:layout_marginRight="140dp" android:visibility="gone" /> <ImageView android:id="@+id/btn_03" android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/btn_03" android:layout_centerInParent="true" android:layout_alignTop="@+id/image" android:layout_marginTop="140dp" android:visibility="gone" /> <ImageView android:id="@+id/btn_04" android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/btn_04" android:layout_centerInParent="true" android:layout_alignBottom="@+id/image" android:layout_marginBottom="140dp" android:visibility="gone" /> </RelativeLayout>
<?xml version="1.0" encoding="utf-8"?> <layer-list xmlns:android="http://schemas.android.com/apk/res/android"> <!--先画一个白色的大圆,再画一个红色的小圆,然后用红色小圆覆盖白色的大圆,就形成这种效果--> <item> <shape android:shape="oval"> <corners android:radius="90dp"/> <solid android:color="@android:color/white"/> <size android:width="100dp" android:height="100dp"/> </shape> </item> <item android:bottom="8dp" android:right="8dp" android:top="8dp" android:left="8dp"> <!--当按钮被点击时,颜色为深红色--> <selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:state_pressed="true"> <shape android:shape="oval"> <corners android:radius="90dp"/> <solid android:color="#e66b4f"/> <size android:width="92dp" android:height="92dp"/> </shape> </item> <!--当按钮未被点击时,颜色为浅红色--> <item> <shape android:shape="oval"> <corners android:radius="90dp"/> <solid android:color="#f3876f"/> <size android:width="92dp" android:height="92dp"/> </shape> </item> </selector> </item> </layer-list>
下面是效果图:以上四张图片自左向右再向下依次为:初始效果,点击红色按钮弹出菜单(向外弹出时有自由落体效果)效果,点击弹出按钮效果,再次点击红色回收菜单效果