I would like to have a smooth auto-scroll to a specific element in a Polymer 1.0 iron-list when I click on a button.
For now I have a simple auto scroll thanks to the scrollToIndex method. But I would like to have a smooth animation, like the jQuery animation $("#list").animate({ scrollTop: 300 }, 2000);
, but without jQuery .
One of the big problem I encountered is that since iron-list don't display all the items at once, I cannot find the scrollTop position of a specific item because it is not yet in the DOM.
I started a JSFiddle here : http://jsfiddle.net/c52fakyf/2/
Thanks for any help!
I just learned animation through requestAnimationFrame, and I thought about this question. I made a simple animation method:
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);
},
It's basically a recursive method that updates every time the screen refreshes. The method takes in a callback object with functions under the properties .start , .progress , and .done .
I modified your code a bit:
_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);
},
I got the easeInOut from Robert Penner's easing functions:
easeInOutQuad: function (t) { return t<.5 ? 2*t*t : -1+(4-2*t)*t },
And violá:
It's not exactly what you're asking for, but it's a start that you can continue with.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.