实现效果图如下:



参考这篇改动的 : http://www.manew.com/thread-50090-1-1.html(原理请看着吧,不过这个用来做数字滚动会有问题哦)

另外附上资源下载链接 : https://download.csdn.net/download/dengshunhao/10661281

 

 

 

 

 

 

vue实现数字滚动效果
近期在做项目的时候，产品要求实现数字滚动效果如下：


用jquery实现
html:
<div class="develop">
<!--滚动的数字-->
        <p><span class="shuzi">3000000</span></p>
        <p><span class="shuzi">60000</span></p>
    </div>

js:
$(".navigation_right li").click(function () {
    $(this).siblings('li').removeClass("yanse");
  });
  let arr = $(".develop>p>.shuzi");
  arr.each(function(e, a){
    let num = $(a).text()
    let i = 0;
    let count = parseInt(num /500);
    let timer = setInterval(function(){
      $(a).text(i)
      i += count;
      if (i > num)
        window.clearInterval(timer)
    }, 5)
  })

这样做有一个问题，只能和500取余且为整数，而且滚动的时间也没发控制，显然是不满足我们的业务场景的。
用vue-countTo实现
vue-countTo是一个无依赖，轻量级的vue组件，可以自行覆盖easingFn。
安装使用
npm install vue-count-to

例子
<template>
  <countTo :startVal='startVal' :endVal='endVal' :duration='3000'></countTo>
</template>
<script>
//直接引入组件'vue-count-to'
  import countTo from 'vue-count-to';
  export default {
  //注册组件
    components: { countTo },
    data () {
      return {
      //数字开始
        startVal: 0,
       //数字结束
        endVal: 50000
      }
    }
  }
</script>

其中：startVal为开始数字，startVal为结束数字，duration为滚动时长

第一次写博客，原创效果，不啰嗦，上代码上图。
 
/**
 * 1280*720 密度2；暂不支持适配
 * 运行SDK android4.4.2
 * @author LXD
 *
 */
public class NumberWheel extends SurfaceView implements Callback,Runnable {
	private int oldms=500;//不更新UI时线程休眠时间
	private int ms=17;//更新UI时线程休眠时间(帧)
	private int mvingDistance=6;//更新UI时数字每次滚动距离
	private long millisecond=500;//刚创建时延迟运行毫秒数
	
	private boolean isRunnable=false;	
	private Drawable down=null;
	private Drawable middle=null;
	private Drawable up=null;
	private Drawable background=null;
	private SurfaceHolder holder = null;
	
	private int width=0;//控件宽
	private int height=0;//控件高
	
	//回调函数
	private CallBackListener cbl;
	
	
	private NumberBean nBean=null;
	public NumberWheel(Context context,NumberBean nBean,LayoutParams rl,int millisecond) {
		super(context);
		// TODO Auto-generated constructor stub
		this.nBean=nBean;
		this.millisecond=millisecond;
		setLayoutParams(rl);
		init();
	}
	//控件初始化
	public void init(){
		background=getResources().getDrawable(nBean.getBackgroundImage());
		ViewGroup.LayoutParams lp=getLayoutParams();
		if(null!=lp){
			width=lp.width>background.getMinimumWidth()?background.getMinimumWidth():lp.width;
			height=lp.height>background.getMinimumHeight()?background.getMinimumHeight():lp.height;
		}else{
			width=background.getMinimumWidth();
			height=background.getMinimumHeight();
		}	
		nBean.doLocations(getContext(), width, height);
		millisecond+=System.currentTimeMillis();
		
		holder = getHolder();  
		holder.addCallback(this); //设置Surface生命周期回调  
	}
	
	
	
	public CallBackListener getCallBackListener() {
		return cbl;
	}
	public void setCallBackListener(CallBackListener cbl) {
		this.cbl = cbl;
	}
	public void restart(float endShowNum){
		ms=17;
		down=null;
		up=null;
		middle=null;
		nBean.setEndShowNum(endShowNum);
		nBean.reset(getContext(), width, height);
	}
	@Override
	public void surfaceCreated(SurfaceHolder holder) {
		// TODO Auto-generated method stub
		drawStatic(nBean.getStartShowNumString());
		isRunnable=true;
		if(null!=cbl){
			cbl.start();
		}
		new Thread(this).start();
	}

