Android仿微信红包动画

最新推荐文章于 2024-03-30 11:42:46 发布
最新推荐文章于 2024-03-30 11:42:46 发布
阅读量7.4k 收藏 2
点赞数 5
分类专栏： 问题小结 android UI 文章标签： ANDROID UI 安卓UI Android 动画
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ssbby/article/details/56677393
版权

项目需要研究了一下微信红包动画，即硬币转动的效果，原理其实就是三张不同角度的图片利用AnimationDrawable帧动画进行播放，在参考了案例之后，给自己记录一下完成的过程。

1，在XML文件中定义动画：

步骤如下：

①新建 Android 项目

②在drawable目录中新建一个anim.xml(注意文件名小写)

<?xml version="1.0" encoding="utf-8"?>
<animation-list  xmlns:android="http://schemas.android.com/apk/res/android"    android:oneshot="false">
    <item android:drawable="@drawable/bag" android:duration="400"></item>
    <item android:drawable="@drawable/bag1" android:duration="400"></item>
    <item android:drawable="@drawable/bag2" android:duration="400"></item>
</animation-list>

根标签为animation-list，其中oneshot代表着是否只展示一遍，设置为false会不停的循环播放动画根标签下，通过item标签对动画中的每一个图片进行声明 ，android:duration 表示展示所用的该图片的时间长度 ,可通过该参数来设置图片旋转的速度，其他属性可以自行查找资料~

2，设置布局文件，效果以及代码如下 


<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center_vertical|center_horizontal"
    android:background="@drawable/background">

    <!-- 关闭按钮框 -->
    <LinearLayout
        android:id="@+id/top"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1">

        <Button
            android:id="@+id/close"
            android:layout_width="32dp"
            android:layout_height="32dp"
            android:background="@drawable/close"
            android:layout_margin="10dp"/>

    </LinearLayout>

    <!-- 头像以及相关文字 -->
    <LinearLayout
        android:layout_below="@+id/top"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="10"
        android:orientation="vertical">

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="3">

            <ImageButton
                android:id="@+id/head_img"
                android:layout_width="60dp"
                android:layout_height="60dp"
                android:background="@drawable/ic_launcher"
                android:layout_alignParentTop="true"
                android:layout_centerHorizontal="true"/>

            <TextView
                android:id="@+id/name"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="系统用户"
                android:layout_marginTop="10dp"
                android:layout_below="@+id/head_img"
                android:layout_centerHorizontal="true"
                android:textColor="@color/yellow"
                android:textSize="18sp"/>

            <TextView
                android:id="@+id/textView1"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_below="@+id/name"
                android:layout_centerHorizontal="true"
                android:layout_marginTop="5dp"
                android:textSize="15sp"
                android:textColor="@color/yellow2"
                android:text="给你发了一个红包"/>

            <TextView
                android:id="@+id/textView2"
                android:layout_below="@+id/textView1"
                android:layout_centerHorizontal="true"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="20dp"
                android:textColor="@color/yellow"
                android:textSize="23sp"
                android:text="恭喜发财，大吉大利"/>

        </RelativeLayout>

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="3">

            <Button
                android:id="@+id/open_btn"
                android:layout_width="100dp"
                android:layout_height="100dp"
                android:background="@drawable/anim"
                android:layout_marginTop="50dp"
                android:layout_centerHorizontal="true" />

        </RelativeLayout>

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="1">

            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:background="@drawable/blow"
                android:layout_alignParentBottom="true"
                android:layout_centerHorizontal="true"
                android:layout_marginBottom="14dp"
                android:id="@+id/imageView" />

        </RelativeLayout>

    </LinearLayout>

</LinearLayout>


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 GONE
                layout.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 GONE
                layout.findViewById(R.id.close).setVisibility(
                        View.GONE);
            }

            dialog.setContentView(layout);
            return dialog;
        }

    }
}

②在系统style文件中新增一个Diaog 

<style name="Dialog" parent="android:style/Theme.Dialog">
        <!-- <item name="android:background">#00000000</item> -->
        <item name="android:windowBackground">@drawable/red_bg</item>
        <item name="android:windowFrame">@null</item>
        <item name="android:windowNoTitle">true</item>
        <item name="android:windowIsFloating">true</item><!-- 是否漂现在activity上 -->
        <item name="android:windowCloseOnTouchOutside">false</item>
