Недавно я узнал о скелетной анимации холста. Как видно из названия, она отличается от предыдущей анимации холста. Интересно, интересно ли вам узнать об этом?
Что касается скелетной анимации, я впервые увидел ее случайно в команде Tencent, но поскольку на ее официальном сайте очень мало обучающих программ, есть только небольшая демо-версия для справки, а официально загруженный случай, как ни странно, не может быть запущен, возможно, моя операция такая. ошибаюсь, но это не имеет значения, давайте узнаем об этой очень продвинутой скелетной анимации с помощью этой небольшой демонстрации. Я тоже новичок в этом, и мое понимание не очень полное. Пожалуйста, простите меня.
Прежде чем мы начнем, давайте узнаем о AlloyStick.В официальном введении говорится, что AlloyStick — это движок скелетной анимации, разработанный с использованием технологии HTML5 и может использоваться для разработки анимации HTML5 и разработки игр HTML5; AlloyStick в основном состоит из движка скелетной анимации и редактора скелетной анимации. Редактор скелетной анимации обеспечивает мощный инструмент скелетной анимации. С помощью функции редактирования, устанавливая ключевые кадры анимации и используя мощную автоматическую анимацию и скелетные связи, вы можете создавать реалистичные и яркие скелетные анимации Canvas, которые могут плавно работать на ПК, мобильных телефонах, планшетах и других устройствах. Ну, это легко сказать и очень привлекательно.
Так называемая скелетная анимация буквально означает анимацию, нарисованную через кости. Так как же здесь выглядят кости?
Да, даже если это выглядит так, это соответствует ожиданиям. В конце концов, у них есть очень мощная функция автоматической анимации. Вы можете думать об этом, поскольку каждая часть соединена очень плавно, что-то вроде растушевки PS.
Поскольку это очень мощная функция, она должна иметь свои уникальные преимущества.
Давайте начнем небольшую демонстрацию ниже
Скелетная анимация в основном состоит из трех частей: скелетных данных, данных оформления и данных анимации. С помощью этих трех частей данных AlloyStick может визуализировать яркую скелетную анимацию. Конечно, эти три части данных не нужно генерировать вручную. Им достаточно работать в редакторе, чтобы они автоматически генерировались. После того, как данные сгенерированы, вы можете вызвать и выполнить скелетную анимацию следующим образом. Первым шагом является введение сплава.js, а затем добавление ресурса resources.js. Следует отметить, что PNG со шкурой вводится с помощью тега img и, конечно же, его также можно загрузить в js. Resource.js включает в себя данные о скинах, данные о взаимоотношениях костей и все данные о действиях, включая имена и параметры анимации. На втором этапе объект Stage Stage и объект роли Armature создаются в соответствии с новым файлом ресурсов, а объект Stage управляет объектом Armature. Метод playTo — это основной метод, позволяющий персонажу воспроизводить различные анимации действий. Вы можете добавлять события для переключения между различными действиями. Наконец, запустите этап stage.start().
// Первый шаг — создание холста <canvas id=canvas width=800px height=600px> К сожалению, ваш браузер не поддерживает холст. Рекомендуется использовать браузер Chrome</canvas>.
// Второй шаг — ввести ресурсы скина в виде изображений или js <img src=img/texture.png id=xiaoxiaoImg style=display:none;>
// Третий шаг представляет сплавы.js и ресурс.js // Четвертый шаг — подготовка var Canvas = document.getElementById('canvas')var текстураImg = document.getElementById('xiaoxiaoImg')var Scene = новый сплав.Scene( Canvas.getContext('2d'))var player = new Alloysk.Armature('xiaoxiao',textureImg)//Пятый шаг — создание анимации// Параметры скорости действия: состояние действия, скорость, начальная скорость, всегда ли выполнять здесь. Вы также можете установить здесь другие действия, такие как перекат. // Обновлено несколько состояний действий: бег, бег, перекат, перекат, простой удар, бросок что-нибудь правой рукой, второй удар ударом. правая рука // jump_kick боковой удар давай провоцируй расслабься расслабься мыло возьми мыло player.playTo('run',50,15,true);// Позиция анимации player.setPos(300,300); player.setEaseType(true);scene.addObj(player); // Запускаем монитор FPS (вспомогательные функции не требуются) сплав.monitorFPS(scene); // Запускаем анимацию в сцене; Scene, И вы можете передать цикл обратного вызова для вызова // Последний шаг для выполнения анимации Scene.start(); //; Эффект похож на бегущего мальчика ниже. Простите, что я еще не открыл дверь для создания gif-анимации...Соответствующий код можно загрузить на github https://github.com/aurora-polaris/canvas3.
Так как я новичок в этом, я не очень хорошо понимаю многие вещи, я разберусь с ними, когда у меня будет время.
Выше приведено все содержание этой статьи. Я надеюсь, что она будет полезна для изучения всеми. Я также надеюсь, что все поддержат сеть VeVb Wulin.