Всем доброго времени!
Задача: Есть svg-геометрические фигуры, которые имеют равномерное вращение по часовой (скорость V1). При скролле вверх или вниз они должны ускорять свое вращение (скорость V2). Главным критерием является плавность и неторможение эффекта, иначе в нем теряется смысл.
Вот собранный стенд:
http://proudly.ru/febotelecom/#bl-services
Проблема сейчас в том, что анимация по советам была сделана через requestAnimationFrame, то есть девайс сам решает когда ему удобно перерисовать анимацию, но но мобайл устройствах при свайпе по-видимости мощи не хватает, и анимация вместо ускорения, наоборот, подвисает. Есть ли какие-то рецепты от опытных профессоров js анимаций?
Вот код:
var $services = $('#bl-services');
$services.data('currRot', 0);
var rotationV1 = 20;
var rotationV2 = 100;
var rotationTid = false;
function servicesRotationCycle() {
var currTs = Date.now();
var dt = (currTs - $services.data('startTs')) / 1000;
var rot = $services.data('startRot') + $services.data('speed') * dt;
// debug
//console.log('speed:', $services.data('speed'), 'rotation:', $services.data('startRot'), rot);
$services.data('currRot', rot);
$('#figure1').rotate({animateTo: Math.round(rot)});
$('#figure2').rotate({animateTo: Math.round(rot)});
$('#figure4').rotate({animateTo: Math.round(rot)});
requestAnimationFrame(servicesRotationCycle);
}
function servicesRotationRegisterPoint(speed) {
$services.data({
'startTs': Date.now(),
'startRot': $services.data('currRot'),
'speed': speed,
});
}
scrollCallbacks.push(function() {
if (rotationTid) {
clearTimeout(rotationTid);
} else {
servicesRotationRegisterPoint(rotationV2);
}
rotationTid = setTimeout(function() {
servicesRotationRegisterPoint(rotationV1);
rotationTid = false;
}, 50);
});
setTimeout(function() {
servicesRotationRegisterPoint(rotationV1);
requestAnimationFrame(servicesRotationCycle);
}, 100);
Да, еще: используется Jquery.rotate (
https://jqueryrotate.com/)
