Android第四十期 - 动画数字三元归一

最近太忙，天天都下半夜，但是还是做出来一些成绩，这个效果以后大家需要的话可以改改，代码已经整理好，效果如下：




想想还是跟大家讲一下吧，这些还是有一些技巧的。

首先是字体部分，动态的变化会随着上下的滚动递增递减，效果如下：




首先是布局文件：

<?xml version="1.0" encoding="utf-8"?>
<com.yuan.mytmall.MagicScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/magic_scroll"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/white"
android:scrollbars="none" >

<LinearLayout
android:id="@+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >

<RelativeLayout
android:id="@+id/code_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@color/cyan"
android:orientation="vertical"
android:paddingBottom="20dp"
android:paddingTop="20dp" >

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_marginLeft="10dp"
android:text="当前账户："
android:textColor="@color/white"
android:textSize="18sp" />

<FrameLayout
android:layout_width="120dp"
android:layout_height="120dp"
android:layout_centerInParent="true" >

<com.geek.view.RoundImageViewByXfermode
android:id="@+id/patientmg_code_img3"
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_gravity="center"
android:contentDescription="@null"
android:padding="7dp"
android:src="@drawable/white3" />
</FrameLayout>

<FrameLayout
android:layout_width="120dp"
android:layout_height="120dp"
android:layout_centerInParent="true" >

<com.geek.view.RoundImageViewByXfermode
android:id="@+id/patientmg_code_img2"
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_gravity="center"
android:contentDescription="@null"
android:padding="7dp"
android:src="@drawable/white2" />
</FrameLayout>

<FrameLayout
android:layout_width="120dp"
android:layout_height="120dp"
android:layout_centerInParent="true" >

<com.geek.view.RoundImageViewByXfermode
android:id="@+id/patientmg_code_img1"
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_gravity="center"
android:contentDescription="@null"
android:padding="7dp"
android:src="@drawable/white1" />
</FrameLayout>

<FrameLayout
android:layout_width="120dp"
android:layout_height="120dp"
android:layout_centerInParent="true" >

<com.geek.view.RoundImageViewByXfermode
android:id="@+id/patientmg_code_img"
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_gravity="center"
android:contentDescription="@null"
android:padding="7dp"
android:src="@drawable/white0" />
</FrameLayout>

<FrameLayout
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_centerInParent="true" >

<RelativeLayout
android:id="@+id/rllob"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_gravity="center" >

<com.yuan.mytmall.MagicTextView
android:id="@+id/tv_qian"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="0.0"
android:textColor="@color/oriange"
android:textSize="20sp" />
</RelativeLayout>

<TextView
android:id="@+id/tv_nick3"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_below="@+id/rllob"
android:layout_gravity="bottom"
android:gravity="center"
android:paddingBottom="5dp"
android:text="元"
android:textColor="@color/gray"
android:textSize="20sp" />
</FrameLayout>
</RelativeLayout>

<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@color/oriange"
android:orientation="vertical"
android:padding="15dp" >

<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="昨日收益"
android:textColor="@color/white"
android:textSize="20sp" />

<com.yuan.mytmall.MagicTextView
android:id="@+id/income_money"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="15dp"
android:text="0.00"
android:textColor="@color/white"
android:textSize="60sp" />
</LinearLayout>

<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="15dp"
android:layout_marginTop="20dp"
android:text="总金额(元)"
android:textColor="@color/gray"
android:textSize="20sp" />

<com.yuan.mytmall.MagicTextView
android:id="@+id/total_money"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="15dp"
android:layout_marginTop="5dp"
android:text="0.00"
android:textColor="@color/oriange"
android:textSize="45sp" />

<LinearLayout
android:id="@+id/income_total_bar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:background="@color/light_gray" >

<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="vertical"
android:padding="10dp" >

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="累计收益(元)"
android:textColor="@color/gray"
android:textSize="20sp" />

<com.yuan.mytmall.MagicTextView
android:id="@+id/income_total_txt"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="5dp"
android:text="0.0"
android:textColor="@color/black"
android:textSize="30sp" />
</LinearLayout>

<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="vertical"
android:padding="10dp" >

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="七日年化收益率"
android:textColor="@color/gray"
android:textSize="20sp" />

<com.yuan.mytmall.MagicTextView
android:id="@+id/income_sevdays_txt"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="5dp"
android:text="0.00"
android:textColor="@color/black"
android:textSize="30sp" />
</LinearLayout>
</LinearLayout>

<LinearLayout
android:id="@+id/income_nearly_bar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@color/light_gray" >

<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="vertical"
android:padding="10dp" >

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="近一周收益(元)"
android:textColor="@color/gray"
android:textSize="20sp" />

