number-flip是一款js数字翻转切换插件。该js数字翻转切换插件可以制作数字切换的动画效果,你可以自定义数字类型,使用中文或unicode,来制作类似水果机动画的效果。

安装

可以通过npm来安装该插件。

$ npm install --save number-flip                    
                

使用方法

js数字翻转切换效果-1

js数字翻转切换效果-2

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: ['零', '壹', '贰', '叁', '肆', '伍', '陆', '柒', '捌', '玖']
})
                

配置参数

该js数字翻转切换插件的可用配置参数有:

  • node:动画容器的选择器。
  • from:开始动画的数值。
  • to:结束动画的数值。
  • duration:动画的持续时间。
  • delay:延迟动画的时间。
  • easeFn:动画的easing效果。
  • systemArr:一个长度为10的数组,代表数值的内容。如果没有指定,默认为[ 0, 1, 2, 3, 4, 5, 6, 7, 8, 9 ]
  • direct:布尔值。代表数值动画是一次执行,还是一个接一个执行。
  • 该js数字翻转切换插件的github地址为:https://github.com/gaoryrt/number-flip