Android实用视图动画及工具系列之十：漂亮的发布动画，仿新浪首页加号发布微博动画框

最新推荐文章于 2022-08-18 18:34:02 发布

Jaiky_杰哥

最新推荐文章于 2022-08-18 18:34:02 发布

阅读量1w

点赞数 31

分类专栏： Android Android实用视图及工具系列文章标签：发布动画 Android动画弹框 Android自定义视图漂亮的发布动画框新浪发布动画框

本文链接：https://blog.csdn.net/jaikydota163/article/details/52098884

版权

Android 同时被 2 个专栏收录

21 篇文章 0 订阅

订阅专栏

Android实用视图及工具系列

10 篇文章 178 订阅

订阅专栏

实现效果

功能说明

本视图工具的创作灵感来自于新浪微博手机客户端，新浪微博手机客户端的微博发表界面便是类似的实现效果，其实实现方法比较简单，主要用到几种动画效果，如旋转，透明，转移，以及计时器等，将动画效果附加到按钮上，然后将整个界面作为一个Dialog实现就可以了。

适用于新手及新学习Android的码友们，老玩家当然也可以看看，这个还是挺简单挺实用的，在后面会简略介绍实现方法及源代码，同时博客的最后还提供源代码和图片等资源github下载地址。

实现步骤

步骤一：认识安卓动画

在编写下面的代码前，我们先来认识下Android的基本动画，本视图工具主要用到了三种动画形式：

alpha：

透明动画，主要根据alpha值的变化改变控件的透明度

android:fromAlpha 动画开始的透明度，从0.0 --1.0 ，0.0表示全透明，1.0表示完全不透明
android:toAlpha 动画结束时的透明度，也是从0.0 --1.0 ，0.0表示全透明，1.0表示完全不透明

android:duration 动画持续时间，以毫秒为单位
android:fillAfter 如果设置为true，控件动画结束时，将保持动画最后时的状态
android:fillBefore 如果设置为true,控件动画结束时，还原到开始动画前的状态
android:fillEnabled 与android:fillBefore 效果相同，都是在动画结束时，将控件还原到初始化状态
android:repeatCount 重复次数
android:repeatMode 重复类型，有reverse和restart两个值，reverse表示倒序回放，restart表示重新放一遍，必须与repeatCount一起使用才能看到效果。因为这里的意义是重复的类型，即回放时的动作。
android:interpolator 设定插值器，其实就是指定的动作效果，比如弹跳效果等，不在这小节中讲解，后面会单独列出一单讲解。

<?xml version="1.0" encoding="utf-8"?>
<alpha xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="400"
    android:fromAlpha="1.0"
    android:toAlpha="0" />

rotate：

旋转动画，主要以其中心为旋转点，循环匀速旋转

android:fromDegrees 开始旋转的角度位置，正值代表顺时针方向度数，负值代码逆时针方向度数
android:toDegrees 结束时旋转到的角度位置，正值代表顺时针方向度数，负值代码逆时针方向度数
android:pivotX 缩放起点X轴坐标，可以是数值、百分数、百分数p 三种样式，比如 50、50%、50%p，具体意义已在scale标签中讲述，这里就不再重讲
android:pivotY 缩放起点Y轴坐标，可以是数值、百分数、百分数p 三种样式，比如 50、50%、50%p

android:duration 动画持续时间，以毫秒为单位
android:fillAfter 如果设置为true，控件动画结束时，将保持动画最后时的状态
android:fillBefore 如果设置为true,控件动画结束时，还原到开始动画前的状态
android:fillEnabled 与android:fillBefore 效果相同，都是在动画结束时，将控件还原到初始化状态
android:repeatCount 重复次数
android:repeatMode 重复类型，有reverse和restart两个值，reverse表示倒序回放，restart表示重新放一遍，必须与repeatCount一起使用才能看到效果。因为这里的意义是重复的类型，即回放时的动作。
android:interpolator 设定插值器，其实就是指定的动作效果，比如弹跳效果等，不在这小节中讲解，后面会单独列出一单讲解。

<?xml version="1.0" encoding="utf-8"?>
<rotate xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="400"
    android:fromDegrees="0"
    android:toDegrees="-135"
    android:pivotX="50%"
    android:pivotY="50%"
    />

translate：

位移动画，主要以控件的x,y轴为圆点，进行方位移动