</style>

③在MainActivity中调用自定义的Diaog类并实例化，并且设置弹出的红包占屏幕的比例，不然弹出的红包会占满整个屏幕，红色代码为设置大小代码。

red1.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                LuckeyDialog.Builder builder = new LuckeyDialog.Builder(mContext,R.style.Dialog);//调用style中的Diaog
                builder.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() {
                    @Override
                    public 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.6
                p.width = (int) (d.getWidth() * 0.75); // 宽度设置为屏幕的0.65
                dialogWindow.setAttributes(p);

                dialog.show();
            }
        });

4，完成点击后的两种结果，即抢到和未抢到的两种结果，通过Intent跳转领取成功类或者跳出失败弹窗的简单逻辑即可。
①抢到的效果图，这里界面比较简单就不贴代码了。



②失败弹窗的效果图，这里的自定义弹窗代码与红包弹窗的代码基本相似，区别就在于少了个拆红包按钮而已，布局也相对简单，就不贴出来了，主要在这里面需要使用比例来规划几个部件的位置（参考上面的红包代码），否则无法适配多种屏幕，会出现压缩拉伸变形的情况。



到这里粗略的红包动画效果就基本完成了！当然实际应用中需要用到网络请求之类的，就再按照业务要求加入。

Cory_boyu
关注
专栏目录
Android仿微信红包
kazarf的博客
08-30 4011
七夕已经过完了，啊啊啊啊，又是一个人。无聊看了看之前写的小demo，所以想发个博客记录一下~
android 仿QQ五毛特效之查看红包领取详情界面，android系统开发面试
m0_64382950的博客
12-03 253
WindowManager wm = (WindowManager) context .getSystemService(Context.WINDOW_SERVICE); DisplayMetrics outMetrics = new DisplayMetrics(); wm.getDefaultDisplay().getMetrics(outMetrics); int height = outMetrics.heightPixels; return height; } 需要写一个自定义的ScrollVie
Android仿打开微信红包动画效果实现代码
08-28
主要介绍了Android仿打开微信红包动画效果实现代码,非常不错，具有参考借鉴价值，需要的朋友可以参考下
android仿微信红包动画,Android仿打开微信红包动画效果实现代码
weixin_33270920的博客
05-25 350
首先看下效果：实现原理：准备3张不同角度的图片，通过AnimationDrawable帧动画进行播放即可代码实现：1、编写动画xml文件：根标签为animation-list，其中oneshot代表着是否只展示一遍，设置为false会不停的循环播放动画 根标签下，通过item标签对动画中的每一个图片进行声明android:duration 表示展示所用的该图片的时间长度 ,可通过该参数来设置图片...
仿微信抢红包(js 转)
adai19850204的博客
09-29 238
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>仿微信抢红包</title> <style> html,body,div{margin:0...
Android 仿微信红包动画 平移动画
weixin_45632095的博客
09-25 750
Android 仿微信红包动画 平移动画 先看效果图: 简单思路： 先找好素材，一张红包封面和 “开”这个图片，先用ps将红包图片P成两部分，两个椭圆的样子。“开”要有不同角度的，因为要由帧动画完成。开完之后背景设个随机数。红包封面可以用ps软件p出来，用椭圆选框工具即可。 素材： 目录图： 详细完全代码： 1. xml开动画——用帧动画完成。 这节课有详细讲解 mooc讲解的视频教程保证能听懂，简单易学 <?xml version="1.0" encoding="utf-8"?> &
Android仿硬币转动微信红包动画效果
08-28
综上所述，实现Android中的硬币转动微信红包动画主要涉及`AnimationDrawable`的使用，通过定义帧动画资源，将其应用于视图，然后在代码中启动和控制动画。在实际项目中，可以结合业务需求进行适当调整，以达到更佳的...
Android简单实现仿支付宝新年红包活动页面的动态布局效果
我是紫色紫色的专栏
02-27 6016
转载请注明出处：http://blog.csdn.net/woshizisezise/article/details/50757334大家好，隔了很长一段时间没有更新博客了，有几方面的原因，一是因为年底了在准备换工作的事情，二是因为年底了公司项目需要一个归档和总结的内容，所以做了一个月的开发共通组件的抽取成SDK的工作，内容都是一些平时比较常用的功能模块，比如像登录注册，第三方注册和分享，视频播放等
Android仿微信打开红包动画（逐帧动画）
ffacffac的博客
03-21 3536
本文转自：http://www.cnblogs.com/whoislcj/p/5733740.html Frame Animation（逐帧动画）：        逐帧动画（Frame-by-frame Animations）从字面上理解就是一帧挨着一帧的播放图片，就像放电影一样。和补间动画一样可以通过xml实现也可以通过java代码实现。接下来借助目前项目中的一个开奖的动画来总结如何
简单的实现微信领取红包界面，按钮旋转动画效果。
lixuce1234的博客
07-21 7858
最近在做一下项目，是领取红包的，我们这里仿照的微信的红包领取界面，点击按钮之后立体旋转，然后打开红包： 我这里用的是旋转动画，然后沿着Y轴去旋转，说了这么多，下面来看一下效果： 现在清楚多了把 ，我用自定义了一个动画，找到控件的中心，然后让中心沿着Y轴去旋转，不多说了看代码吧： package com.lixuce.myapplication; import and
仿微信红包打开特效，3D图片翻转
11-07
仿微信抢红包打开特效3D图片翻转
仿微信抢红包dialog和动画
02-26
仿微信抢红包dialog和动画 代码简洁 使用起来特别方便
仿微信打开的红包效果 kotlin
06-01
仿微信动态打开红包的效果，一种是java编写的，运用Android语言；另附demo是kotlin语言，谢谢
安卓仿qq红包领取详情界面动画效果
05-09
安卓仿qq红包领取详情界面动画效果
H5拆红包效果H5拆红包效果
10-06
H5拆红包效果，按钮一直变动大小，点击后翻转，然后弹出红包内容
（仿微信Android）聊天+红包+直播+朋友圈源码发布了
iteye_6343的博客
08-17 762
功能概览：IM聊天单聊/群聊/聊天室--基于环信sdk红包功能：1.一对一红包2.群红包（抢红包、答题红包、专属红包）3.钱包（资金及账户管理）直播功能：Ucloud推流 、Ucloud拉流、电台拉流朋友圈、用户体系、好友体系凡信自己服务器维护管理数据详细介绍（凡信）背景介绍：https://github.com/huangfangyi/FanXin2.0_IMhttp://www.img...
Android 摄像头调用（不含拍照）(1)
最新发布
2401_84009065的博客
03-30 710
感觉现在好多人都在说什么安卓快凉了，工作越来越难找了。又是说什么程序员中年危机啥的，为啥我这年近30的老农根本没有这种感觉，反倒觉得那些贩卖焦虑的都是瞎j8扯谈。当然，职业危机意识确实是要有的，但根本没到那种草木皆兵的地步好吗？Android凉了都是弱者的借口和说辞。虽然 Android 没有前几年火热了，已经过去了会四大组件就能找到高薪职位的时代了。
Android 仿微信红包动画特效一分钟搞定
简单玩家丶的博客
12-20 7490
简单来说你多在微信中发几个群红包就能有一些思路，但是有些特定的状态需要注意前后端配合。 搞了半个小时TMD没有把视频转换成GIF，直接上照片吧，醉了~ 1.支付完成之后会出现第一个图，打开第二个图的时候当前界面是有一个动画效果的，可以微信中发个群红包试试~ 无非是图片抖两下，这里将第二张的红包总布局设置Animation xml version="1.0" encoding= "U
android带动画的饼图,Android部分源码资源共享（视屏转GIF图片工具、仿抖音、仿朋友圈、仿红包、饼状图、引导图，图灵源码等）...
weixin_33420201的博客
05-25 233
视屏转为gif图片工具：下载地址：CSDN 下载1、封装了各项工具类，例如，日志，打印，缓存等，可直接使用项目百度网盘：下载 提取码：fq072、Android高仿抖音1.项目 的build.gralde中添加allprojects{repositories{...maven{url'https://jitpack.io'}}}百度网盘：下载 提取码：zld83、仿微信打开...
评论 6
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值