android 按钮变形动画,Android仿硬币转动微信红包动画效果
项目需要研究了一下微信红包动画,即硬币转动的效果,原理其实就是三张不同角度的图片利用帧动画进行播放,在参考了案例之后,给自己记录一下完成的过程。
1,在XML文件中定义动画:
步骤如下:
①新建 项目
②在目录中新建一个anim.xml(注意文件名小写)
根标签为-list,其中代表着是否只展示一遍,设置为false会不停的循环播放动画根标签下,通过item标签对动画中的每一个图片进行声明 ,: 表示展示所用的该图片的时间长度 ,可通过该参数来设置图片旋转的速度,其他属性可以自行查找资料~
2,设置布局文件,效果以及代码如下
:=""
:=""
:=""
:="|"
:="@/">
:id="@+id/top"
:=""
:="0dp"
:="1">
:id="@+id/close"
:="32dp"
:="32dp"
:="@/close"
:="10dp"/>
:="@+id/top"
:=""
:="0dp"
:="10"
:="">
:=""
:="0dp"
:="3">
:id="@+id/"
:="60dp"
:="60dp"
:="@/"
:p="true"
:tal="true"/>
:id="@+id/name"
:=""
:=""
:text="系统用户"
:="10dp"
:="@+id/"
:tal="true"
:="@color/"
:="18sp"/>
:id="@+id/"
:=""
:=""
:="@+id/name"
:tal="true"
:="5dp"
:="15sp"
:="@color/"
:text="给你发了一个红包"/>
:id="@+id/"
:="@+id/"
:tal="true"
:=""
:=""
:="20dp"
:="@color/"
:="23sp"
:text="恭喜发财,大吉大利"/>
:=""
:="0dp"
:="3">
:id="@+id/"
:="100dp"
:="100dp"
:="@/anim"
:="50dp"
:tal="true" />
:=""
:="0dp"
:="1">
:=""
:=""
:="@/blow"
:ttom="true"
:tal="true"
:="14dp"
:id="@+id/" />
3,实现红包弹窗的效果,效果及代码如下:
步骤如下:
①自定义红包弹窗Diaog类:红色代码部分为启动动画部分
com...;
.app.;
..;
..;
...;
.view.;
.view.;
.view.;
.view.View;
.view.;
.view.;
..;
..;
/**
* 自定义红包弹窗
* by on 2017/2/20.
*/
class {
( ) {
super();
( , int theme) {
super(, theme);
class {
;
name;//发红包者的名称
;
//拆红包按钮
;
ner;
//关闭按钮
;
ener;
( , int ) {
this. = ;
/**
* Set the title from
* @param name
* @
*/
(int name) {
this.name = () .(name);
this;
/**
* Set the title from
* @param name
* @
*/
( name) {
this.name = name;
this;
/**
* Set the and it's
* @param
* @
*/
(int ,
) {
this. = ()
.();
this.ener = ;
this;
( ,
) {
this. = ;
this.ener = ;
this;
/**
* Set the and it's
* @param
* @
*/
(int ,
) {
this. = ()
.();
this.ner = ;
this;
( ,
) {
this. = ;
this.ner = ;
this;
() {
= ()
.(.ICE);
//加载布局
final = new (,R.style.);
View = .(R..open, null);
= () .(R.id.);
//red指的是需要播放动画的控件
= ().();
.start();//启动动画
.(, new .(
.., ..));
//设置发红包者姓名
(() .(R.id.name)).(name);
//设置拆红包的按钮
if ( != null) {
(() .(R.id.))
.();
if (ner != null) {
(() .(R.id.))
.(new View.() {
void (View v) {
ner.(,
.);
});
} else {
// if no just set the to GONE
.(R.id.).(
View.GONE);
//设置关闭按钮
if ( != null) {
(() .(R.id.close))
.();
if (ener != null) {
(() .(R.id.close))
.(new View.() {
void (View v) {
ener.(,
.);
});
} else {
// if no just set the to GONE
.(R.id.close).(
View.GONE);
.();
;
②在系统style文件中新增一个Diaog
@/
@null
true
true
false
③在中调用自定义的Diaog类并实例化,并且设置弹出的红包占屏幕的比例,不然弹出的红包会占满整个屏幕,红色代码为设置大小代码。
red1.(new View.() {
@
void (View view) {
. = new .(,R.style.);//调用style中的Diaog
.("系统");
.("", new .() {
void ( , int which) {
= new (,Open.class);
();
.();
});
.("", new .() {
@
void ( , int i) {
.();
});
= .();
= .();
m = ();
d = m.(); // 获取屏幕宽、高用
. p = .(); // 获取对话框当前的参数值
p. = (int) (d.() * 0.7); // 高度设置为屏幕的0.6
p.width = (int) (d.() * 0.75); // 宽度设置为屏幕的0.65
.(p);
.show();
});
4,完成点击后的两种结果,即抢到和未抢到的两种结果,通过跳转领取成功类或者跳出失败弹窗的简单逻辑即可。
①抢到的效果图,这里界面比较简单就不贴代码了。
②失败弹窗的效果图,这里的自定义弹窗代码与红包弹窗的代码基本相似,区别就在于少了个拆红包按钮而已,布局也相对简单,就不贴出来了,主要在这里面需要使用比例来规划几个部件的位置(参考上面的红包代码),否则无法适配多种屏幕,会出现压缩拉伸变形的情况。
到这里粗略的红包动画效果就基本完成了!当然实际应用中需要用到网络请求之类的,就再按照业务要求加入。
以上所述是小编给大家介绍的仿硬币转动微信红包动画效果,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!