android:fromXDelta 起始点X轴坐标，可以是数值、百分数、百分数p 三种样式，比如 50、50%、50%p，具体意义已在scale标签中讲述，这里就不再重讲
android:fromYDelta 起始点Y轴从标，可以是数值、百分数、百分数p 三种样式；
android:toXDelta 结束点X轴坐标
android:toYDelta 结束点Y轴坐标

android:duration 动画持续时间，以毫秒为单位
android:fillAfter 如果设置为true，控件动画结束时，将保持动画最后时的状态
android:fillBefore 如果设置为true,控件动画结束时，还原到开始动画前的状态
android:fillEnabled 与android:fillBefore 效果相同，都是在动画结束时，将控件还原到初始化状态
android:repeatCount 重复次数
android:repeatMode 重复类型，有reverse和restart两个值，reverse表示倒序回放，restart表示重新放一遍，必须与repeatCount一起使用才能看到效果。因为这里的意义是重复的类型，即回放时的动作。
android:interpolator 设定插值器，其实就是指定的动作效果，比如弹跳效果等，不在这小节中讲解，后面会单独列出一单讲解。

<?xml version="1.0" encoding="utf-8"?>
<translate xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="600"
    android:fromYDelta="100%"
    android:interpolator="@android:anim/anticipate_overshoot_interpolator"
    android:toYDelta="0" />

整个Demo项目的结构如下：

步骤二：添加Dialog布局

新建main_dialog_publish.xml布局，添加如下代码：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    <RelativeLayout
        android:id="@+id/mainPublish_dialog_rlMain"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="#eeffffff"
        android:clickable="true" >

        <ImageView
            android:layout_width="220dp"
            android:layout_height="wrap_content"
            android:layout_centerHorizontal="true"
            android:layout_marginTop="60dp"
            android:contentDescription="@null"
            android:scaleType="centerInside"
            android:src="@drawable/mainactivity_publish_worlduc" />

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true"
            android:baselineAligned="false"
            android:orientation="horizontal" >

            <LinearLayout
                android:id="@+id/mainPublish_dialog_llBtnArticle"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:clickable="true"
                android:orientation="vertical"
                android:paddingBottom="70dp"
                android:paddingTop="20dp" >

                <ImageView
                    android:layout_width="55dp"
                    android:layout_height="55dp"
                    android:layout_gravity="center_horizontal"
                    android:contentDescription="@null"
                    android:src="@drawable/mainactivity_dialogpublish_article_selector" />

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center_horizontal"
                    android:layout_marginTop="5dp"
                    android:text="文章"
                    android:textColor="#3E3E3E"
                    android:textSize="13sp" />
            </LinearLayout>

            <LinearLayout
                android:id="@+id/mainPublish_dialog_llBtnMiniBlog"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:clickable="true"
                android:orientation="vertical"
                android:paddingBottom="70dp"
                android:paddingTop="20dp" >

                <ImageView
                    android:layout_width="55dp"
                    android:layout_height="55dp"
                    android:layout_gravity="center_horizontal"
                    android:contentDescription="@null"
                    android:src="@drawable/mainactivity_dialogpublish_miniblog_selector" />

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center_horizontal"
                    android:layout_marginTop="5dp"
                    android:text="微博"
                    android:textColor="#3E3E3E"
                    android:textSize="13sp" />
            </LinearLayout>

            <LinearLayout
                android:id="@+id/mainPublish_dialog_llBtnLetter"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:clickable="true"
                android:orientation="vertical"
                android:paddingBottom="70dp"
                android:paddingTop="20dp" >

                <ImageView
                    android:layout_width="55dp"
                    android:layout_height="55dp"
                    android:layout_gravity="center_horizontal"
                    android:contentDescription="@null"
                    android:src="@drawable/mainactivity_dialogpublish_letter_selector" />

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center_horizontal"
                    android:layout_marginTop="5dp"
                    android:text="私信"
                    android:textColor="#3E3E3E"
                    android:textSize="13sp" />
            </LinearLayout>

            <LinearLayout
                android:id="@+id/mainPublish_dialog_llBtnPhoto"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:clickable="true"
                android:orientation="vertical"
                android:paddingBottom="70dp"
                android:paddingTop="20dp" >

                <ImageView
                    android:layout_width="55dp"
                    android:layout_height="55dp"
                    android:layout_gravity="center_horizontal"
                    android:contentDescription="@null"
                    android:src="@drawable/mainactivity_dialogpublish_photo_selector" />

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center_horizontal"
                    android:layout_marginTop="5dp"
                    android:text="照片"
                    android:textColor="#3E3E3E"
                    android:textSize="13sp" />
            </LinearLayout>
        </LinearLayout>
    </RelativeLayout>

    <LinearLayout
        android:id="@+id/mainPublish_dialog_llBtnMenu"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:clickable="true"
        android:gravity="bottom|center_horizontal"
        android:orientation="vertical"
        android:paddingLeft="10dp"
        android:paddingRight="10dp" >

        <ImageView
            android:id="@+id/mainPublish_dialog_ivMenu"
            android:layout_width="45dp"
            android:layout_height="45dp"
            android:layout_marginBottom="4dp"
            android:contentDescription="@null"
            android:src="@drawable/mainactivity_publish_publish2" />
    </LinearLayout>

