金融app收益数字滚动效果

在金融app的收益界面中,往往会有一个收益滚动的动画效果,其实这是用到了ValueAnimator,并对Value的变化进行监听,动态改变文本内容来实现的。
如立马理财中,是从0动态滚动到1.49的:
金融app收益数字滚动效果_第1张图片
下面来进行一个简单的展示,分为布局文件和activity:

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

            <RelativeLayout  android:id="@+id/account_income_fee_ry" android:layout_width="120dp" android:layout_height="120dp" android:layout_centerHorizontal="true" android:background="@mipmap/account_bg">

                <LinearLayout  android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerInParent="true" android:orientation="vertical" android:padding="1dp">

                    <TextView  android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center_horizontal" android:text="总金额(元)" android:textColor="@color/white" android:textSize="13sp" />

                    <TextView android:id="@+id/account_total_income_tv" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center_horizontal" android:singleLine="true" android:text="8888.00" android:textColor="@color/white" android:textSize="23sp" android:visibility="gone" />
                </LinearLayout>


            </RelativeLayout>

        </LinearLayout>
public class IncomeFeeActivity extends BaseActivity{

 @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.income_layout);
        setTitle("我的账户");

         TextView tv= (TextView) findViewById(R.id.account_total_income_tv);

// 定义数据格式
final DecimalFormat df = new DecimalFormat("0.00");
// 进行ValueAnimator动画
// 这里的值从0开始到最终显示的那个值,可以把incomeRecords.getMoneyTotal()/100换成任何你想展示的值,如10000,动画就会从0到10000滚动显示
ValueAnimator valueAnimator = ValueAnimator.ofFloat((float) 0.0, (float) incomeRecords.getMoneyTotal() / 100);
        valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
                tv.setText("" + df.format((float) animation.getAnimatedValue())
                );
            }
        });
        valueAnimator.setDuration(3000);
        valueAnimator.start();


    }


}

主要代码大概就这么多,写得有点仓促,介绍了用ValueAnimator滚动显示的实现思路。

你可能感兴趣的:(动画,金融,value,animator,收益)