Android仿支付宝中余额宝的数字动画效果

实现效果图：

下面是具体代码，可直接复制：

package com.lcw.rabbit.widget;
import android.animation.ObjectAnimator;
import android.content.Context;
import android.text.TextUtils;
import android.util.AttributeSet;
import android.view.animation.AccelerateDecelerateInterpolator;
import android.widget.TextView;

/**
 * 高仿余额宝数字动画
 * Create by: chenwei.li
 * Date: 2016-07-20
 * time: 11:52
 * Email: lichenwei.me@foxmail.com
 */
public class CountNumberView extends TextView {
 //动画时长
 private int duration = 1500;
 //显示数字
 private float number;
 //显示表达式
 private String regex;

 //显示表示式
 public static final String INTREGEX = "%1$01.0f";//不保留小数，整数
 public static final String FLOATREGEX = "%1$01.2f";//保留2位小数

 public CountNumberView(Context context, AttributeSet attrs) {
 super(context, attrs);
 }

 /**
 * 显示带有动画效果的数字
 * @param number
 * @param regex
 */
 public void showNumberWithAnimation(float number, String regex) {
 if (TextUtils.isEmpty(regex)) {
  //默认为整数
  this.regex = INTREGEX;
 } else {
  this.regex = regex;
 }
 //修改number属性，会调用setNumber方法
 ObjectAnimator objectAnimator = ObjectAnimator.ofFloat(this, "number", 0, number);
 objectAnimator.setDuration(duration);
 //加速器，从慢到快到再到慢
 objectAnimator.setInterpolator(new AccelerateDecelerateInterpolator());
 objectAnimator.start();
 }

 /**
 * 获取当前数字
 * @return
 */
 public float getNumber() {
 return number;
 }

 /**
 * 根据正则表达式，显示对应数字样式
 * @param number
 */
 public void setNumber(float number) {
 this.number = number;
 setText(String.format(regex, number));
 }
}

使用方法，在XML里声明后（可以完全当成TextView来使用），直接在Java文件里调用：

 mTvCountNum1.showNumberWithAnimation(3201.23f, CountNumberView.FLOATREGEX);
 mTvCountNum2.showNumberWithAnimation(65535f, CountNumberView.INTREGEX);

这里为了灵活使用，预留了数字显示格式（默认提供整型号和浮点型），大家可以根据自己的需要去更改Regex。

关于String.format的第一个格式参数，这里引用下api的描述：

常规类型、字符类型和数值类型的格式说明符的语法如下：

%[argument_index$][flags][width][.precision]conversion

可选的 argument_index 是一个十进制整数，用于表明参数在参数列表中的位置。第一个参数由 "1$" 引用，第二个参数由 "2$" 引用，依此类推。

可选 flags 是修改输出格式的字符集。有效标志集取决于转换类型。

可选 width 是一个非负十进制整数，表明要向输出中写入的最少字符数。

可选 precision 是一个非负十进制整数，通常用来限制字符数。特定行为取决于转换类型。

总结

Android仿支付宝中余额宝的数字动画效果到这就结束了，希望这篇文章对大家在Android开发中能有所帮助，如果有疑问可以留言交流。

赞 (0)

