i'm using the vis-timeline library. In the documentations there is no property for easing the touch pan-x when navigating the timeline, resulting in a stiff and rigid navigation.
I tried this:
timeline.on('rangechange', function(properties) {
var windowStart = timeline.getWindow().start;
var windowEnd = timeline.getWindow().end;
var distance = properties.event.deltaX * properties.event.velocityX;
var newWindowStart = windowStart.valueOf() - distance;
var newWindowEnd = windowEnd.valueOf() - distance;
timeline.setWindow(newWindowStart, newWindowEnd, {
animation: {
easingFunction: 'easeInOutQuad'
}
});
});
How can i implement an eased panX navigation?
Ok, i find a solution.
Here's my code:
timeline.on("rangechanged", (properties) => {
if (properties.event) {
let distance =
properties.event.deltaX *
Math.abs(properties.event.velocityX);
let newWindowStart = new Date(
properties.start.valueOf() - distance * 100000000
);
let newWindowEnd = new Date(
properties.end.valueOf() - distance * 100000000
);
timeline.setWindow(
newWindowStart,
newWindowEnd,
{
animation: {
duration: 500,
easingFunction: "easeOutQuad",
},
}
);
}
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.