number-flip是一款js数字翻转切换插件。该js数字翻转切换插件可以制作数字切换的动画效果,你可以自定义数字类型,使用中文或unicode,来制作类似水果机动画的效果。
安装
可以通过npm来安装该插件。
$npm install --save number-flip
HTML结构
使用一个<div>作为数字的容器。
<div class="flip"></div>
初始化插件
使用该插件的基本语法格式为:
var flipInstance = new Flip(options) flipInstance.flipTo(instanceOptions)
使用下面的方法来制作数字翻转动画。
new Flip({ node: $('.flip'), from: 9527, to: 42 })
给数字翻转动画设置一个延迟时间。
new Flip({ node: $('.flip'), from: 9527, to: 42, delay: 1 // second })
先创建一个对象,在后面在执行数字翻转动画。
const el = new Flip({ node: $('.flip'), from: 9527 }) el.flipTo({to: 42})
自定义动画的持续时间。
new Flip({ node: document.querySelector('.flip'), from: 9527, to: 42, duration: 2 // second })
高级用法。
new Flip({ node: document.querySelector('.flip'), from: 73, to: 25, duration: 2, delay: 1, easeFn: function(pos) { if ((pos/=0.5) < 1) return 0.5*Math.pow(pos,3); return 0.5 * (Math.pow((pos-2),3) + 2); }, // for more easing function, see https://github.com/danro/easing-js/blob/master/easing.js systemArr: ['零', '壹', '贰', '叁', '肆', '伍', '陆', '柒', '捌', '玖'] })