So erreichen Sie die Rückkehr nach oben durch die Tween-Methode im Vue-Projekt-js-Tutorial-php.cn

So erreichen Sie die Rückkehr nach oben durch die Tween-Methode im Vue-Projekt

亚连

Freigeben： 2018-06-02 10:07:08

Original

2909 Leute haben es durchsucht

In diesem Artikel wird hauptsächlich die Implementierung der Tween-Methode im Vue-Projekt vorgestellt. Jetzt werde ich sie mit Ihnen teilen und eine Referenz geben.

1. Szene

tween.js ist eine js-Animationsbibliothek, die reibungslose Animationseffekte erzeugen kann

Wenn Sie was tun Tun Sie das, wenn Sie eine Funktion zum Zurückkehren nach oben implementieren möchten? Die meisten Leute verwenden document.body.scrollTop =0; Nun, verwenden Sie Tween. Lassen Sie es uns mit Easing tun und sehen, wie es funktioniert.

Wir haben bereits Artikel zum Thema Tween geschrieben, daher werden wir sie hier nicht vorstellen.

2. Code

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title></title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <style type="text/css">
      #app{width: 100%; height: 3000px;background: #CCCCCC;}
      .backTop{
        width: 1.5rem;
        height: 1.5rem;
        border: 1px solid #ff0000;
        position: fixed;
        right: 1rem;
        bottom: 2rem;
        border-radius: 50%;
        /*background: url(/static/imgs/backtop20180226.png) no-repeat 40%;*/
        background-size: 70% 100%;
      }
    </style>
  </head>
  <body>
    <p id="app">
      <p @click="backTop()" class="backTop">Top</p>
    </p>
    
    <script type="text/javascript">
      var app = new Vue({
        el:"#app",
        data:{
          
        },
        methods:{
          backTop(){
//             * t: current time（当前时间）；
//             * b: beginning value（初始值）；
//             * c: change in value（变化量）；
//             * d: duration（持续时间）。
            var Tween = {
              Linear: function(t, b, c, d) { //匀速运动，想要实现其他的效果可以使用tween的其他方法
                return c * t / d + b; 
              }
            }
            Math.tween = Tween;
            var t = 1;
            const b = document.documentElement.scrollTop;
            const c = 50;
            const d = 5;
            const setInt = setInterval(()=>{
              t--;
              console.log(t)
              if(document.documentElement.scrollTop == 0){clearInterval(setInt)}
              console.log(t);
              const backTop = Tween.Linear(t,b,c,d);
               console.log(backTop);
              document.documentElement.scrollTop = backTop;
            },20)
          }
        }
      })
    </script>
  </body>
</html>

Nach dem Login kopieren

3. requestAnimationFrame schreibt die setInterval-Methode neu:

methods:{
      backTop(){
        var Tween = {
          Linear: function(t, b, c, d) { //匀速
            return c * t / d + b; 
          }
        }
        Math.tween = Tween;
        var t = 1;
        const b = document.body.scrollTop;
        const c = 1;
        const d = 1;
        var timer;
        timer= requestAnimationFrame(function fn(){
          if(document.body.scrollTop > 0){
            t--;
            console.log(t)
            console.log(t);
            const backTop = Tween.Linear(t,b,c,d);
             console.log(backTop);
            document.body.scrollTop = backTop;
            timer = requestAnimationFrame(fn);
          }else{
            cancelAnimationFrame(timer)
          }
        })
      }
    }

Nach dem Login kopieren

Das oben Gesagte habe ich für Sie zusammengestellt. Ich hoffe, es wird Ihnen in Zukunft hilfreich sein.

Verwandte Artikel:

Über die Ungültigmachung von Schriftarten und Bildressourcen nach der Vue-Verpackung (ausführliches Tutorial)

Verwenden der BootStrap-Benutzererfahrung Framework in React (Detailliertes Tutorial)

Automatische Erfassung und Ablauf von Cookies durch Webcrawler (Detailliertes Tutorial)

Das obige ist der detaillierte Inhalt vonSo erreichen Sie die Rückkehr nach oben durch die Tween-Methode im Vue-Projekt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!