English Document
<a href="./README-EN.md">English Document</a>
Contents
安装
-
通过
npm
安装(推荐):$ npm install tumblingTumbling支持es:next规范,支持tree-shaking
-
或者直接在html中引入
使用
new DomNumberTumbling(selector,options)(数值动画类)
;;const domNumberTumbling = eloptions;domNumberTumblingstart;
new DomCountdownTumbling(selector,options)(倒计时动画类)
;;const domCountdownTumbling = el transitionTime:800 effect:FlipEffect rotateDirection:FlipRenderVERTICAL //水平翻转还是垂直翻转 value:domCountdownTumblingstart;
new DomRawTumbling(selector,options)(无限滚动类)
;;el transitionTime:3000 value:10//十个坑位 或者 传入数组 [{step:步长,maxValue:最大值}] { };
selector(Dom选择符)
selector -- pass String
| HTMLElement
,可以传dom选择符,也可以直接传入目标dom
options(配置)
effect
(default TumblingEffect) -- passClass
效果接口,Tumbling还提供FlipEffect,开发者可以自定义,类似实现如下
{ const _this = this; _thiscontext = context; //context 就是DomCountdownTumbling,DomNumberTumbling,DomRawTumbling _thisrenderItem = optionsrenderItem; ... } { //必须有的方法,挂载dom ... } { //必须有的方法,改变dom样式 }
具体可参考FlipEffect的实现
transitionTime
(default300
) -- passNumber
动画时间value
-- passNumber
要显示的数值thousand
-- pass 'Boolean' 是否显示千分位tween
(defaultlinear
) -- passString | Function
支持传缓动函数名,也支持开发者自己实现function( t//当前耗时, b//起始位置, c//最终位置, d//动画时长)renderItem
-- passFunction
单项渲染函数,函数签名function(value),value未当前值,value小于0表示站位符,填9(因为它最宽)disappearAnimation
-- passFunction
单项消失动画函数,函数签名function(wrapper,ratio),wrapper为单项的根Dom元素,ratio为动画进度appearAnimation
-- passFunction
同disappearAnimation一样,只不过是出现动画onStop
-- passFunction
DomRawTumbling独有的回调
tween所有的缓动函数
{ return c - b * t / d + b; } { return c * t /= d * t + b; } { return -c * t /= d * t - 2 + b; } { if t /= d / 2 < 1 return c / 2 * t * t + b; return -c / 2 * --t * t - 2 - 1 + b; } { return c * t /= d * t * t + b; } { return c * t = t / d - 1 * t * t + 1 + b; } { if t /= d / 2 < 1 return c / 2 * t * t * t + b; return c / 2 * t -= 2 * t * t + 2 + b; } { return c * t /= d * t * t * t + b; } { return -c * t = t / d - 1 * t * t * t - 1 + b; } { if t /= d / 2 < 1 return c / 2 * t * t * t * t + b; return -c / 2 * t -= 2 * t * t * t - 2 + b; } { return c * t /= d * t * t * t * t + b; } { return c * t = t / d - 1 * t * t * t * t + 1 + b; } { if t /= d / 2 < 1 return c / 2 * t * t * t * t * t + b; return c / 2 * t -= 2 * t * t * t * t + 2 + b; } { return -c * Math + c + b; } { return c * Math + b; } { return -c / 2 * Math - 1 + b; } { return t == 0 ? b : c * Math + b; } { return t == d ? b + c : c * -Math + 1 + b; } { if t == 0 return b; if t == d return b + c; if t /= d / 2 < 1 return c / 2 * Math + b; return c / 2 * -Math + 2 + b; } { return -c * Math - 1 + b; } { return c * Math + b; } { if t /= d / 2 < 1 return -c / 2 * Math - 1 + b; return c / 2 * Math + 1 + b; } { var s = 170158; var p = 0; var a = c; if t == 0 return b; if t /= d == 1 return b + c; if !p p = d * 3; if a < Math a = c; var s = p / 4; else var s = p / 2 * MathPI * Math; return -a * Math * Math + b; } { var s = 170158; var p = 0; var a = c; if t == 0 return b; if t /= d == 1 return b + c; if !p p = d * 3; if a < Math a = c; var s = p / 4; else var s = p / 2 * MathPI * Math; return a * Math * Math + c + b; } { var s = 170158; var p = 0; var a = c; if t == 0 return b; if t /= d / 2 == 2 return b + c; if !p p = d * 3 * 15; if a < Math a = c; var s = p / 4; else var s = p / 2 * MathPI * Math; if t < 1 return -5 * a * Math * Math + b; return a * Math * Math * 5 + c + b; } { if s == undefined s = 170158; return c * t /= d * t * s + 1 * t - s + b; } { if s == undefined s = 170158; return c * t = t / d - 1 * t * s + 1 * t + s + 1 + b; } { if s == undefined s = 170158; if t /= d / 2 < 1 return c / 2 * t * t * s *= 1525 + 1 * t - s + b; return c / 2 * t -= 2 * t * s *= 1525 + 1 * t + s + 2 + b; } { return c - Tween + b; } { if t /= d < 1 / 275 return c * 75625 * t * t + b; else if t < 2 / 275 return c * 75625 * t -= 15 / 275 * t + 75 + b; else if t < 25 / 275 return c * 75625 * t -= 225 / 275 * t + 9375 + b; else return c * 75625 * t -= 2625 / 275 * t + 984375 + b; } { if t < d / 2 return Tween * 5 + b; return Tween * 5 + c * 5 + b; };
本地开发
npm installnpm run dev