利用属性动画Animator实现的一个小demo,

这个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);
    }
}
对应的布局文件:
<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>
中间的imageView用到了自定义控件,控件样子是一个圆形,下面是自定义控件的代码:
<?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>

下面是效果图:


以上四张图片自左向右再向下依次为:初始效果,点击红色按钮弹出菜单(向外弹出时有自由落体效果)效果,点击弹出按钮效果,再次点击红色回收菜单效果


  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值