当前位置：首页 > 资讯 > 技术文档

Android仿硬币转动微信红包动画效果

时间：2021-12-25 02:04 编辑：来源：阅读：
扫一扫，手机访问

摘要：Android仿硬币转动微信红包动画效果

项目需要研究了一下微信红包动画，即硬币转动的效果，原理其实就是三张不同角度的图片利用AnimationDrawable帧动画进行播放，在参考了案例之后，给自己记录一下完成的过程。 [b]1，在XML文件中定义动画：[/b] 步骤如下： ①新建 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 表示展示所用的该图片的时间长度 ,可通过该参数来设置图片旋转的速度，其他属性可以自行查找资料~ [b]2，设置布局文件，效果以及代码如下[/b] [img]http://files.jb51.net/file_images/article/201712/2017121110394725.png[/img]

<?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>

[b]3，实现红包弹窗的效果，效果及代码如下：[/b] 步骤如下： ①自定义红包弹窗Diaog类：红色代码部分为启动动画部分 [img]http://files.jb51.net/file_images/article/201712/2017121110394726.png[/img]

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); 
   <span style="color:#ff0000;">//red指的是需要播放动画的ImageView控件 
   AnimationDrawable animationDrawable = (AnimationDrawable)red_page.getBackground(); 
   animationDrawable.start();//启动动画</span> 
   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(); 
     } 
    }); 
    <span style="color:#ff0000;">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); 
</span> 
    dialog.show(); 
   } 
  });

4，完成点击后的两种结果，即抢到和未抢到的两种结果，通过Intent跳转领取成功类或者跳出失败弹窗的简单逻辑即可。 ①抢到的效果图，这里界面比较简单就不贴代码了。 [img]http://files.jb51.net/file_images/article/201712/2017121110394727.png[/img] ②失败弹窗的效果图，这里的自定义弹窗代码与红包弹窗的代码基本相似，区别就在于少了个拆红包按钮而已，布局也相对简单，就不贴出来了，主要在这里面需要使用比例来规划几个部件的位置（参考上面的红包代码），否则无法适配多种屏幕，会出现压缩拉伸变形的情况。 [img]http://files.jb51.net/file_images/article/201712/2017121110394728.png[/img] 到这里粗略的红包动画效果就基本完成了！当然实际应用中需要用到网络请求之类的，就再按照业务要求加入。以上所述是小编给大家介绍的Android仿硬币转动微信红包动画效果，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对编程素材网网站的支持！

全部评论(0)

上一篇：Android中对RecyclerView Adapter封装解析
下一篇：Android中FTP上传、下载的功能实现（含进度）

资讯排行榜
更多>>