Glatte Auto Scroll mit Eisen-Liste in Polymer 1.0

Question

Ich möchte eine glatte Auto-Bildlauf zu einem bestimmten Element in einem Polymer 1.0 Eisen-Liste, wenn ich auf eine Schaltfläche klicken.

Für jetzt habe ich eine einfache automatische Bildlauf dank der scrollToIndex Methode. Aber ich hätte gerne eine glatte Animation, wie die jQuery-Animation $("#list").animate({ scrollTop: 300 }, 2000);, aber ohne jQuery.

Eines der großen Probleme, denen ich begegnet bin, ist, dass seit Iron-Liste nicht alle Elemente auf einmal anzeigen, kann ich nicht die ScrollTop-Position eines bestimmten Elements finden, weil es noch nicht im DOM ist.

Ich begann hier eine JSFiddle: http://jsfiddle.net/c52fakyf/2/

Vielen Dank für jede Hilfe!

Answer 1

Ich habe gerade Animation durch requestAnimationFrame gelernt, und ich dachte über diese Frage nach. Ich habe eine einfache Animation Methode:

animate: function(callbackObj, duration) { 
     var requestAnimationFrame = window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame; 
     var startTime = 0, percentage = 0, animationTime = 0; 

     duration = duration*1000 || 1000; 

     var animate = function(timestamp) { 

      if (startTime === 0) { 
       startTime = timestamp; 
      } else { 
       animationTime = timestamp - startTime; 
      } 

      if (typeof callbackObj.start === 'function' && startTime === timestamp) { 
      callbackObj.start(); 

      requestAnimationFrame(animate); 
      } else if (animationTime < duration) { 
      if (typeof callbackObj.progress === 'function') { 
       percentage = animationTime/duration; 
       callbackObj.progress(percentage); 
      } 

      requestAnimationFrame(animate); 
      } else if (typeof callbackObj.done === 'function'){ 
       callbackObj.done(); 
      } 
     }; 

     return requestAnimationFrame(animate); 
}, 

Es ist im Grunde eine rekursive Methode, die jedesmal, wenn der Bildschirm aktualisiert aktualisiert. Die Methode übernimmt ein Callback-Objekt mit Funktionen unter den Eigenschaften .start, .progress und .done.

ich Ihren Code ein wenig geändert:

_autoScroll: function() { 
     var sequenceObj = {}; 
     var seconds = 2; 
     var rangeInPixels = 500; 

     sequenceObj.progress = (function(percentage) { 
     this.$.itemList.scroll(0, this.easeInOutQuad(percentage)*rangeInPixels); 
     }).bind(this); 

     this.animate(sequenceObj, seconds); 
    }, 

ich die easeInOut von Robert Penners Beschleunigungsfunktionen bekam:

easeInOutQuad: function (t) { return t<.5 ? 2*t*t : -1+(4-2*t)*t }, 

und Viola:

http://jsfiddle.net/5uLhu6qa/

Es ist nicht genau wonach Sie fragen, aber es ist ein Anfang, den Sie fortführen können inue mit.