<com.yuan.mytmall.MagicTextView
android:id="@+id/income_week_txt"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="5dp"
android:text="0.00"
android:textColor="@color/black"
android:textSize="30sp" />
</LinearLayout>

<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="vertical"
android:padding="10dp" >

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="近一月收益(元)"
android:textColor="@color/gray"
android:textSize="20sp" />

<com.yuan.mytmall.MagicTextView
android:id="@+id/income_month_txt"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="5dp"
android:text="0.0"
android:textColor="@color/black"
android:textSize="30sp" />
</LinearLayout>
</LinearLayout>

<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="15dp"
android:gravity="center"
android:text="南京市"
android:textColor="@color/oriange"
android:textSize="25sp" />

<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:gravity="center"
android:text="你的收益战胜了"
android:textColor="@color/gray" />

<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="15dp"
android:gravity="center" >

<com.yuan.mytmall.MagicTextView
android:id="@+id/overperson_percent"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:text="0.00"
android:textColor="@color/oriange"
android:textSize="35sp" />

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="2dp"
android:text="%"
android:textColor="@color/oriange"
android:textSize="35sp" />
</LinearLayout>

<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="超过"
android:textColor="@color/gray" />

<com.yuan.mytmall.MagicTextView
android:id="@+id/overperson_count"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="0"
android:textColor="@color/gray"
android:textSize="25sp" />

<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="15dp"
android:gravity="center" >

<com.yuan.mytmall.MagicTextView
android:id="@+id/overperson_percent2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:text="0.00"
android:textColor="@color/oriange"
android:textSize="35sp" />

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="2dp"
android:text="%"
android:textColor="@color/oriange"
android:textSize="35sp" />
</LinearLayout>

<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="15dp"
android:gravity="center" >
</LinearLayout>
</LinearLayout>

</com.yuan.mytmall.MagicScrollView>

基类MagicScrollView：

package com.yuan.mytmall;

import java.util.ArrayList;
import java.util.List;

import android.content.Context;
import android.util.AttributeSet;
import android.widget.ScrollView;

public class MagicScrollView extends ScrollView {

private List<ScrollListener> mListeners = new ArrayList<MagicScrollView.ScrollListener>();
private int state = 0;
public static final int UP = 1;
public static final int DOWN = 2;
public static final int STOP = 3;

public interface ScrollListener {
void onScrollChanged(int state, int t);
}

public MagicScrollView(Context context) {
super(context);
}

public MagicScrollView(Context context, AttributeSet set) {
super(context, set);
}

public MagicScrollView(Context context, AttributeSet set, int defStyle) {
super(context, set, defStyle);
}

public void AddListener(ScrollListener listener) {
if (mListeners == null)
mListeners = new ArrayList<MagicScrollView.ScrollListener>();

mListeners.add(listener);
}

@Override
protected void onScrollChanged(int l, int t, int oldl, int oldt) {
super.onScrollChanged(l, t, oldl, oldt);
if (t > oldt) {
state = UP;
} else if (t < oldt) {
state = DOWN;
} else {
state = STOP;
}

sendScroll(state, t);
}

public void sendScroll(int state, int scroll) {
for (ScrollListener listener : mListeners) {
listener.onScrollChanged(state, scroll);
}
}

}

文字的基类MagicTextView：

package com.yuan.mytmall;

import java.math.BigDecimal;
import java.text.DecimalFormat;

import android.content.Context;
import android.os.Handler;
import android.os.Message;
import android.util.AttributeSet;
import android.widget.TextView;

import com.yuan.mytmall.MagicScrollView.ScrollListener;