	@Override
	public void surfaceChanged(SurfaceHolder holder, int format, int width,
			int height) {
		// TODO Auto-generated method stub

	}

	@Override
	public void surfaceDestroyed(SurfaceHolder holder) {
		// TODO Auto-generated method stub
		isRunnable=false;
	}
	
	//线程运行
	@Override
	public void run() {
		// TODO Auto-generated method stub
		while(isRunnable){
			try {
				if(millisecond<System.currentTimeMillis()&&ms!=oldms){
					if(nBean.endByOrder(nBean.getRunningNum().length)){//是否结束本轮更新
						ms=oldms;
						nBean.setStartShowNum(nBean.getEndShowNum());
						nBean.setStartShowNumString(nBean.getEndShowNumString());
						if(null!=cbl)
							cbl.end();
					}else
						doDraw();
				}
				Thread.sleep(ms);
			} catch (InterruptedException e) {
				// TODO Auto-generated catch block
				e.printStackTrace();
			}
		}
	}
	//
	private void doDraw(){
		Canvas canvas=holder.lockCanvas(null);
		drawbackground(canvas);
		for(int i=0,j=0;i<nBean.getNotWheelImages().length;i++){
			int temp=nBean.getNotWheelImages()[i];
			if(temp!=0){
				middle=getContext().getResources().getDrawable(temp);
				middle.setBounds(nBean.getLocations()[i][0],nBean.getLocations()[i][1],nBean.getLocations()[i][0]+middle.getMinimumWidth(),nBean.getLocations()[i][1]+middle.getMinimumHeight());
				middle.draw(canvas);
			}else{
				int [] temp2=nBean.getRunningNum()[j];
				Drawable d=getResources().getDrawable(nBean.getNumberImages()[temp2[0]]);
				if(temp2[3]==0){
					j++;
					d.setBounds(nBean.getLocations()[i][0],nBean.getLocations()[i][1],nBean.getLocations()[i][0]+d.getMinimumWidth(),nBean.getLocations()[i][1]+d.getMinimumHeight());
					d.draw(canvas);
					continue;
				}
				if(temp2[2]>height){//坐标重置到顶端
					temp2[2]=temp2[2]-d.getMinimumHeight()*3;
					temp2[0]=temp2[0]+3>9?temp2[0]+3-10:temp2[0]+3;
					d=getResources().getDrawable(nBean.getNumberImages()[temp2[0]]);
				}
				int location=0;//所在位置0上1中2下
				int y=(height-d.getMinimumHeight())/2;
				if(temp2[2]>=(y+d.getMinimumHeight())){
					location=2;
				}else if(temp2[2]>=y){
					location=1;
				}else {
					location=0;
				}
				int x=nBean.getEndShowNumString().charAt(i)-48;
				boolean isContinue=false;
				int z=0;
				switch (location){
				case 0:
					z=temp2[0]-1<0?temp2[0]-1+10:temp2[0]-1;
					if(x==z&&temp2[2]+d.getMinimumHeight()>=y&&nBean.endByOrder(j)){
						isContinue=true;
						d=getResources().getDrawable(nBean.getNumberImages()[z]);
					}
					break;
				case 1:
					z=temp2[0];
					if(x==z&&temp2[2]>=y&&nBean.endByOrder(j))
						isContinue=true;
					break;
				case 2:
					z=temp2[0]+1>9?temp2[0]+1-10:temp2[0]+1;
					if(x==z&&temp2[2]-d.getMinimumHeight()>=y&&nBean.endByOrder(j)){
						isContinue=true;
						d=getResources().getDrawable(nBean.getNumberImages()[z]);
					}
					break;
				}
				if(isContinue){
					j++;
					temp2[0]=z;
					temp2[3]=0;
					d.setBounds(nBean.getLocations()[i][0],nBean.getLocations()[i][1],nBean.getLocations()[i][0]+d.getMinimumWidth(),nBean.getLocations()[i][1]+d.getMinimumHeight());
					d.draw(canvas);
					continue;
				}
				Rect r=new Rect(temp2[1], temp2[2], d.getMinimumWidth()+temp2[1], d.getMinimumHeight()+temp2[2]);
				switch (location){
				case 0:
					up=d;
					up.setBounds(r);
					up.draw(canvas);
					
					r.top+=d.getMinimumHeight();
					r.bottom+=d.getMinimumHeight();
					middle=getResources().getDrawable(nBean.getNumberImages()[temp2[0]-1<0?temp2[0]-1+10:temp2[0]-1]);
					middle.setBounds(r);
					middle.draw(canvas);
					
					if((r.top+d.getMinimumHeight())>=height){
						r.top-=d.getMinimumHeight()*2;
						r.bottom-=d.getMinimumHeight()*2;
						down=getResources().getDrawable(nBean.getNumberImages()[temp2[0]+1>9?temp2[0]+1-10:temp2[0]+1]);
					}else{
						r.top+=d.getMinimumHeight();
						r.bottom+=d.getMinimumHeight();
						down=getResources().getDrawable(nBean.getNumberImages()[temp2[0]-2<0?temp2[0]-2+10:temp2[0]-2]);
					}						
					down.setBounds(r);
					down.draw(canvas);
					break;
				case 1:
					middle=d;
					middle.setBounds(r);
					middle.draw(canvas);
					
					r.top-=d.getMinimumHeight();
					r.bottom-=d.getMinimumHeight();
					up=getResources().getDrawable(nBean.getNumberImages()[temp2[0]+1>9?temp2[0]+1-10:temp2[0]+1]);
					up.setBounds(r);
					up.draw(canvas);
					
					if((r.top+d.getMinimumHeight()*2)>=height){
						r.bottom=r.top;
						r.top-=d.getMinimumHeight();
						down=getResources().getDrawable(nBean.getNumberImages()[temp2[0]+2>9?temp2[0]+2-10:temp2[0]+2]);
					}else{
						r.top+=d.getMinimumHeight()*2;
						r.bottom+=d.getMinimumHeight()*2;
						down=getResources().getDrawable(nBean.getNumberImages()[temp2[0]-1<0?temp2[0]-1+10:temp2[0]-1]);
					}
					down.setBounds(r);
					down.draw(canvas);
					break;
				case 2:
					down=d;
					down.setBounds(r);
					down.draw(canvas);
					
					r.top-=d.getMinimumHeight();
					r.bottom-=d.getMinimumHeight();
					middle=getResources().getDrawable(nBean.getNumberImages()[temp2[0]+1>9?temp2[0]+1-10:temp2[0]+1]);
					middle.setBounds(r);
					middle.draw(canvas);

					r.top-=d.getMinimumHeight();
					r.bottom-=d.getMinimumHeight();
					up=getResources().getDrawable(nBean.getNumberImages()[temp2[0]+2>9?temp2[0]+2-10:temp2[0]+2]);
					up.setBounds(r);
					up.draw(canvas);
					break;
				}
				temp2[2]+=mvingDistance;
				j++;
			}
		}
		holder.unlockCanvasAndPost(canvas);
	}
	//画初使数值前赋值高度
	private void drawStatic(String num){
		Canvas canvas=holder.lockCanvas(null);
		drawbackground(canvas);
		for(int i=0;i<nBean.getNotWheelImages().length;i++){
			int temp=nBean.getNotWheelImages()[i];
			if(temp!=0){
				middle=getContext().getResources().getDrawable(temp);
			}else{
				temp=nBean.getNumberImages()[Integer.parseInt(num.substring(i, i+1))];
				middle=getContext().getResources().getDrawable(temp);
			}
			middle.setBounds(nBean.getLocations()[i][0],nBean.getLocations()[i][1],nBean.getLocations()[i][0]+middle.getMinimumWidth(),nBean.getLocations()[i][1]+middle.getMinimumHeight());
			middle.draw(canvas);
		}
		holder.unlockCanvasAndPost(canvas);
	}
	//画背景
	private void drawbackground(Canvas canvas){
		background.setBounds(0, 0, background.getMinimumWidth(), background.getMinimumHeight());
		background.draw(canvas);
	}
	//回调
	public interface CallBackListener{
		public void start();
		public void end();
	}	
	
