Математика и облегчение для анимации Javascript/Canvas Предварительная загрузка анимации

Question

Я создаю анимацию предварительной загрузки изображения, то есть кружок/пирог, который нарисован. Каждый «срез» - totalImages/imagesLoaded. Поэтому, если загружено четыре изображения и 2, он должен рисовать до 180 с течением времени.

Я использую requestAnimFrame, который отлично работает, и у меня есть настройка deltaTime, чтобы ограничить анимацию до времени, однако у меня проблемы с математикой. Самое близкое, что я могу получить, это то, что он оживляет и облегчает приближение, где он должен быть, но тогда приращения значения становятся все меньше и меньше. По существу, он никогда не достигнет завершенного значения. (90 градусов, если одно изображение загружено, в качестве примера).

var totalImages = 4; 
var imagesLoaded = 1; 
var currentArc = 0; 

function drawPie(){ 
    var newArc = 360/totalImages * this.imagesLoaded // Get the value in degrees that we should animate to 
    var percentage = (isNaN(currentArc/newArc) || !isFinite(currentArc/newArc)) || (currentArc/newArc) > 1 ? 1 : (currentArc/newArc); // Dividing these two numbers sometimes returned NaN or Infinity/-Infinity, so this is a fallback 
    var easeValue = easeInOutExpo(percentage, 0, newArc, 1); 

    //This animates continuously (Obviously), because it's just constantly adding to itself: 
    currentArc += easedValue * this.time.delta; 

    OR 

    //This never reaches the full amount, as increments get infinitely smaller 
    currentArc += (newArc - easedValue) * this.time.delta; 
} 

function easeInOutExpo(t, b, c, d){ 
    return c*((t=t/d-1)*t*t + 1) + b; 
} 

Я чувствую, что у меня есть все правильные элементы и ценности. Я просто собираю их неправильно.

Любая помощь оценивается.

Answer 1

У вас есть идея ослабления. Реальность такова, что в какой-то момент вы нажимаете значение.
Если вы хотите немного научиться, вы можете освежиться на Zeno's paradoxes (подходящим здесь является Ахиллес и Черепаха) - это действительно коротко ... Парадокс Дихотомии - это другая сторона той же монеты.

В принципе, вы всегда на полпути, независимо от того, где «здесь» или «там» может быть, и, следовательно, вы никогда не сможете принять «окончательный» -ступенчатый.
И при работе с фракциями, например, с ослаблением, это очень верно. Вы можете всегда получить меньше.

Таким образом, решение - просто зажать его. Установите минимальную сумму, которую вы можете переместить в обновлении (2px или 1px, или 0.5px ... или поиграть).

Альтернатива (которая в итоге оказалась похожей, но, возможно, немного более яркой), заключается в установке порогового расстояния. Говорить «Как только он находится в пределах 4 пикселов дома, хватит до конца» или переключается на линейную модель, а не продолжает ослабление.