Создание флеш-анимации с помощью Canvas и HTML5

Это вопрос типа "где я могу начать".

Я изучаю работу HTML5 и Canvas, но чувствую, что искал не ту область.

Я хотел бы узнать, как создавать анимационные анимации типа мультиплеерного типа. Представьте себе этого плюшевого мишку:

Когда я нажимаю на нее мышь, я хочу заставить его пройтись по экрану, реализуя мои анимации "движущихся ног" и т.д. Когда я нажимаю, я хочу, чтобы он махал лапой.

С HTML5 и Javascript я могу заставить его двигаться/плавать поперек, но я не могу найти способ фактически НАЖАТЬ движения.

Создать небольшие файлы .mp4? Я создаю кучу изображений, чтобы прокрутить их? Анимированные GIF файлы? Я хотел бы держаться подальше от вспышки...

Я думал, что HTML5 с анимацией Canvas позволит мне достичь того, что я хочу, кроме как рисовать простые анимации фигур и работу с видео. Я не могу найти учебники или статьи "Как".

Как я могу достичь того, что я пытаюсь сделать или мне нужно искать в другом месте? Я был бы признателен, если бы он был направлен в правильном направлении.

Изменить: во время исследования я столкнулся с следующей игрой: http://www.cuttherope.ie/ Как, например, монстр анимируется в чем-то подобном?

Ответы

Ответ 1

Если целью упражнения является изучение HTML5 и холста, то, вероятно, не для вас. Если вам нужно как можно быстрее и проще создать свою тедди-анимацию и доставить ее с использованием технологий, основанных на стандартах, то я предлагаю вам загрузить и изучить предварительный просмотр Adobe Край. Это инструмент для создания движений и взаимодействия, похожий на Flash (временная шкала и ключевые кадры), который выводит комбинацию HTML, CSS и JavaScript. Я не играл с версией предварительного просмотра, но я уверен, что он будет способен создавать такую анимацию, о которой вы говорите.

Update:

Вы также можете рассмотреть Zoë, который можно использовать для экспорта анимации SWF непосредственно на страницы спрайтов. Он был создан командой, которая разработала Canvas library easel.js и может экспортировать сопровождающие данные фрейма как JSON или easel.js. Это позволит вам создавать свои анимации во Flash (что, пусть оно и есть, по-прежнему является лучшим инструментом для веб-анимации), но визуализировать их с помощью HTML.

Ответ 2

Холст поможет вам здесь.

Анимация обычно выполняется просто путем циклического перехода через различные файлы PNG (или spritemap с разными изображениями). Вот пример jsfiddle Недавно я показал, что на холсте показана простая анимация:

var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');

var image = new Image();

var drawTile = function(x, y, tile, width, height) {
    context.drawImage(image, (tile % 6) * width, Math.floor(tile / 6) * height, width, height, x, y, width, height);
};

image.onload = function() {
    // draw all 12 tiles:
    var i = 0;
    setInterval(function() {
        context.clearRect(0,0,500,500);
        drawTile(0, 0, i, 48, 32);
        i++;
        if (i > 11) i = 0;
    }, 85);
}
image.src = 'http://i.stack.imgur.com/qkWe2.png';

Если вы посмотрите на изображение в примере, вы получите представление о том, как выглядит карта спрайтов для анимации:

Велоспорт думал, что спрайты в таком изображении на основе таймера - это все, что вам нужно!

Создание и перемещение кликабельных, выбираемых объектов на холсте требует немного усилий. Там нет ничего встроенного для обнаружения объекта на холсте. Но если вы сделали программирование до того, как это не слишком сложно, и я написал популярное учебное пособие по этому вопросу, которое служит очень нежный ввод. Это должно помочь вам.

Кроме этого, ваш лучший ресурс, конечно же, переполнение стека.:) Мы всегда будем рады ответить на отдельные вопросы, когда вы столкнетесь с ними.

Ответ 3

Для анимаций three.js приятно. Он даже получил несколько плагин движка физики.

Кроме того, взгляните на части Разработка HTML5

Ответ 4

Я быстро поклоняюсь более образованному ответу, но я бы угадал, что вы хотите сделать, может быть слишком много для производительности canvas/javascript в браузере.

Если вы являетесь аниматором по профессии, это может показаться не такой утомительной задачей, но я предполагаю, что вы напишете много кода, чтобы оживить запутанные пути и заполнить их и т.д.

Я уверен, что вы исследовали, но есть многочисленные javascript-библиотеки холстов. Бумага js приходит на ум или обработка js. Они могут указать вам в приличном направлении, если вы посмотрите их примеры/возможности относительно путей и анимации.

Ответ 5

Как я вижу, есть две проблемы:

Дайте движению медведя внутри себя (ноги как минимум)
Переместите медведя по экрану.

Борьба этих двух дает вам вид медведя, идущего по экрану (в отличие от простого перемещения по экрану или ходьбы). Похоже, вы уже решили проблему №1.

Чтобы заняться # 2, лучше всего иметь изображение за кадр. Попытка нарисовать медведя в другом положении для каждого кадра - пустая трата времени. Если вы предварительно загрузите образы кадров, вы можете взять стоимость один раз в начале, и вы просто показываете другое изображение, когда он идет.

Теперь, это работа для холста? Я не знаю. Я думаю, вы, вероятно, могли бы создать то, что я описал в "старой школе" HTML/JavaScript/CSS. Платформа зависит от вас, но ключевыми понятиями здесь являются рамки - и, более конкретно, изображение для каждого кадра.