	public static class NumberBean{
		private int [] numberImages=null;//数字图片资源,顺序从0-9
		private int [] notWheelImages=null;//不滚动资源，要给滚动资源留出位置并且值必须为0
		private int [][] locations=null;//每个位置的x,y坐标
		private float startShowNum=0f;//开始时显示数值
		private float endShowNum=0f;//最终显示数值
		private String startShowNumString=null;//初始数字字符串
		private String endShowNumString=null;//结束数字字符串
		private int [][] runningNum;//正在运行的坐标记录
		private int backgroundImage=0;//背景资源
		
		private int integerDigits=3;//整数位个数
		private int fractionDigits=2;//小数位个数
		
		public NumberBean(int [] numberImages,int [] notWheelImages,float startShowNum,float endShowNum,int backgroundImage){
			this.numberImages=numberImages;
			this.notWheelImages=notWheelImages;
			this.startShowNum=startShowNum;
			this.endShowNum=endShowNum;
			this.backgroundImage=backgroundImage;
			
			init();
		}
		
		public NumberBean(int [] numberImages,int [] notWheelImages,float startShowNum,float endShowNum,int backgroundImage,int integerDigits,int fractionDigits){
			this.numberImages=numberImages;
			this.notWheelImages=notWheelImages;
			this.startShowNum=startShowNum;
			this.endShowNum=endShowNum;
			this.backgroundImage=backgroundImage;
			this.integerDigits=integerDigits;
			this.fractionDigits=fractionDigits;
			init();
		}
		public NumberBean(){
			numberImages=new int[10];
			numberImages[0]=R.drawable.num_0;
			numberImages[1]=R.drawable.num_1;
			numberImages[2]=R.drawable.num_2;
			numberImages[3]=R.drawable.num_3;
			numberImages[4]=R.drawable.num_4;
			numberImages[5]=R.drawable.num_5;
			numberImages[6]=R.drawable.num_6;
			numberImages[7]=R.drawable.num_7;
			numberImages[8]=R.drawable.num_8;
			numberImages[9]=R.drawable.num_9;
			
			notWheelImages=new int[7];
			notWheelImages[0]=R.drawable.gold_flag;
			notWheelImages[1]=0;
			notWheelImages[2]=0;
			notWheelImages[3]=0;
			notWheelImages[4]=R.drawable.num_point;
			notWheelImages[5]=0;
			notWheelImages[6]=0;
			
			startShowNum=0f;
			endShowNum=151.51f;
			backgroundImage=R.drawable.background_num_wheel;
			
			init();
		}
		//初使化基本信息
		public void init(){
			NumberFormat nf=NumberFormat.getCurrencyInstance();
			nf.setMaximumIntegerDigits(integerDigits);
			nf.setMaximumFractionDigits(fractionDigits);
			nf.setMinimumIntegerDigits(integerDigits);
			nf.setMinimumFractionDigits(fractionDigits);
			startShowNumString=nf.format(getStartShowNum());
			endShowNumString=nf.format(getEndShowNum());
			
			runningNum=new int[integerDigits+fractionDigits][];
			char [] ssns=startShowNumString.toCharArray();
			char [] esns=endShowNumString.toCharArray();
			for (int i = 0,j=0; i < ssns.length; i++) {
				char c=ssns[i];
				if(c>47&&c<58){
					runningNum[j]=new int[4];
					runningNum[j][0]=c-48;
					int ec=esns[i]-48;
					if(runningNum[j][0]==ec&&endByOrder(j))
						runningNum[j][3]=0;
					else
						runningNum[j][3]=1;
					j++;
				}
			}
		}
		public void reset(Context context,int width,int height){
			init();
			doLocations(context, width, height);
		}
		public int[] getNumberImages() {
			return numberImages;
		}
		public void setNumberImages(int[] numberImages) {
			this.numberImages = numberImages;
		}
		public int[] getNotWheelImages() {
			return notWheelImages;
		}
		public void setNotWheelImages(int[] notWheelImages) {
			this.notWheelImages = notWheelImages;
		}
		public int[][] getLocations() {
			return locations;
		}
		public void setLocations(int[][] locations) {
			this.locations = locations;
		}
		public int getBackgroundImage() {
			return backgroundImage;
		}
		public void setBackgroundImage(int backgroundImage) {
			this.backgroundImage = backgroundImage;
		}
		