public class MagicTextView extends TextView implements ScrollListener {
// view 自身高度
private int mHeight;
// view 距离scrollView最顶端高度
private int locHeight;
// 递减/递增 的变量值
private double mRate;
// view 设置的值
private double mValue;
// 当前显示的值
private double mCurValue;
// 当前变化后最终状态的目标值
private double mGalValue;
// 控制加减法
private int rate = 1;
// 当前变化状态(增/减/不变)
private int mState = 0;
private boolean refreshing;
private static final int REFRESH = 1;
private static final int SCROLL = 2;
// 偏移量 主要用来进行校正距离。
private static final int OFFSET = 20;
DecimalFormat fnum = new DecimalFormat("0.00");

private Handler mHandler = new Handler() {
public void handleMessage(android.os.Message msg) {
switch (msg.what) {

case REFRESH:
if (rate * mCurValue < mGalValue) {
refreshing = true;
setText(fnum.format(mCurValue));
mCurValue += mRate * rate;
mHandler.sendEmptyMessageDelayed(REFRESH, 50);
} else {
refreshing = false;
setText(fnum.format(mGalValue));
}
break;

case SCROLL:
doScroll(msg.arg1, msg.arg2);
break;

default:
break;
}
};
};

public MagicTextView(Context context) {
super(context);
}

public MagicTextView(Context context, AttributeSet set) {
super(context, set);
}

public MagicTextView(Context context, AttributeSet set, int defStyle) {
super(context, set, defStyle);
}

public void setLocHeight(int height) {
locHeight = height;
}

public void setValue(double value) {
mCurValue = 0.00;
mGalValue = isShown() ? value : 0;
mValue = value;
mRate = (double) (mValue / 20.00);
BigDecimal b = new BigDecimal(mRate);
mRate = b.setScale(2, BigDecimal.ROUND_HALF_UP).doubleValue();
}

@Override
public void onScrollChanged(int state, int scroll) {
Message msg = mHandler.obtainMessage();
msg.what = SCROLL;
msg.arg1 = state;
msg.arg2 = scroll;
mHandler.sendMessage(msg);
}

private void doScroll(int state, int scroll) {
if (mState == state && refreshing)
return;

mState = state;
if (doMinus(scroll)) {
rate = -1;
mGalValue = 0;
} else if (doPlus(scroll)) {
rate = 1;
mGalValue = mValue;
}
mHandler.sendEmptyMessage(REFRESH);
}

private boolean doPlus(int scroll) {
if (isShown() && (scroll + PayActivity.mWinheight > locHeight + OFFSET)
&& (mState == MagicScrollView.UP))
return true;
if (isShown() && (scroll < locHeight) && mState == MagicScrollView.DOWN)
return true;

return false;
}

private boolean doMinus(int scroll) {
if (isShown() && (scroll > locHeight) && (mState == MagicScrollView.UP))
return true;

if (isShown() && (scroll + PayActivity.mWinheight - mHeight < locHeight - OFFSET)
&& (mState == MagicScrollView.DOWN))
return true;

return false;
}

@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
// 执行完onMeasure后即可获得view的宽度
mHeight = getMeasuredHeight();
}
}

最后是Activity：

package com.yuan.mytmall;

import android.app.Activity;
import android.content.res.Configuration;
import android.graphics.Rect;
import android.os.Bundle;
import android.os.Handler;
import android.util.Log;
import android.view.animation.Animation;
import android.view.animation.AnimationUtils;
import android.view.animation.DecelerateInterpolator;
import android.view.animation.LinearInterpolator;
import android.widget.ImageView;
import android.widget.LinearLayout;

public class PayActivity extends Activity {

private MagicTextView tv_qian;
private MagicScrollView mScrollView;
private MagicTextView mIncomeTxt;
private MagicTextView mTotalMoneyTxt;
private MagicTextView mIncTotalTxt;
private MagicTextView mIncSevTxt;
private MagicTextView mIncWeekTxt;
private MagicTextView mIncMonTxt;
private MagicTextView mOverPerTxt;
private MagicTextView mOverPerTxt2;
private MagicTextView mOverCountTxt;
private LinearLayout mContainer;
public static int mWinheight;
int[] location = new int[2];
private ImageView infoOperatingIV1, infoOperatingIV2, infoOperatingIV3;
private Animation operatingAnim1;
private Animation operatingAnim2;
private Animation operatingAnim3;

public void onConfigurationChanged(Configuration newConfig) {

super.onConfigurationChanged(newConfig);

if (operatingAnim1 != null && infoOperatingIV1 != null
&& operatingAnim1.hasStarted()) {
infoOperatingIV1.clearAnimation();
infoOperatingIV1.startAnimation(operatingAnim1);
}
if (operatingAnim2 != null && infoOperatingIV2 != null
&& operatingAnim2.hasStarted()) {
infoOperatingIV2.clearAnimation();
infoOperatingIV2.startAnimation(operatingAnim2);
}
if (operatingAnim3 != null && infoOperatingIV3 != null
&& operatingAnim3.hasStarted()) {
infoOperatingIV3.clearAnimation();
infoOperatingIV3.startAnimation(operatingAnim3);
}
}

private Handler mHandler = new Handler() {
public void handleMessage(android.os.Message msg) {
int height = mContainer.getMeasuredHeight();
Log.d("height  is ====>", "" + height);
onMeasureTxt(tv_qian);
onMeasureTxt(mIncomeTxt);
onMeasureTxt(mTotalMoneyTxt);
onMeasureTxt(mIncTotalTxt);
onMeasureTxt(mIncSevTxt);
onMeasureTxt(mIncWeekTxt);
onMeasureTxt(mIncMonTxt);
onMeasureTxt(mOverPerTxt);
onMeasureTxt(mOverPerTxt2);
onMeasureTxt(mOverCountTxt);
mScrollView.sendScroll(MagicScrollView.UP, 0);
};
};

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.magic_scroll_layout);

