feat: support scroll animation

Author: ibufu

docs-src/src/index.js

@@ -1,8 +1,10 @@
 import Vue from 'vue'
 import demo from './demo.vue'
-import scrollSpy from '../../src/index'
+import scrollSpy, { Easing } from '../../src/index'
 
-Vue.use(scrollSpy)
+Vue.use(scrollSpy, {
+  easing: Easing.Cubic.In
+})
 
 new Vue({ // eslint-disable-line no-new
   el: '#demo',

docs/app.js

@@ -37,5 +37,8 @@
     "eslint-plugin-promise": "^3.6.0",
     "eslint-plugin-standard": "^3.0.1",
     "mkdirp": "^0.5.1"
+  },
+  "dependencies": {
+    "@tweenjs/tween.js": "^17.2.0"
   }
 }

package-lock.json

@@ -0,0 +1,34 @@
+import TWEEN from '@tweenjs/tween.js'
+
+const requestAnimationFrame = (function () {
+  return window.requestAnimationFrame ||
+    window.webkitRequestAnimationFrame ||
+    window.mozRequestAnimationFrame ||
+    window.oRequestAnimationFrame ||
+    window.msRequestAnimationFrame ||
+    function (callback) {
+      window.setTimeout(callback, 1000 / 60)
+    }
+})()
+
+function animate () {
+  if (TWEEN.update()) {
+    requestAnimationFrame(animate)
+  }
+}
+
+requestAnimationFrame(animate)
+
+export const Easing = TWEEN.Easing
+
+export function scrollWithAnimation (scrollEl, current, target, time, easing) {
+  new TWEEN.Tween({ postion: current })
+    .to({ postion: target }, time)
+    .easing(easing)
+    .onUpdate(function (val) {
+      scrollEl.scrollTop = val.postion
+    })
+    .start()
+
+  animate()
+}

package.json

@@ -1,3 +1,5 @@
+import { scrollWithAnimation, Easing } from './animate.js'
+
 export default function install (Vue, options) {
   const bodyScrollEl = {}
 
@@ -35,8 +37,9 @@ export default function install (Vue, options) {
     allowNoActive: false,
     data: null,
     offset: 0,
-    time: 200,
+    time: 500,
     steps: 30,
+    easing: null,
     active: {
       selector: null,
       class: 'active'
@@ -114,6 +117,11 @@ export default function install (Vue, options) {
 
     if (idScrollSections[index]) {
       const target = getOffsetTop(idScrollSections[index]) - options.offset
+      if (options.easing) {
+        scrollWithAnimation(scrollEl, current, target, options.time, options.easing)
+        return
+      }
+
       const time = options.time
       const steps = options.steps
       const timems = parseInt(time / steps)
@@ -287,3 +295,5 @@ export default function install (Vue, options) {
     }
   })
 }
+
+export { Easing }