slowNumber.js是一款简单快速的js的数字动画插件。slowNumber.js插件以最简单的方式快速的执行数字动画特效,你甚至还可以控制每秒钟的动画帧数。
使用方法
在页面中引入slowNumber.js文件。
<script type="text/javascript" src="js/slowNumber.js"></script>
HTML结构
在页面中添加需要制作数字动画的元素,为它添加slowNumber
class类。
<h2 class="slowNumber">100,42</h2>
JavaScript
slowNumber.js的整个实现代码如下:
var easing = { quadratic: function (x){ return Math.sqrt(x); } }; function range(start, stop, step){ var array = []; for(var i = start; i < stop; i += step) array.push(i); return array; } function interpolation(fps, easing, finalValue){ function scaleIt(value){return finalValue * value; } var x = range(0, 1, 1/fps), y = x.map(easing).map(scaleIt); return y; } function animateEl(values, duration, onAnimate){ var frameIndex = 0, fps = values.length, id = setInterval(anime, duration/fps ); function anime(){ var current = values[frameIndex], isLastFrame = (frameIndex === fps - 1); onAnimate(current, frameIndex, values); if(isLastFrame){ clearInterval(id); }else{ frameIndex++; } } } function round(value, decimals) { return Number(Math.round(value+'e'+decimals)+'e-'+decimals); } function unformat(content){ var unlocalized = content.replace('.', '').replace(',', '.'), value = parseFloat(unlocalized); return value; } function format(value){ return value.toString().replace('.', ','); } window.addEventListener("DOMContentLoaded", function(){ var fps = 30, els = [].slice.call(document.querySelectorAll('.slowNumber')); els.forEach(function(el){ var content = (el.firstChild.textContent).trim(), decimalPlaces = content.split(',')[1] || '', value = unformat(content), values = interpolation(fps, easing.quadratic, value); animateEl(values, 1000, function (current, i, values){ var isLast = (i === values.length - 1), value = round(current, decimalPlaces.length); el.firstChild.textContent = isLast? content : format(value); }); }); });
slowNumber.js数字动画插件的github地址为:https://github.com/israelst/slowNumber.js
版权声明
版权说明: 仅限用于学习和研究目的;不得将上述内容用于商业和非法用途!否则一切后果自负。我们非常重视版权问题,如有侵权请邮件至(171373236#qq.com)与我们联系处理,敬请谅解!