Heim > Artikel > Web-Frontend > So erreichen Sie die Rückkehr nach oben durch die Tween-Methode im Vue-Projekt

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

亚连Original: 2018-06-02 10:07:082899Durchsuche

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>

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)
          }
        })
      }
    }

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!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：So fügen Sie dem vue-cli-Build-Projekt eine Hintergrund-Mock-Schnittstelle hinzuNächster Artikel：So fügen Sie dem vue-cli-Build-Projekt eine Hintergrund-Mock-Schnittstelle hinzu

In Verbindung stehende Artikel

Mehr sehen