Android仿微信红包动画
项目需要研究了一下微信红包动画,即硬币转动的效果,原理其实就是三张不同角度的图片利用帧动画进行播放,在参考了案例之后,给自己记录一下完成的过程。
1,在XML文件中定义动画:
步骤如下:
①新建 项目
②在目录中新建一个anim.xml(注意文件名小写)
根标签为-list,其中代表着是否只展示一遍,设置为false会不停的循环播放动画根标签下,通过item标签对动画中的每一个图片进行声明 ,: 表示展示所用的该图片的时间长度 ,可通过该参数来设置图片旋转的速度,其他属性可以自行查找资料~
2,设置布局文件,效果以及代码如下
3,实现红包弹窗的效果,效果及代码如下:
步骤如下:
①自定义红包弹窗Diaog类:红色代码部分为启动动画部分
package com.example.xuboyu.luckeymoney;import android.app.Dialog;
import android.content.Context;
import android.content.DialogInterface;
import android.graphics.drawable.AnimationDrawable;
import android.view.Display;
import android.view.Gravity;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.view.WindowManager;
import android.widget.Button;
import android.widget.TextView;/*** 自定义红包弹窗* Created by xuboyu on 2017/2/20.*/public class LuckeyDialog extends Dialog {public LuckeyDialog(Context context) {super(context);}public LuckeyDialog(Context context, int theme) {super(context, theme);}public static class Builder {private Context context;private String name;//发红包者的名称private Button red_page;//拆红包按钮private String openButtonText;private OnClickListener openButtonClickListener;//关闭按钮private String closeButtonText;private OnClickListener closeButtonClickListener;public Builder(Context context, int dialog) {this.context = context;}/*** Set the Dialog title from resource** @param name* @return*/public Builder setName(int name) {this.name = (String) context.getText(name);return this;}/*** Set the Dialog title from String** @param name* @return*/public Builder setName(String name) {this.name = name;return this;}/*** Set the positive button resource and it's listener** @param closeButtonText* @return*/public Builder setCloseButton(int closeButtonText,OnClickListener listener) {this.closeButtonText = (String) context.getText(closeButtonText);this.closeButtonClickListener = listener;return this;}public Builder setCloseButton(String closeButtonText,OnClickListener listener) {this.closeButtonText = closeButtonText;this.closeButtonClickListener = listener;return this;}/*** Set the positive button resource and it's listener** @param openButtonText* @return*/public Builder setOpenButton(int openButtonText,OnClickListener listener) {this.openButtonText = (String) context.getText(openButtonText);this.openButtonClickListener = listener;return this;}public Builder setOpenButton(String openButtonText,OnClickListener listener) {this.openButtonText = openButtonText;this.openButtonClickListener = listener;return this;}public LuckeyDialog create() {LayoutInflater inflater = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);//加载布局final LuckeyDialog dialog = new LuckeyDialog(context,R.style.Dialog);View layout = inflater.inflate(R.layout.open, null);red_page = (Button) layout.findViewById(R.id.open_btn);//red指的是需要播放动画的ImageView控件AnimationDrawable animationDrawable = (AnimationDrawable)red_page.getBackground();animationDrawable.start();//启动动画dialog.addContentView(layout, new ViewGroup.LayoutParams(ViewGroup.LayoutParams.FILL_PARENT, ViewGroup.LayoutParams.WRAP_CONTENT));//设置发红包者姓名((TextView) layout.findViewById(R.id.name)).setText(name);//设置拆红包的按钮if (openButtonText != null) {((Button) layout.findViewById(R.id.open_btn)).setText(openButtonText);if (openButtonClickListener != null) {((Button) layout.findViewById(R.id.open_btn)).setOnClickListener(new View.OnClickListener() {public void onClick(View v) {openButtonClickListener.onClick(dialog, DialogInterface.BUTTON_POSITIVE);}});}} else {// if no confirm button just set the visibility to GONElayout.findViewById(R.id.open_btn).setVisibility(View.GONE);}//设置关闭按钮if (closeButtonText != null) {((Button) layout.findViewById(R.id.close)).setText(closeButtonText);if (closeButtonClickListener != null) {((Button) layout.findViewById(R.id.close)).setOnClickListener(new View.OnClickListener() {public void onClick(View v) {closeButtonClickListener.onClick(dialog,DialogInterface.BUTTON_POSITIVE);}});}} else {// if no confirm button just set the visibility to GONElayout.findViewById(R.id.close).setVisibility(View.GONE);}dialog.setContentView(layout);return dialog;}}
}
②在系统style文件中新增一个Diaog
③在中调用自定义的Diaog类并实例化,并且设置弹出的红包占屏幕的比例,不然弹出的红包会占满整个屏幕,红色代码为设置大小代码。
red1.setOnClickListener(new View.OnClickListener() {@Overridepublic void onClick(View view) {LuckeyDialog.Builder builder = new LuckeyDialog.Builder(mContext,R.style.Dialog);//调用style中的Diaogbuilder.setName("系统");builder.setOpenButton("", new DialogInterface.OnClickListener() {public void onClick(DialogInterface dialog, int which) {Intent intent = new Intent(mContext,Open.class);startActivity(intent);dialog.dismiss();}});builder.setCloseButton("", new DialogInterface.OnClickListener() {@Overridepublic void onClick(DialogInterface dialog, int i) {dialog.dismiss();}});Dialog dialog = builder.create();Window dialogWindow = dialog.getWindow();WindowManager m = getWindowManager();Display d = m.getDefaultDisplay(); // 获取屏幕宽、高用WindowManager.LayoutParams p = dialogWindow.getAttributes(); // 获取对话框当前的参数值p.height = (int) (d.getHeight() * 0.7); // 高度设置为屏幕的0.6p.width = (int) (d.getWidth() * 0.75); // 宽度设置为屏幕的0.65dialogWindow.setAttributes(p);
dialog.show();}});
4,完成点击后的两种结果,即抢到和未抢到的两种结果,通过跳转领取成功类或者跳出失败弹窗的简单逻辑即可。
①抢到的效果图,这里界面比较简单就不贴代码了。
②失败弹窗的效果图,这里的自定义弹窗代码与红包弹窗的代码基本相似,区别就在于少了个拆红包按钮而已,布局也相对简单,就不贴出来了,主要在这里面需要使用比例来规划几个部件的位置(参考上面的红包代码),否则无法适配多种屏幕,会出现压缩拉伸变形的情况。
到这里粗略的红包动画效果就基本完成了!当然实际应用中需要用到网络请求之类的,就再按照业务要求加入。