Rect fram = new Rect();
getWindow().getDecorView().getWindowVisibleDisplayFrame(fram);
mWinheight = fram.height();
Log.d("winHeight is ====>", "" + mWinheight);
mScrollView = (MagicScrollView) findViewById(R.id.magic_scroll);
tv_qian = (MagicTextView) findViewById(R.id.tv_qian);
mIncomeTxt = (MagicTextView) findViewById(R.id.income_money);
mTotalMoneyTxt = (MagicTextView) findViewById(R.id.total_money);
mIncTotalTxt = (MagicTextView) findViewById(R.id.income_total_txt);
mIncSevTxt = (MagicTextView) findViewById(R.id.income_sevdays_txt);
mIncWeekTxt = (MagicTextView) findViewById(R.id.income_week_txt);
mIncMonTxt = (MagicTextView) findViewById(R.id.income_month_txt);
mOverPerTxt = (MagicTextView) findViewById(R.id.overperson_percent);
mOverPerTxt2 = (MagicTextView) findViewById(R.id.overperson_percent2);
mOverCountTxt = (MagicTextView) findViewById(R.id.overperson_count);
mContainer = (LinearLayout) findViewById(R.id.container);

tv_qian.setValue(5360.00);
mIncomeTxt.setValue(3.30);
mTotalMoneyTxt.setValue(22800.56);
mIncTotalTxt.setValue(58.56);
mIncSevTxt.setValue(50.00);
mIncWeekTxt.setValue(20.00);
mIncMonTxt.setValue(40.20);
mOverPerTxt.setValue(88.88);
mOverPerTxt2.setValue(88.88);
mOverCountTxt.setValue(300000000);
initListener();
mHandler.sendEmptyMessageDelayed(0, 1000);

// 三个圆的故事
infoOperatingIV1 = (ImageView) findViewById(R.id.patientmg_code_img1);
infoOperatingIV2 = (ImageView) findViewById(R.id.patientmg_code_img2);
infoOperatingIV3 = (ImageView) findViewById(R.id.patientmg_code_img3);
// 动画部分
LinearInterpolator lin = new LinearInterpolator();// 匀速运动
DecelerateInterpolator lin2 = new DecelerateInterpolator();// 减速运动
operatingAnim1 = AnimationUtils.loadAnimation(this, R.anim.tip1);
operatingAnim1.setInterpolator(lin);
if (operatingAnim1 != null) {
infoOperatingIV1.startAnimation(operatingAnim1);
}
operatingAnim2 = AnimationUtils.loadAnimation(this, R.anim.tip2);
operatingAnim2.setInterpolator(lin);
if (operatingAnim2 != null) {
infoOperatingIV2.startAnimation(operatingAnim2);
}
operatingAnim3 = AnimationUtils.loadAnimation(this, R.anim.tip3);
operatingAnim3.setInterpolator(lin);
if (operatingAnim3 != null) {
infoOperatingIV3.startAnimation(operatingAnim3);
}
}

private void initListener() {
mScrollView.AddListener(tv_qian);
mScrollView.AddListener(mIncomeTxt);
mScrollView.AddListener(mTotalMoneyTxt);
mScrollView.AddListener(mIncTotalTxt);
mScrollView.AddListener(mIncSevTxt);
mScrollView.AddListener(mIncWeekTxt);
mScrollView.AddListener(mIncMonTxt);
mScrollView.AddListener(mOverPerTxt);
mScrollView.AddListener(mOverPerTxt2);
mScrollView.AddListener(mOverCountTxt);
}

private void onMeasureTxt(MagicTextView view) {
// 用来获取view在距离屏幕顶端的距离(屏幕顶端也是scrollView的顶端)
view.getLocationInWindow(location);
view.setLocHeight(location[1]);
Log.d("window y is ====>", "" + location[1]);
}
}

总结一下：这个动画需要你自己去计算，我自己的需求是这样的：每一个圆按照120°旋转，坐标分别是(46,50),(53,50+2√3)，(53,50-2√3),距上顶点和距左边距。下面是草图，大家自己算算就知道了啊。。另外时间的换算你可以去控制快慢什么的百度吧~属性值这里就不多说了，百度都有~




最后就是说一句，没有做不出来的东西，只有不用心上进的人~虽然很苦逼，但是都是你的Color Life~





本文出自 “梁肖技术中心” 博客，请务必保留此出处http://liangxiao.blog.51cto.com/3626612/1668949