код пытается заставить объект перескочить с использованием requestanimationframe не работает
Не знаю, будет ли это работать. Но вы можете попробовать что-то вроде ниже.
- Преобразование изображения в серое изображение
- Преобразование серого изображения с использованием жесткого порога. (Вы также можете попробовать порог otsu)
- Теперь результат (назовем его BW1) будет иметь вашу треснутую область, а также черные тени выступающих частей задней панели.
- Посмотрите, что на сером изображении на самом деле размыты тени. (или используйте какой-либо метод для поиска внезапных изменений в сером изображении, трещины имеют внезапные изменения)
- Некоторые из них определяют, насколько плотная (или резкость изображения)
- Затем жесткий порог значение оценки для создания другого двоичного изображения (назовем его BW2).
- Теперь
multiplyили вы можете сказатьandBW1 и BW2, чтобы получить требуемый выход.
1 ответ
Несколько вопросов здесь.
Если ваш код не является неполным, у вас нет финальной позиции где-либо в вашем коде.
Что еще более важно, функция перехода не ожидает события должным образом, вся функция запускается сразу, то есть она не ожидает перемещения перед запуском Moveown, вместо этого они работают одновременно.
Предположительно, причина, по которой вы наблюдаете только movedown, заключается в том, что оба происходят в каждом кадре, но movedown происходит после движения вверх.
Задница, которую вы сможете сказать, взглянув на приведенный ниже фрагмент, что я сделал здесь, чтобы перестроить часть вашего существующего кода. Я переместил первый вызов movedown в конец цикла moveup и сбросил время в конце movedown.
let finalPosition = 100;
let time = {
start: null,
total: 500,
};
let obj = document.querySelector('.foo');
const moveup = (now) => {
if (!time.start) time.start = now;
time.elapsed = now - time.start;
let progress = time.elapsed / time.total;
let position = progress * finalPosition;
obj.style.bottom = position + 'px';
if (progress < 1) {
requestAnimationFrame(moveup);
} else {
time.start = 0;
requestAnimationFrame(movedown);
}
};
const movedown = (now) => {
if (!time.start) time.start = now;
time.elapsed = now - time.start;
let progress = time.elapsed / time.total;
let position = finalPosition*(1-progress);
obj.style.bottom = position + 'px';
if (progress < 1) {
requestAnimationFrame(movedown);
} else {
time.start = 0;
}
};
function jump() {
requestAnimationFrame(moveup);
}
document.addEventListener('keydown', jump, false);.foo {
position: absolute;
left: 50%;
bottom: 0;
transform: translateX(-50%) translateY(-50%);
}
.frame {
height: 150px;
width: 150px;
position: absolute;
top: 50%;
right: 50%;
transform: translateX(50%) translateY(-50%);
background-color: #cdb;
}<div class="frame">
<div class="foo">