Я работаю над инструментом, который позволит вам просматривать содержимое «виртуального журнала». Чтобы реализовать анимацию переворота, мне нужно иметь возможность получить текущий угол поворота в каждом кадре анимации, чтобы перевернуть переднюю и заднюю стороны, когда он составляет 90 градусов.
Я заставил это работать, используя requestAnimationFrame и расчет матрицы из этой статьи:
https://css-tricks.com/get-value-of-css-rotation-through-javascript/
Это работает только при перелистывании страниц влево и вправо (с rotateY). Если я хочу перевернуться вертикально (стиль календаря), мне нужно вычислить угол для rotateX.
Может ли кто-нибудь со знанием математики помочь мне здесь?
Привет и спасибо заранее!
Изменить: вот функция, которая работает для transformY. Проверяемый элемент анимируется добавлением transform: rotateY(-180deg) с началом преобразования left:
function checkTransitionProgress() {
// SRC: https://css-tricks.com/get-value-of-css-rotation-through-javascript/
el = loremPages[index];
var st = window.getComputedStyle(el, null);
var tr = st.getPropertyValue("-webkit-transform") ||
st.getPropertyValue("-moz-transform") ||
st.getPropertyValue("-ms-transform") ||
st.getPropertyValue("-o-transform") ||
st.getPropertyValue("transform") ||
false;
var values = tr.split('(')[1].split(')')[0].split(',');
var a = values[0];
var b = values[1];
var c = values[2];
var d = values[3];
var scale = Math.sqrt(a * a + b * b);
var sin = b / scale;
var angle = Math.round(Math.atan2(b, a) * (180 / Math.PI));
if (direction == 'forwards') {
if (angle < 90) {
window.requestAnimationFrame(checkTransitionProgress);
} else {
target.style.zIndex = index;
target.frontSide.classList.remove('lorem__side--in-front');
target.backSide.classList.add('lorem__side--in-front');
}
} else {
if (angle > 90) {
window.requestAnimationFrame(checkTransitionProgress);
} else {
target.style.zIndex = targetInvertedIndex;
target.frontSide.classList.add('lorem__side--in-front');
target.backSide.classList.remove('lorem__side--in-front');
}
}
}
checkTransitionProgress();
