Сначала посмотрите на эффект анимации:
Эта анимация выглядит немного сложной, но на самом деле она проще, чем вы думаете.
Это всего лишь простой синтез переноса и вращения, который в целом анализируется ниже.
1. Положение мыши
Чтобы следить за движением мыши, первым шагом является получение положения мыши.
Вы можете привязать событие mousemove к холсту, чтобы вы могли получить абсолютное положение мыши относительно страницы (pageX, pageY), а затем вычесть смещение самого холста, вы можете получить относительное положение мыши к холсту. Основной код:
canvas.addEventListener('mousemove', event => {
mouse.x = event.pageX - canvas.offsetLeft
mouse.y = event.pageY - canvas.offsetTop
})
2. Направление мыши относительно стрелки
Зная положение мыши и стрелки, вы можете вычислить некоторые полезные значения, такие как горизонтальное и вертикальное расстояние между ними.
По обратной функции тригонометрической функции тангенса можно получить соответствующий угол. В объекте Math есть две функции арктангенса atan и atan2. Одним из наиболее полезных является менее заметный atan2.
var dx = mouse.x - arrow.x
var dy = mouse.y - arrow.y
var angle = Math.atan2(dy, dx)
3. Повернуть анимацию
Используйте requestAnimationFrame (рутинная операция анимации холста), чтобы обновить угол стрелки в реальном времени, и вы можете создать анимацию, которая следует за вращением мыши.
;(function drawFrame() {
window.requestAnimationFrame(drawFrame)
context.clearRect(0, 0, canvas.width, canvas.height)
var dx = mouse.x - arrow.x
var dy = mouse.y - arrow.y
var angle = Math.atan2(dy, dx)
arrow.angle = angle
arrow.draw(context)
})();
drawFrame используется в качестве функции обратного вызова перед следующей перерисовкой браузера.Каждый кадр очищает холст, а затем рисует стрелку под определенным углом. Эффект следующий:
Нажмите, чтобы посмотреть эффект
4. Панорамная анимация
Чтобы получить анимацию панорамирования, просто измените положение стрелки с постоянной скоростью.
arrow.x += vx
arrow.y += vy
Сложность здесь в том, как рассчитать горизонтальную и вертикальную скорость. Предположим, что скорость движения мыши равна v, тогда соотношение между тремя должно выполняться:
Следовательно, угол только что был вычислен, то по тригонометрической функции:
vx = Math.cos(angle) * v
vy = Math.sin(angle) * v
Эффект следования за движением независимо от вращения выглядит следующим образом:
Нажмите, чтобы посмотреть эффект
5. Окончательный эффект
Двигайтесь к мышке, указывая на нее, чтобы добиться эффекта начала статьи.
Нажмите здесь, чтобы просмотреть результаты
Обратите внимание, что в код добавлено следующее суждение, чтобы предотвратить ошибку вибрации анимации перевода.
if (dx * dx + dy * dy < v * v) {
vx = 0
vy = 0
} else {
vx = Math.cos(angle) * v
vy = Math.sin(angle) * v
}
Причину шока можно проанализировать. Например, стрелка находится на расстоянии 1 пикселя от мыши, и после добавления скорости 2 в следующем кадре расстояние становится равным -1, а направление становится противоположным. В следующем кадре расстояние снова становится равным 1, после чего колебание прекращается. Решение здесь довольно прямолинейное: как только расстояние станет меньше v (скорость — это расстояние, пройденное за один кадр), он перестанет двигаться напрямую.
Эта анимация очень распространена, и она также упоминается в Библиографии 2, но принцип неожиданно прост.
Кроме того, в игре с самолетом вражеский самолет автоматически движется к вам по той же логике.
Эта статья представляет собой просто общий анализ принципа, я надеюсь, что это поможет.
над.
Ниже приводится введение в эту серию.
В конце 2019 года я установил флаг для изучения технологии анимации холста в 2020 году.
(QR-код на картинке — мой единственный идентификатор WeChat. Если вы хотите добавить его, обратите внимание на [самородки].)
В этой серии я хочу написать некоторые общие знания об анимации.Эта статья вторая, и ее длина может варьироваться. Для получения дополнительной информации, пожалуйста, проверьте мою личную страницу, или"Каталог серий".
Из-за проблемы с местом, по прошлому опыту, количество лайков будет не слишком большим, ведь всем нравится лайкать статьи, которые невозможно прочитать за короткое время. Ну мне кажется тоже так. ^_^
На самом деле написание статей в основном для себя, это свидетельство самосовершенствования. Может быть, лучше иметь такое отношение.
К тому же про технологию холста я прочитал 3 книги полностью. Это выше основ.
1.«Основная технология холста HTML5»
2.«Основы анимации HTML5+JavaScript»
3.Руководство по программированию WebGL
Некоторые статьи в этой серии могут ссылаться на систему знаний в ней.Для некоторых предметных знаний консенсуса, если есть частичное сходство, мы можем только сказать: "Я узнал это своими собственными навыками, как это может считаться плагиатом..." .
Шучу, источник идеи можно назвать одним предложением или одним предложением. Мне особенно нравится абзац в статье «Элитный дневной класс»:
Что касается содержания статьи, API холста, эту серию можно не вводить по одному, прошу прощения за новичков. У MDN он есть, очень подробный. При этом будет кратко упомянуто то, что встречается в статье. Основное ядро состоит в том, чтобы объяснить некоторое личное понимание знаний на уровне навыков и принципов. Кроме того, я также планирую проанализировать принципы реализации некоторых крутых анимаций на codepen.Если будет время, я могу проанализировать несколько анимационных движков, конечно, все они 2D.
Еще раз спасибо, что дочитали до этого места. Увидимся в следующей статье.