Слияние кода завершено, страница обновится автоматически
KeyframesToCanvas
Простой инструмент для воспроизведения последовательности кадров.
Поскольку недавно при работе над проектом веб-сайта мне понадобился подобный функционал, я написал небольшой инструмент.
(Примечание: этот инструмент не зависит от jq и других библиотек, он написан исключительно на JavaScript. В примере используется jq только для удобства выполнения локальных запросов с помощью ajax).
Версия 1.7:
* добавлены методы экземпляра setWidth и setHeight.
Версия 1.6:
* оптимизирован код и улучшено отображение страницы.
Версия 1.5:
* добавлены свойства масштабирования scX и scY для горизонтального и вертикального масштабирования соответственно. Также добавлен новый метод экземпляра setZoom, который позволяет выполнять масштабирование сцены извне.
Версия 1.4:
* добавлено свойство loop, которое определяет, будет ли анимация воспроизводиться циклически. По умолчанию значение равно false, что означает отсутствие цикла. Поддерживаются прямой и обратный циклы.
Версия 1.3:
* добавлен метод goToAndPlay для запуска анимации с указанного кадра и метод goToAndStop для остановки анимации в указанном кадре.
* добавлено свойство reverse, по умолчанию равное false (прямое воспроизведение), true — обратное воспроизведение.
Версия 1.2:
* исправлены ошибки, связанные с отсутствием значений по умолчанию для некоторых методов.
* устранена ошибка, возникающая при повторном нажатии кнопки «Старт» после остановки анимации.
* добавлена функция сброса анимации.
Версия 1.1:
* добавлены независимые методы start, active и stop.
* изменены названия трёх состояний в объекте конфигурации.
JavaScript
new KeyframesToCanvas(nodeName,imageArray,options)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<style type="text/css">
#keyframes{
width: 100%;
height: 100vh;
margin: 0 auto;
}
#stopan,#start,#reset,#goto,#gotostop,#sc_btn,#width_btn,#height_btn{
width: 100px;
height: 50px;
position: fixed;
left: 50px;
top: 100px;
z-index: 2020;
}
#start{
left: 150px;
}
#reset{
left: 250px;
}
#fps{
width: 100px;
}
#goto{
left: 630px;
}
#gotostop{
left: 730px;
}
#sc_btn{
left: 1015px;
}
#width_btn{
height: 30px;
left: 235px;
top: 175px;
}
#height_btn{
height: 30px;
left: 235px;
top: 215px;
}
.show_x_y{
position: absolute;
left: 1135px;
top: 95px;
margin: 0;
}
.show_x_y>p{
margin: 0;
}
.fps_box1,.fps_box2{
width: 400px;
position: absolute;
left: 370px;
top: 95px;
}
.fps_box1>input{
width: 20%;
}
.fps_box2>input{
width: 20%;
}
.fps_box2{
top: 130px;
}
.sc_x,.sc_y{
width: 400px;
position: absolute;
left: 845px;
top: 95px;
}
.sc_width,.sc_height{
width: 400px;
position: absolute;
left: 50px;
top: 175px;
}
.sc_x>input{
width: 20%;
}
.sc_y>input{
width: 20%;
}
.sc_y{
top: 130px;
}
.sc_height{
top: 220px;
}
.sc_width>input{
width: 20%;
}
.sc_height>input{
width: 20%;
}
</style>
<body>
<div id="keyframes"></div>
<button type="button" id="stopan">Нажмите, чтобы остановить анимацию.</button>
<button type="button" id="start">Нажмите, чтобы начать анимацию.</button>
<button type="button" id="reset">Нажмите, чтобы сбросить анимацию.</button>
<div class="fps_box1">
<span>Введите желаемое количество кадров для воспроизведения:</span>
<input type="text" name="" id="fps1" value="" />
</div>
<div class="fps_box2">
Вы можете оставить комментарий после Вход в систему
Неприемлемый контент может быть отображен здесь и не будет показан на странице. Вы можете проверить и изменить его с помощью соответствующей функции редактирования.
Если вы подтверждаете, что содержание не содержит непристойной лексики/перенаправления на рекламу/насилия/вульгарной порнографии/нарушений/пиратства/ложного/незначительного или незаконного контента, связанного с национальными законами и предписаниями, вы можете нажать «Отправить» для подачи апелляции, и мы обработаем ее как можно скорее.
Комментарии ( 0 )