		public float getStartShowNum() {
			return startShowNum;
		}

		public void setStartShowNum(float startShowNum) {
			this.startShowNum = startShowNum;
		}

		public float getEndShowNum() {
			return endShowNum;
		}

		public void setEndShowNum(float endShowNum) {
			this.endShowNum = endShowNum;
		}
		
		public String getStartShowNumString() {
			return startShowNumString;
		}
		public void setStartShowNumString(String startShowNumString) {
			this.startShowNumString = startShowNumString;
		}
		public String getEndShowNumString() {
			return endShowNumString;
		}
		public void setEndShowNumString(String endShowNumString) {
			this.endShowNumString = endShowNumString;
		}
		
		public int[][] getRunningNum() {
			return runningNum;
		}

		public void setRunningNum(int[][] runningNum) {
			this.runningNum = runningNum;
		}
		//按顺序结束滚动
		private boolean endByOrder(int j){
			for (int i = 0; i < j; i++) {
				int [] temp=getRunningNum()[i];
				if(temp[3]!=0)
					return false;
			}
			return true;
		}
		//赋值位置坐标
		public void doLocations(Context context,int width,int height){
			locations=new int[notWheelImages.length][];
			for(int i=0,j=0;i<notWheelImages.length;i++){
				locations[i]=new int[2];
				locations[i][0]=width/notWheelImages.length*i+10;
				Drawable d=null;
				if(notWheelImages[i]==0){
					d=context.getResources().getDrawable(getNumberImages()[notWheelImages[i]]);
					runningNum[j][1]=locations[i][0];
					runningNum[j][2]=locations[i][1];
					j++;
				}else{
					d=context.getResources().getDrawable(notWheelImages[i]);
				}
				locations[i][1]=(height-d.getMinimumHeight())/2;
			}
		}
	}
}



 