</RelativeLayout>

步骤三：添加主代码

新建PublishDialog类，代码如下：

package com.jaiky.publishpopup;

import android.app.Dialog;
import android.content.Context;
import android.os.Bundle;
import android.os.Handler;
import android.view.KeyEvent;
import android.view.View;
import android.view.ViewGroup;
import android.view.WindowManager;
import android.view.animation.AnimationUtils;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.RelativeLayout;

/**
 * Author by Jaiky, Email jaikydota@163.com, Date on 3/2/2015.
 * PS: Not easy to write code, please indicate.
 */
public class PublishDialog extends Dialog {

    private RelativeLayout rlMain;

    private Context context;

    private LinearLayout llBtnArticle, llBtnMiniBlog, llBtnLetter, llBtnPhoto, llBtnMenu;

    private Handler handler;

    private ImageView ivMenu;

    public PublishDialog(Context context) {
        this(context, R.style.main_publishdialog_style);
    }

    private PublishDialog(Context context, int theme) {
        super(context, theme);
        this.context = context;
        init();
    }

    /**
     * 初始化
     */
    private void init() {
        handler = new Handler();
        //填充视图
        setContentView(R.layout.main_dialog_publish);
        rlMain = (RelativeLayout) findViewById(R.id.mainPublish_dialog_rlMain);

        llBtnArticle = (LinearLayout) findViewById(R.id.mainPublish_dialog_llBtnArticle);
        llBtnMiniBlog = (LinearLayout) findViewById(R.id.mainPublish_dialog_llBtnMiniBlog);
        llBtnLetter = (LinearLayout) findViewById(R.id.mainPublish_dialog_llBtnLetter);
        llBtnPhoto = (LinearLayout) findViewById(R.id.mainPublish_dialog_llBtnPhoto);
        llBtnMenu = (LinearLayout) findViewById(R.id.mainPublish_dialog_llBtnMenu);
        ivMenu = (ImageView) findViewById(R.id.mainPublish_dialog_ivMenu);


        llBtnMenu.setOnClickListener(new View.OnClickListener() {

            @Override
            public void onClick(View v) {
                outputDialog();
            }
        });
        rlMain.setOnClickListener(new View.OnClickListener() {

            @Override
            public void onClick(View v) {
                outputDialog();
            }
        });
    }


    /**
     * 进入对话框（带动画）
     */
    private void inputDialog() {
        llBtnArticle.setVisibility(View.INVISIBLE);
        llBtnMiniBlog.setVisibility(View.INVISIBLE);
        llBtnLetter.setVisibility(View.INVISIBLE);
        llBtnPhoto.setVisibility(View.INVISIBLE);
        //背景动画
        rlMain.startAnimation(AnimationUtils.loadAnimation(context, R.anim.mainactivity_fade_in));
        //菜单按钮动画
        ivMenu.startAnimation(AnimationUtils.loadAnimation(context, R.anim.mainactivity_rotate_right));
        //选项动画
        llBtnArticle.setVisibility(View.VISIBLE);
        llBtnArticle.startAnimation(AnimationUtils.loadAnimation(context, R.anim.mainactivity_push_bottom_in));
        handler.postDelayed(new Runnable() {

            @Override
            public void run() {
                llBtnMiniBlog.setVisibility(View.VISIBLE);
                llBtnMiniBlog.startAnimation(AnimationUtils.loadAnimation(context, R.anim.mainactivity_push_bottom_in));
            }
        }, 100);
        handler.postDelayed(new Runnable() {

            @Override
            public void run() {
                llBtnLetter.setVisibility(View.VISIBLE);
                llBtnLetter.startAnimation(AnimationUtils.loadAnimation(context, R.anim.mainactivity_push_bottom_in));
            }
        }, 200);
        handler.postDelayed(new Runnable() {

            @Override
            public void run() {
                llBtnPhoto.setVisibility(View.VISIBLE);
                llBtnPhoto.startAnimation(AnimationUtils.loadAnimation(context, R.anim.mainactivity_push_bottom_in));
            }
        }, 300);
    }


