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

版权声明:本文为Jaiky_杰哥原创,转载请注明出处。This blog is written by Jaiky, reproduced please indicate. https://blog.csdn.net/jaikydota163/article/details/52098884

实现效果



功能说明

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

--------------------------------------------------------------------------------------------------------------------
获取源代码及资源文件:
--------------------------------------------------------------------------------------------------------------------

声明

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

阅读更多

没有更多推荐了,返回首页