工程下载地址1：http://download.csdn.net/detail/qiongshan0475/8032775(需要另建v7工程)
工程下载地址2：http://download.csdn.net/detail/qiongshan0475/8140303(无错版)

                    

                    

                    
                    
                    
效果预览
▌滚动数字的效果预览，位数设置：10，初始值：0，测试时，把显示数字手动修改为 1234567890  的效果，#免费提供代码#，具体获取方法，参考文章结尾部分。
使用说明
▌创建一个空节点，给空节点添加本实例中的脚本 RollNumber 组件，还需要额外添加两个组件 Mask 组件和 Layout 组件，添加完效果，大致如下图所示，文字居中显示，节点当做正常节点进行使用即可。
▌Mask 组件主要用来控制数字的显示，Layout 用来控制多位数字的显示，Layout 需要设置成水平方向，Mode 需要设置成 Container 方式，设置如下图。
▌RollNumber 组件支持显示位数、运动速率的设置，使用时，需要设置每一位数字的显示宽度 width（注意不是所有位数的宽度），还需要设置 0-9 每个数字的纹理图片，并对应上数组下标，如下图所示。
实现原理
▌具体的原理是，每一位一开始把 0-9-0 数字竖直方向拼接，都置于 Layout 组件内，从上到下排列，需要显示的区域通过遮罩显示，其他不需要显示部位就不会显示出来，当需要显示指定数字时，改变父节点的纵轴坐标实现需要的数字显示。
▌上图就是去掉遮罩组件的显示效果，这样看更方便理解，其中绿色区域是显示区域，遮罩打开以后，玩家只会看到绿色区域范围。
▌运动分为两种：一种是数字从小到大，另外一种是从大到小。
▌数字从小到大，只需要获取到要运动到的位置，直接节点做 MoveTo 动作，让节点运动到指定数字即可。
▌数字从大到小，因为运动方向只有往上的，需要分三步：
1. 运动到最低端的 0 位置；
2. 整体下移，显示 0 ，这也是方便过渡，肉眼看不出变化效果；
3.  再 MoveTo 到指定的数字位置。
▌考虑到数字的长度可能会发生变化，使用节点池可以提升效率，需要的时候，从节点池获取，如果节点池是空的，重新生成。
▌数字运动的距离有长有短，计算运动时间时，需要根据偏移量计算运动时间，以达到每一位在相同时间内完成数字的变化。
获取代码
▌关注公众号，发送【滚动数字】获取代码，可以微信扫描下面二维码，关注本公众号，也可以点击开头处的蓝色字体进行关注。
往期精选
精品游戏大炮英雄附带代码！
精品动物同化附代码！
完整代码左右跳！
陀螺仪重力球代码奉上！
100关推箱子代码免费获取！
拼手速的游戏代码！
打地鼠有代码！
3D篮球投篮附代码！
3D足球射门附代码！
如何使用3D素材试玩3D！
扫描二维码
获取更多精彩
一枚小工
让我知道你在看