├── README.md ├── curve.js ├── one.gif ├── three.jpg └── two.gif /README.md: -------------------------------------------------------------------------------- 1 | # TigerCurve 2 | 生成运行曲线函数 3 | 4 | ### 用法 5 | **1.** 在8个数(0-7)为周期的循环中，到达目标值4,时间为5秒，返回一个速度曲线。这个曲线函数只有一个参数time,返回当前的位置。 如果为手动停止，时间传-1,调用stop停止。如需调整停止的快慢，根据源文件中的注释调整相应参数即可。 6 | 7 | 实例: 8 | > var func = getCurve(8,4,5) 9 | > var result = func(3) //在第3秒的位置，为result 10 | 11 | > var func = getCurve(8,4,-1) //手动停止 12 | > func.stop() //主动停止，会调整加速度，自动停在目标值。 13 | 14 | 效果图(曲线轨迹在最后一张图左边): 15 | 16 | ![two](https://github.com/zx6733090/TigerCurve/blob/master/two.gif) 17 | 18 | **2.** 从4个点中，选择目标值，闪烁由慢到快，最后停在目标点 19 | 20 | 实例: 21 | > var func = getFourCurve(8,4,5) 22 | > var result = func(3) //在第三秒需要显示的点数组 23 | 24 | 效果图(曲线轨迹在最后一张图右边): 25 | 26 | ![one](https://github.com/zx6733090/TigerCurve/blob/master/one.gif) 27 | 28 | 曲线轨迹: 29 | 30 | ![three](https://github.com/zx6733090/TigerCurve/blob/master/three.jpg) 31 | -------------------------------------------------------------------------------- /curve.js: -------------------------------------------------------------------------------- 1 | //获取运行曲线函数 2 | //@param {Number} period 循环周期 3 | //@param {Number} targetValue 目标值。假设周期是8，目标值可以值0到7任意一个数字 4 | //@param {Number} time 运行时间。-1表示手动停止 5 | //@return {Number} 当前位置，-1表示结束 6 | function getCurve(period, targetValue, time) { 7 | //最大运行速度，如果循环周期长，可以调快点 8 | var maxSpeed = 30 9 | if (time > 0) { 10 | //加速多少圈达到最大速度，表示停止的快慢 11 | var easeCircle = 12 12 | var n = Math.max(parseInt(maxSpeed * time / period) - easeCircle, 1) 13 | //加速时间 14 | var t1 = time - (n * period + targetValue) / maxSpeed 15 | //加速度 16 | var acc = maxSpeed / t1 17 | return function (t) { 18 | var rs = 0; 19 | if (t < t1) { 20 | //第一段 加速 21 | rs = acc * t * t / 2 22 | } else if (t < time - t1) { 23 | //第二段 匀速 24 | rs = maxSpeed / 2 * t1 + (t - t1) * maxSpeed 25 | } else { 26 | //第三段 减速 27 | var decTime = (t - (time - t1)) 28 | var cur = maxSpeed - acc * decTime 29 | if (cur < 0) { 30 | rs = -1 31 | } else { 32 | rs = maxSpeed / 2 * t1 + (time - 2 * t1) * maxSpeed + (cur + maxSpeed) / 2 * decTime 33 | } 34 | } 35 | //输出规范化的值 36 | return Math.round(rs) % period 37 | } 38 | } else { 39 | //停止状态 40 | var bStop = 0 41 | //调用停止命令的时候，之前运行的时间 42 | var decTime = 0 43 | //调用停止命令的时候，走的路程 44 | var distance = 0 45 | var acc = maxSpeed / 0.5 46 | var func = function (t) { 47 | var rs = 0 48 | if (t < 0.5) { 49 | //第一段 加速 50 | rs = acc * t * t / 2 51 | } else if (bStop == 0) { 52 | //第二段 匀速 ，没有停止命令前，一直保持 53 | rs = maxSpeed / 2 * 0.5 + (t - 0.5) * maxSpeed 54 | } else if (bStop == 1) { 55 | //开始减速，计算需要到达指定位置所需的加速度 56 | bStop = 2 57 | decTime = t 58 | distance = Math.round(maxSpeed / 2 * 0.5 + (t - 0.5) * maxSpeed) 59 | //减速的圈数，表示减速的快慢 60 | var easeCircle = 6 61 | var remain = targetValue - distance % period + easeCircle * period 62 | acc = maxSpeed * maxSpeed / (2 * remain) 63 | } 64 | if (bStop == 2) { 65 | //减速，到达指定位置 66 | var t1 = t - decTime 67 | var cur = maxSpeed - acc * t1 68 | rs = cur < 0 ? -1 : distance + (maxSpeed + cur) / 2 * t1 69 | } 70 | //输出规范化的值 71 | return Math.round(rs) % period 72 | } 73 | func.stop = function () { 74 | bStop = 1 75 | } 76 | return func 77 | } 78 | } 79 | //获取四个点曲线 80 | //@return {Array} 显示位置数组，null表示结束 81 | function getFourCurve(period, targetValue, time) { 82 | var arr = [] 83 | for (var i = 0; i < period; i++) { 84 | if (i != targetValue) { 85 | arr.push(i) 86 | } 87 | } 88 | //随机除目标值之外的3个值 89 | var rs = [targetValue] 90 | for (i = 0; i < 3; i++) { 91 | var idx = parseInt(Math.random() * arr.length) 92 | rs.push(arr[idx]) 93 | arr.splice(idx, 1) 94 | } 95 | var bEnd = false 96 | return function (t) { 97 | if (bEnd) { 98 | return null 99 | } 100 | var rapid = 2 101 | var early = time - rapid 102 | var gap = t < early ? 0.3 : 0.05 103 | if (t < time) { 104 | return parseInt(t / gap) % 2 == 0 ? rs : [] 105 | } else { 106 | bEnd = true 107 | return [targetValue] 108 | } 109 | } 110 | } -------------------------------------------------------------------------------- /one.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zx6733090/TigerCurve/e78f864f190c3413babd76e5f486d18fbbf13304/one.gif -------------------------------------------------------------------------------- /three.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zx6733090/TigerCurve/e78f864f190c3413babd76e5f486d18fbbf13304/three.jpg -------------------------------------------------------------------------------- /two.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zx6733090/TigerCurve/e78f864f190c3413babd76e5f486d18fbbf13304/two.gif --------------------------------------------------------------------------------