    @Override
    public boolean onKeyDown(int keyCode, KeyEvent event) {
        if (isShowing()) {
            outputDialog();
            return true;
        }
        else {
            return super.onKeyDown(keyCode, event);
        }
    }


    /**
     * 取消对话框（带动画）
     */
    private void outputDialog() {
        //退出动画
        rlMain.startAnimation(AnimationUtils.loadAnimation(context, R.anim.mainactivity_fade_out));
        ivMenu.startAnimation(AnimationUtils.loadAnimation(context, R.anim.mainactivity_rotate_left));
        handler.postDelayed(new Runnable() {

            @Override
            public void run() {
                dismiss();
            }
        }, 400);
        llBtnArticle.startAnimation(AnimationUtils.loadAnimation(context, R.anim.mainactivity_push_bottom_out));
        llBtnArticle.setVisibility(View.INVISIBLE);
        handler.postDelayed(new Runnable() {

            @Override
            public void run() {
                llBtnMiniBlog.startAnimation(AnimationUtils.loadAnimation(context, R.anim.mainactivity_push_bottom_out));
                llBtnMiniBlog.setVisibility(View.INVISIBLE);
            }
        }, 50);
        handler.postDelayed(new Runnable() {

            @Override
            public void run() {
                llBtnLetter.startAnimation(AnimationUtils.loadAnimation(context, R.anim.mainactivity_push_bottom_out));
                llBtnLetter.setVisibility(View.INVISIBLE);
            }
        }, 100);
        handler.postDelayed(new Runnable() {

            @Override
            public void run() {
                llBtnPhoto.startAnimation(AnimationUtils.loadAnimation(context, R.anim.mainactivity_push_bottom_out));
                llBtnPhoto.setVisibility(View.INVISIBLE);
            }
        }, 150);

    }


    @Override
    public void show() {
        super.show();
        inputDialog();
    }

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        //全屏
        WindowManager.LayoutParams params = getWindow().getAttributes();
        params.height = ViewGroup.LayoutParams.MATCH_PARENT;
        params.width = ViewGroup.LayoutParams.MATCH_PARENT;
        getWindow().setAttributes((android.view.WindowManager.LayoutParams) params);
    }


    public PublishDialog setArticleBtnClickListener(android.view.View.OnClickListener clickListener) {
        llBtnArticle.setOnClickListener(clickListener);
        return this;
    }

    public PublishDialog setMiniBlogBtnClickListener(android.view.View.OnClickListener clickListener) {
        llBtnMiniBlog.setOnClickListener(clickListener);
        return this;
    }

    public PublishDialog setLetterBtnClickListener(android.view.View.OnClickListener clickListener) {
        llBtnLetter.setOnClickListener(clickListener);
        return this;
    }

    public PublishDialog setPhotoBtnClickListener(android.view.View.OnClickListener clickListener) {
        llBtnPhoto.setOnClickListener(clickListener);
        return this;
    }
}

--------------------------------------------------------------------------------------------------------------------

获取源代码及资源文件：

https://github.com/jaikydota/Android-PublishPopup

--------------------------------------------------------------------------------------------------------------------

声明

欢迎转载，但请保留文章原始出处
作者：Jaiky_杰哥
出处：http://blog.csdn.net/jaikydota163/article/details/52098884

Jaiky_杰哥

关注

31
点赞
踩
5

收藏

觉得还不错? 一键收藏
6
评论
Android实用视图动画及工具系列之十：漂亮的发布动画，仿新浪首页加号发布微博动画框

Android实用视图动画及工具系列之十：漂亮的发布动画，仿新浪首页加号发布微博动画框。本视图工具的创作灵感来自于新浪微博手机客户端，新浪微博手机客户端的微博发表界面便是类似的实现效果，其实实现方法比较简单，主要用到几种动画效果，如旋转，透明，转移，以及计时器等，将动画效果附加到按钮上，然后将整个界面作为一个Dialog实现就可以了。
复制链接

扫一扫