点击弹出图片

最新推荐文章于 2022-06-02 18:13:17 发布

原创最新推荐文章于 2022-06-02 18:13:17 发布 · 666 阅读

CC 4.0 BY-SA版权

本文介绍了一个使用Android动画框架实现手机主界面图标展开与收起效果的应用案例。通过AnimatorSet同步控制多个图标的位置变化，实现了流畅的动画效果。

//main

package com.bwei.cellphonedemo;

import android.animation.AnimatorSet;
import android.animation.ObjectAnimator;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
import android.widget.ImageView;
/*
* 手机主界面收放图片
* */

public class MainActivity extends AppCompatActivity implements View.OnClickListener{

    private ImageView mIvTop;
    private ImageView mIvRight;
    private ImageView mIvBottom;
    private ImageView mIvLeft;
    private ImageView mIvCircle;
    private boolean flag;//false表示未显示，true表示已经显示了

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        initView();
    }

    private void initView() {

        mIvTop = (ImageView) findViewById(R.id.iv_top);
        mIvRight = (ImageView) findViewById(R.id.iv_right);
        mIvBottom = (ImageView) findViewById(R.id.iv_bottom);
        mIvLeft = (ImageView) findViewById(R.id.iv_left);
        mIvCircle = (ImageView) findViewById(R.id.iv_circle);
        mIvCircle.setOnClickListener(this);

    }

    @Override
    public void onClick(View view) {

        switch (view.getId()){
            case R.id.iv_circle:
                if(!flag){

                    ////点击把所有图标都展示出来
                    show();
                }else{
                    //点击把所有图标都收起来
                    dismiss();
                }
                flag=!flag;
                break;
        }

    }
    /*
    * 展示图片
    * */
    private void show() {

        ObjectAnimator tranLeft = ObjectAnimator.ofFloat(mIvLeft, "TranslationX", 0f, -200f);
        ObjectAnimator tranRight = ObjectAnimator.ofFloat(mIvRight, "TranslationX", 0f, 200f);
        ObjectAnimator tranTop = ObjectAnimator.ofFloat(mIvTop, "TranslationY", 0f, -200f);
        ObjectAnimator tranBottom = ObjectAnimator.ofFloat(mIvBottom, "TranslationY", 0f, 200f);

        AnimatorSet animatorSet = new AnimatorSet();
        animatorSet.playTogether(tranBottom, tranLeft, tranRight, tranTop);
        animatorSet.setDuration(2000);
        animatorSet.start();

    }
    /*
    * 收起图片
    * */
    private void dismiss() {
        ObjectAnimator tranLeft = ObjectAnimator.ofFloat(mIvLeft, "TranslationX", -200f, 0f);
        ObjectAnimator tranRight = ObjectAnimator.ofFloat(mIvRight, "TranslationX", 200f, 0f);
        ObjectAnimator tranTop = ObjectAnimator.ofFloat(mIvTop, "TranslationY", -200f, 0f);
        ObjectAnimator tranBottom = ObjectAnimator.ofFloat(mIvBottom, "TranslationY", 200f, 0f);

        AnimatorSet animatorSet = new AnimatorSet();
        animatorSet.playTogether(tranBottom, tranLeft, tranRight, tranTop);
        animatorSet.setDuration(2000);
        animatorSet.start();

    }

}
// 布局
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#11111111"
    tools:context="com.bwei.cellphonedemo.MainActivity">

    <ImageView
        android:id="@+id/iv_top"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:background="@drawable/top" />

    <ImageView
        android:id="@+id/iv_right"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:background="@drawable/right" />

    <ImageView
        android:id="@+id/iv_bottom"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:background="@drawable/bottom" />

    <ImageView
        android:id="@+id/iv_left"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:background="@drawable/left" />

    <ImageView
        android:id="@+id/iv_circle"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:background="@drawable/circle" />

</RelativeLayout>