add: cubic bezier

package.json

@@ -29,7 +29,7 @@
     "html-webpack-plugin": "^3.2.0",
     "less": "^3.8.1",
     "less-loader": "^4.1.0",
-    "style-loader": "^0.23.0",
+    "style-loader": "^0.23.1",
     "webpack": "^4.20.2",
     "webpack-cli": "^3.1.2",
     "webpack-dev-server": "^3.1.7"

readme.md

@@ -19,6 +19,7 @@ npm i git+ssh://git@gitlab2.dui88.com:lufei/moto.git
 ```js
 import {curve, tween, easing} from 'moto'
 
+// 二次贝塞尔曲线
 curve.bezier({
   p1: {x: 0, y: 0},
   p2: {x: 50, y: 50},
@@ -29,6 +30,18 @@ curve.bezier({
   console.log(v)
 })
 
+// 三次贝塞尔曲线
+curve.cubicBezier({
+  p1: {x: 0, y: 0},
+  p2: {x: 30, y: 30},
+  p3: {x: 70, y: -30},
+  p4: {x: 100, y: 0},
+  duration: 3, // 可选
+  ease: easing.easeInOut // 时间函数，可选
+}).start(v => {
+  console.log(v)
+})
+
 curve.catmullRom(
   [{x: 0, y: 0}, {x: 50, y: 50}, {x: 100, y: 0}],
   8 // 运动速度，可选

src/app.js

@@ -24,6 +24,7 @@ document.body.on('pointerdown', ev => {
         document.body.appendChild(dot)
     } else if (target.classList.contains('btn-run')) {
         target.classList.contains('bezier') && run('bezier')
+        target.classList.contains('cubic-bezier') && run('cubicBezier')
         target.classList.contains('catmull-rom') && run('catmullRom')
         target.classList.contains('tween') && run('tween')
     } else if (target.classList.contains('btn-clear')) {
@@ -38,7 +39,7 @@ async function run(action) {
     player.setAttribute('style', '')
 
     if (action === 'bezier') {
-        if (dots.length < 2) return alert('至少 2 个点吧！')
+        if (dots.length < 2) return alert('至少 2 个点！')
         const points = Array.prototype.map.call(dots, dot => JSON.parse(dot.dataset.position))
         curve.bezier({
             p1: {x: player.offsetLeft, y: player.offsetTop},
@@ -47,14 +48,25 @@ async function run(action) {
             duration: 1,
             ease: easing.easeInOut
         }).start(trace)
+    } else if (action === 'cubicBezier') {
+        if (dots.length < 3) return alert('至少 3 个点！')
+        const points = Array.prototype.map.call(dots, dot => JSON.parse(dot.dataset.position))
+        curve.cubicBezier({
+            p1: {x: player.offsetLeft, y: player.offsetTop},
+            p2: points[0],
+            p3: points[1],
+            p4: points[2],
+            duration: 1,
+            ease: easing.easeInOut
+        }).start(trace)
     } else if (action === 'catmullRom') {
-        if (dots.length < 1) return alert('至少 1 个点吧！')
+        if (dots.length < 1) return alert('至少 1 个点！')
 
         const points = Array.prototype.map.call(dots, dot => JSON.parse(dot.dataset.position))
         points.unshift({x: player.offsetLeft, y: player.offsetTop})
         curve.catmullRom(points).start(trace)
     } else if (action === 'tween') {
-        if (dots.length < 1) return alert('至少 1 个点吧！')
+        if (dots.length < 1) return alert('至少 1 个点！')
 
         const points = Array.prototype.map.call(dots, dot => JSON.parse(dot.dataset.position))
 

src/core/curve/bezier.cubic.js

+import {linear} from '../easing'
+
+export default function(option) {
+    const {p1, p2, p3, p4, duration = 1, ease = linear} = option
+
+    function start(option) {
+        let id, update, complete, t = 0
+
+        if (option instanceof Function) update = option
+        else ({update, complete} = option)
+
+        !function loop() {
+            t += 1 / 60 / duration
+            t > 1 ? t = 1 : null
+            update(bezier(p1, p2, p3, p4, ease(t)))
+            t === 1 ? complete && complete() : id = requestAnimationFrame(loop)
+        }()
+
+        return {
+            stop() {
+                cancelAnimationFrame(id)
+            }
+        }
+    }
+
+    return {start}
+}
+
+function bezier(p1, p2, p3, p4, t) {
+    return {
+        x: calc(p1.x, p2.x, p3.x, p4.x, t),
+        y: calc(p1.y, p2.y, p3.y, p4.y, t)
+    }
+}
+
+function calc(p1, p2, p3, p4, t) {
+    return (1 - t) ** 3 * p1 +
+        3 * (1 - t) ** 2 * t * p2 +
+        3 * (1 - t) * t ** 2 * p3 +
+        t ** 3 * p4
+}
\ No newline at end of file

src/core/curve/index.js

 export bezier from './bezier'
+export cubicBezier from './bezier.cubic'
 export catmullRom from './catmullRom'
\ No newline at end of file

src/template.html

 <!DOCTYPE html>
 <html>
     <head>
-        <title>Curve</title>
+        <title>MOTO</title>
         <meta charset="UTF-8">
         <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
         <meta http-equiv="X-UA-Compatible" content="ie=edge">
@@ -13,6 +13,7 @@
         <section class="btn-group">
             <button class="btn-clear">Clear</button>
             <button class="btn-run bezier">Bezier</button>
+            <button class="btn-run cubic-bezier">Cubic Bezier</button>
             <button class="btn-run catmull-rom">CatmullRom</button>
             <button class="btn-run tween">Tween</button>
         </section>