Это старая статья, отключите старый блог, статья переехала в Денвер для переиздания.
В процессе разработки часто намеренно или ненамеренно избегают знаний, связанных с математикой, и вы также знаете, что решать математические задачи очень скучно. Я обычно стараюсь использовать css3 для написания анимаций.Таймер-функцию можно выбрать по желанию, и максимум ее можно настроить.cubic-bezier, просто найдите то, что выглядит удобным. А вот как сделать анимацию более плавной и написать более естественную анимацию, честно говоря, я раньше особо не задумывался.
Каждый раз, когда моушн-дизайнер спрашивает, можно это сделать или нет, я, естественно, отказываю. Так что долгое время я очень завидовал программистам, которые умеют рисовать крутые анимации с помощью canvas.
Давайте сначала сделаем это, дело не в том, что он не будет двигаться.
Сегодня давайте поделимся контентом, связанным с тригонометрическими функциями.Я был бы очень рад, если бы кто-то научил меня этому, когда я был новичком во фронтенде.
Тригонометрические функции
Тригонометрические функции уже стали обыденностью (называемой Old School в кругу хип-хопа), и она сопровождает нас от средней школы до университета.Слишком много формул и теорем, и нужно много времени, чтобы просто справиться с экзаменом. . Сначала сделайте краткий обзор, чтобы убедиться, что вы помните основы.
Теорема Пифагора
Когда я впервые изучал тригонометрические функции, я начал с заднего крючка, три нити, четыре хорды, пять.Теорема Пифагора описывает, что для прямоугольного треугольника сумма квадратов двух сторон прямого угла равна квадрату гипотенузы.
Общие тригонометрические функции
На мой взгляд, в учебнике сохраняются только sin, cos и tan, а остальные можно получить путем трансформации.
sinθ = a / h
cosθ = b / h
tanθ = a / b
Полярная система координат и единичный круг
В декартовой системе координат любую точку (x, y) можно преобразовать в полярные координаты (r, θ), где
r = Math.sqrt(x^2 + y^2)
θ = Math.atan2(y, x)
Единичная окружность определяется как окружность с радиусом единичной длины Абсцисса любой точки на окружности является косинусом соответствующего угла, а ордината любой точки является синусом соответствующего угла.
простое преобразование изображенияВзяв в качестве примера синусоиду, простое преобразование функции даст разные результаты.
Формула синусоиды:y = A sin(Bx + C) + D
A управляет амплитудой, чем больше значение A, тем больше пики и впадины, чем меньше значение A, тем меньше пики и впадины; Значение B влияет на период, чем больше значение B, тем короче период, и чем меньше значение B, тем дольше период. Значение C влияет на движение изображения влево и вправо.При положительном значении C изображение перемещается влево, а при отрицательном значении C изображение перемещается вправо. Значение D управляет движением вверх и вниз.
Эта формула очень полезна, если приведенный ниже код вас смущает, не забудьте вернуться и проверить комментарии.
После краткого обзора убедитесь, что вы помните основы, так во что же превратится этот когда-то такой-то-так-так-так-так-так контент в сочетании с интерфейсным кодом?
Общие сценарии применения
Приложение изображения
Наиболее интуитивно понятным приложением является использование тригонометрических функций для рисования волновых кривых.
for (let x = 0; x < width; x++) {
const y = Math.sin(x * a) * amplitude
}
В сочетании со смещением тригонометрической функции, чтобы левое и правое стало впадиной, а середина стала пиком, вы можете получить изящную рябь.
for (let x = 0; x < width; x++) {
const radians = x / width * Math.PI * 2
const scale = (Math.sin(radians - Math.PI * 0.5) + 1) * 0.5
const y = Math.sin(x * 0.02 + xSpeed) * amplitude * scale
}
Раньше Наггетс были очень круты.статья, и то же самое. Используйте два слоя синусоидальных функций для рисования кривых и добавьте анимацию сдвига после заливки, чтобы получить очень крутой эффект 🌊.
Если вы объедините положение мыши + лерп-анимацию, вы можете добитьсяОрехи ГлавнаяТа самая анимация.
Большую часть кода для этой статьи можно найти в моемCodepenСм. домашнюю страницу.
SlowInSlowOut
Синусоидальные и косинусоидальные кривые имеют естественную легкость входа и выхода и изменяются от -1 до 1 и обратно до -1 за цикл, что очень удобно для моделирования некоторых физических эффектов. Потому что в реальном мире автомобиль медленно стартует, разгоняется, замедляется, а затем медленно замедляется, пока скорость не станет равной 0. Внезапное изменение вызовет у людей дискомфорт. Шарик маятника слева — линейное и равномерное качание, а справа — результат оптимизации с использованием тригонометрических функций. Очевидно, что дизайнер эффектов слева собирается бить людей.
Просто умножьте максимальный угол на sin или cos, чтобы получить SlowInSlowOut между максимальными углами поворота.
ctx.rotate(Math.cos(t / 180 * Math.PI) * Math.PI * 0.25)
Контроль угла
В процессе разработки нам часто приходится иметь дело с углами, такими как отображение красной точки уведомлений в верхнем левом углу аватара (45 градусов), использование мыши для управления вращением и так далее.
Math.atan2(y, x) во внешнем JS можно использовать для вычисления угла в радианах между (x, y) и положительным направлением оси x.
function getCurrentDegree () {
const deltaX = mouse.x - window.innerWidth * 0.5
const deltaY = mouse.y - window.innerHeight * 0.5
return Math.atan2(deltaY, deltaX) * 180 / Math.PI
}
Кстати, анимации, связанные с тригонометрическими функциями, не обязательно писать на js.Например, следующее DEMO, используя зависимости компаса, также может гибко управлять анимацией под определенными углами (не пишите координаты каждой точки вручную !!!Попозже).нет возможности поддерживать)
@import "compass";
.checkbox:checked {
~ button {
$per: 180 / 4;
@for $i from 1 through 6 {
&:nth-of-type(#{$i}) {
$angle: $per * ($i - 1) * 1deg + 180deg;
$x: cos($angle) * $d;
$y: sin($angle) * $d;
transform: translate($x, $y) rotate(0deg) ;
}
}
}
}
Case Study
Это сценарии, которые часто используются, давайте рассмотрим их на конкретном примере.
Два дня назад я увидел популярную рекомендацию на главной странице Codepen. Автор использовал анимацию css для реализации анимации ходьбы, что довольно новаторски. Однако, если присмотреться, анимация шагов действительно кажется неудобной, поэтому я хочу использовать тригонометрические функции для его оптимизации.
Чтобы нарисовать голову:
drawHead (t) {
ctx.save()
ctx.beginPath()
ctx.translate(0, Math.sin(t) * 4)
ctx.arc(80, -35, 35, 0, 2 * Math.PI)
ctx.fill()
ctx.closePath()
ctx.restore()
}
Я передам параметр периода t каждому методу, t от 0 до 2 PI , это обеспечит синхронизацию всех периодических движений по времени.
Рисунок тела и тени похож, просто пропустите анимацию шагов.
Есть две ноги.По причине, когда действие подъема ноги на ногу завершено, другие части завершили полный цикл, поэтому при рисовании ноги t нужно разделить на 2. Тогда первая стопа и вторая стопа отличаются на половину цикла самой стопы.Можно напрямую заменить t на t+Math.PI — это анимация второй стопы.
drawFeet (t) {
t = t / 2
ctx.translate(Math.cos(t) * -50, 0)
// 另一只脚
ctx.translate(Math.cos(t + Math.PI) * -50, 0)
}
Половина цикла анимации шагов находится на земле.Вы можете оценить значение sin.Если оно меньше 0, то изменение направления оси Y не будет выполнено.
ctx.translate(Math.cos(t) * -50, Math.sin(t) > 0 ? Math.sin(t) * -35 : 0)
Это еще не конец, чтобы сделать ноги более реалистичными, также делайте вращения в первой половине цикла.
if (t < Math.PI) {
ctx.rotate(Math.sin(t) * Math.PI / 180 * -5)
}
Окончательный результат таков:
Суммировать
В настоящее время скорость фронтенд-разработки очень высока, и студентам, которые только начали изучать jQuery, говорят: «Вам не нужен jQuery». Вы не можете перестать гоняться за новыми скриптами, изучая новые фреймворки и новые навыки, не забывайте о важности базовых знаний.
Что ж, я поделюсь им здесь сегодня, надеюсь, что сбор такого количества эффектов за один раз сделает вас более удобным при использовании тригонометрических функций в следующий раз.
Большую часть приведенного выше кода можно найти в моемCodepenСм. домашнюю страницу.