相关推荐

  • Android带数字或红点的底部导航拦和联网等待加载动画示例

    Android带数字或红点的底部导航拦和联网等待加载动画示例

    Android带数字或红点的底部导航拦和联网等待加载动画 首先展示一下截图效果,下载地址在文章最后 一.Android带红点的底部导航拦 1.首先写底部导航栏的界面view_main_tab.xml. <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" and

  • Android实现数字跳动效果的TextView方法示例

    Android实现数字跳动效果的TextView方法示例

    前言 本文介绍的是Android如何实现数字跳动效果的TextView,主要运用了DancingNumberView,DancingNumberView是一个用于跳动显示文本中数字的控件,继承自TextView,这种控件一般用于显示金额等对用户较为敏感的数字,让UI交互更加生动. 它具有以下几点特性: 自动获取文本中的所有数字,并同时开始跳动,免去多个TextView拼接的麻烦 支持数字按照自定义的格式显示,例如限定只显示小数点后两位 效果图如下 导入使用 Gradle 第1步,在project

  • Android自定义SeekBar滑动显示数字

    Android自定义SeekBar滑动显示数字

    先来上个效果图: 当滑动时:数值显示,滑动停止时显示数字,使用FrameLayout结合SeekBar. 首先我们看看. Layout: <?xml version="1.0" encoding="utf-8"?> <merge xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.c

  • Android仿支付宝中余额宝的数字动画效果

    Android仿支付宝中余额宝的数字动画效果

    实现效果图: 下面是具体代码,可直接复制: package com.lcw.rabbit.widget; import android.animation.ObjectAnimator; import android.content.Context; import android.text.TextUtils; import android.util.AttributeSet; import android.view.animation.AccelerateDecelerateInterpola

  • Android 仿支付宝中的余额宝收益进度条

    Android 仿支付宝中的余额宝收益进度条

    一. 看效果 二.上代码 package com.framework.widget; import android.app.Activity; import android.content.Context; import android.content.res.TypedArray; import android.graphics.Canvas; import android.graphics.Color; import android.graphics.Paint; import androi

  • Android仿支付宝笑脸刷新加载动画的实现代码

    Android仿支付宝笑脸刷新加载动画的实现代码

    看到支付宝的下拉刷新有一个笑脸的动画,因此自己也动手实现一下.效果图如下: 一.总体思路 1.静态部分的笑脸. 这一部分的笑脸就是一个半圆弧,加上两颗眼睛,这部分比较简单,用于一开始的展示. 2.动态笑脸的实现. 2.1.先是从底部有一个圆形在运动,运动在左眼位置时把左眼给绘制,同时圆形继续运动,运动到右眼位置时绘制右眼,圆形继续运动到最右边的位置. 2.2.当上面的圆形运动到最右边时候,开始不断绘制脸,从右向左,脸不断增长,这里脸设置为接近半个圆形的大小. 2.3.当脸画完的时候,开始让脸旋转

  • Android仿视频加载旋转小球动画效果的实例代码

    Android仿视频加载旋转小球动画效果的实例代码

    先上个效果图,以免大家跑错地了. 嗯,除了只能录三秒,其他没啥问题. 下面分析一下怎么实现上面这个效果. 理性分析后我们可以看到是几个小球绕着一个圆进行运动,那这里面的重点我们看看什么. 绘制五个球,没什么难度,让球绕圆进行运动,这个好像我们没有见到是怎么去实现了,那下就说这个. 从本质上看,球绕圆运动,其实我们可以看作是一个物体绕指定的路劲运动,那我们就有下面几个东西需要说一下: 1:Path 2:ValueAnimator 3:PathMeasure 前两个大家应该都见过,一个是路径,就是可

  • iOS仿支付宝芝麻信用分数仪表盘动画效果

    iOS仿支付宝芝麻信用分数仪表盘动画效果

    先看看效果图: 仪表盘动画效果.jpg 1.圆环上绿点的旋转 2.分数值及提示语的变化 3.背景色的变化 直接上主要代码: 1.自定义ZLDashboardView仪表盘文件: .h 文件: /** * 根据跃动数字 * * 确定百分比 * 现在的跳动数字-->背景颜色变化 * */ #import <UIKit/UIKit.h> @interface ZLDashboardView : UIView @property (nonatomic, strong) UIImage *bgIm

  • Android仿ViVO X6 极速闪充动画效果

    Android仿ViVO X6 极速闪充动画效果

    一直都在看自定义View,经过一个星期的坚持,基本上能够写出一些比较实用的控件效果了,今天天气太热,就待在家里玩手机,然后手机没电了,在充电的时候,看到了手机的充电动画,觉得挺酷,然后自己我就仔细的分析了一下这里的动画内容,就觉得,这个我也能写出来,所以就有了这篇博客.纯属原创. 先看看效果,因为图片的原因,只能看到静态的. 这个就是效果图了.当然了,这么看好像不怎么样,但是配上了动画,还是挺好看的. 自定义控件的话,其实做的多了,运用的多了,就会觉得自定义View,跟在Photo shop 里

  • Android 自定View实现仿QQ运动步数圆弧及动画效果

    Android 自定View实现仿QQ运动步数圆弧及动画效果

    在之前的Android超精准计步器开发-Dylan计步中的首页用到了一个自定义控件,和QQ运动的界面有点类似,还有动画效果,下面就来讲一下这个View是如何绘制的. 1.先看效果图 2.效果图分析 功能说明:黄色的代表用户设置的总计划锻炼步数,红色的代表用户当前所走的步数. 初步分析:完全自定义View重写onDraw()方法,画圆弧. 3.画一个圆弧必备知识 在Canvas中有一个画圆弧的方法 drawArc(RectF oval, float startAngle, float sweepA

  • Android仿支付宝的头部伸缩动画效果

    Android仿支付宝的头部伸缩动画效果

    Android5.0推出的MaterialDesign库包含了处理头部工具栏的多个控件,不但允许自定义顶部导航栏,而且导航栏高度是可以伸缩的.如此一来,一方面导航栏能够放得下更多控件,另一方面在用户想看具体内容时也能腾出更多的屏幕空间. 这么说可能比较抽象,那就先来看看两张导航栏的效果图,第一张是导航栏完全展开时的界面,此时页面头部的导航栏占据了较大部分的高度: 第二张是导航栏完全收缩时的界面,此时头部导航栏只剩矮矮的一个长条. 看起来很眼熟是不是,上面的截图正是仿支付宝首页的头部效果.如果你熟

  • Android仿支付宝微信支付密码界面弹窗封装dialog

    Android仿支付宝微信支付密码界面弹窗封装dialog

    一,功能效果 二,实现过程 1,先写xml文件:dialog_keyboard.xml 注意事项 (1),密码部分用的是一个线性布局中6个TextView,并设置android:inputType="numberPassword",外框是用的一个有stroke属性的shape, (2),1-9数字是用的recycleview ,每个item的底部和右边有1dp的黑线,填充后形成分割线. (3),recycleview 要设置属性  android:overScrollMode=&quo

  • Android自定义ViewGroup实现绚丽的仿支付宝咻一咻雷达脉冲效果

    Android自定义ViewGroup实现绚丽的仿支付宝咻一咻雷达脉冲效果

    去年春节的时候支付宝推行的集福娃活动着实火的不能再火了,更给力的是春晚又可以全民参与咻一咻集福娃活动,集齐五福就可平分亿元大红包,只可惜没有敬业福--那时候在家没事写了个咻一咻插件,只要到了咻一咻的时间点插件就可以自动的点击咻一咻来咻红包,当时只是纯粹练习这部分技术代码没有公开,后续计划写篇关于插件这方面的文章,扯远了(*^__^*) --我们知道在支付宝的咻一咻页面有个雷达扩散的动画效果,当时感觉动画效果非常棒,于是私下尝试着实现了类似的效果,后来在github发现有大神也写有类似效果,于是读

随机推荐