Изучите PixiJS — анимацию движения

иллюстрировать

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

Pixi не имеет встроенного механизма анимации, но вы можете использовать много хороших библиотек анимации с открытым исходным кодом, таких какTween.jsа такжеDynamic.js. Если вы хотите создавать очень профессиональные пользовательские эффекты анимации движения, вы можете использовать одну из этих двух библиотек. Но теперь мы собираемся использоватьCharm.jsБиблиотека анимации для Pixi.

использоватьCharmбиблиотека

Для началаCharmВо-первых, используйте тег скрипта непосредственно для введения файлов JS.

<script src="https://www.kkkk1000.com/js/Charm.js"></script>

затем создайте его экземпляр

let c = new Charm(PIXI);

Переменнаяcтеперь представляетCharmпример.

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

function gameLoop() {
    requestAnimationFrame(gameLoop);
    state();
    c.update();
    renderer.render(stage);
}

скользящая анимация

CharmОдним из самых полезных эффектов анимации движения является слайд. Используйте метод слайда, чтобы плавно переместить спрайт из его текущего положения на холсте в любое другое положение. Метод слайда имеет семь параметров, но требуются только первые три.

имя	По умолчанию	описывать
anySprite		спрайты, которые должны двигаться
finalXPosition		Координата x в конце свайпа
finalYPosition		y координата в конце салфетки
durationInFrames	60	Количество кадров, необходимых для анимации, то есть, как долго должна длиться анимация.
easingType	"smoothstep"	Тип замедления
yoyo	false	Используется, чтобы определить, должен ли спрайт двигаться вперед и назад между начальной и конечной точкой анимации.
delayTimeBeforeRepeat	0	Число в миллисекундах, используемое для определения спрайта.yoyoпредыдущее время задержки.

Пример:

Ниже приведен ключевой код того, как использовать метод слайда для перемещения спрайта из исходного положения в положение с координатами (128,128) за 120 кадров.

c.slide(sprite, 128, 128, 120);

Изображение эффекта:

Посмотреть пример

Если вы хотите, чтобы спрайт двигался вперед и назад между начальной и конечной точками, используйтеyoyo(шестой параметр) установлен в true, код выглядит так:

c.slide(sprite, 128, 128, 120, "smoothstep", true);

Посмотреть пример

объект анимации

CharmВсе методы анимации возвращают объект анимации, который можно создать следующим образом:

let slidePixie = c.slide(sprite, 80, 128, 120, "smoothstep",true);

slidePixie — это объект анимации, который содержит некоторые полезные свойства и методы, которые можно использовать для управления анимацией.

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

let slidePixie = c.slide(sprite, 80, 128, 120, "smoothstep",true);
slidePixie.onComplete = () => console.log("一次滑动完成");

еслиyoyo(шестой параметр метода слайда) имеет значение true, метод onComplete будет выполняться всякий раз, когда спрайт достигает своей начальной и конечной точек.

У подростков также есть методы паузы и воспроизведения, чтобы остановить и запустить анимацию.

slidePixie.pause();
slidePixie.play();

Объект tween также имеет свойство воспроизведения, которое верно, если анимация движения в данный момент воспроизводится. Просто некоторые объекты, возвращаемые методами анимации, имеют непосредственно атрибут воспроизведения, а некоторые объекты, возвращаемые методами анимации, имеют атрибут воспроизведения в массиве с именем tweens, который включает в себя все объекты анимации, созданные этим методом анимации. Взяв в качестве примера метод слайда, чтобы завершить слайд, вам необходимо создать объект анимации оси X и объект анимации оси Y. Эти два объекта помещаются в массив анимации, и эти два объекта также имеют игровые свойства соответственно. .

Посмотреть пример

всеCharmВсе методы анимации возвращают объект анимации, которым можно управлять и к которому можно получить доступ.

Установить тип смягчения

Четвертый параметр метода слайда — easingType. Это строка, определяющая тип ускорения и замедления для анимации движения. Есть 15 таких типов на выбор, и ониCharmВсе различные методы анимации . Некоторые типы соответствуют базовому типу, квадратному типу и кубическому типу. Квадратные и кубические типы просто усиливают эффекты основных типов. наиболееCharmТип замедления по умолчанию для эффекта анимации — плавный шаг.

Линейный: linear, спрайт продолжает двигаться с постоянной скоростью от начала до конца.

Плавный шаг: smoothstep,smoothstepSquared,smoothstepCubed. Ускоряйте спрайты и замедляйте их очень естественным образом

Ускорение: acceleration,accelerationCubed. Постепенно ускоряйте спрайт и внезапно останавливайтесь. Для более плавного ускорения используйтеsine,sineSquaredилиsineCubed.

Замедление: deceleration,decelerationCubed. Внезапно ускоряет спрайт и постепенно замедляет его. Для более плавного торможения используйтеinverseSine,inverseSineSquaredилиinverseSineCubed.

Подпрыгивать: bounce 10 -10, что заставит спрайт слегка подпрыгивать, когда он достигнет начальной и конечной точек, изменение множителей 10 и -10 может изменить эффект.

Посмотреть пример

Используйте слайд для перехода между сценами

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

Сначала создайте два объекта-контейнера:sceneOneа такжеsceneTwoи добавьте их в рабочую область.

sceneOne = new Container();
sceneTwo = new Container();
stage.addChild(sceneOne);
stage.addChild(sceneTwo);

Затем создайте спрайты для каждой сцены. Сделайте синий прямоугольник размером с холст и в середине прямоугольника добавьтеScene Oneтекст, добавьте оба вsceneOneв контейнере. Сделайте еще один красный прямоугольник размером с холст и добавьтеScene Twoтекст, добавьте оба вsceneTwoв контейнере. В итоге вы получите два объекта-контейнера, как показано на изображении ниже.

Вот код ключа:

//1. Scene one sprites:	
//画蓝色矩形
let blueRectangle = new PIXI.Graphics();
blueRectangle.beginFill(0x014ACA);
blueRectangle.drawRect(0, 0, canvasWith, canvasHeight);
blueRectangle.endFill();
sceneOne.addChild(blueRectangle);

//添加文字，并在容器中居中
let sceneOneText = new PIXI.Text("Scene One");
sceneOneText.style = { fill: "#fff", fontSize: "40px" };
let sceneOneTextX = (canvasWith - sceneOneText.width) / 2;
let sceneOneTextY = (canvasWith - sceneOneText.height) / 2;
sceneOneText.position.set(sceneOneTextX, sceneOneTextY);
sceneOne.addChild(sceneOneText);

//2. Scene two sprites:
//画红色矩形
let redRectangle = new PIXI.Graphics();
redRectangle.beginFill(0xEF4631);
redRectangle.drawRect(0, 0, canvasWith, canvasHeight);
redRectangle.endFill();
sceneTwo.addChild(redRectangle);

//添加文字，并在容器中居中
let sceneTwoText = new PIXI.Text("Scene Two");
sceneTwoText.style = { fill: "#fff", fontSize: "40px" };
let sceneTwoTextX = (canvasWith - sceneTwoText.width) / 2;
let sceneTwoTextY = (canvasHeight - sceneTwoText.height) / 2;
sceneTwoText.position.set(sceneTwoTextX, sceneTwoTextY);
sceneTwo.addChild(sceneTwoText);

В реальном проекте вы можете заполнить каждый контейнер любым количеством спрайтов для каждой сцены и добавить в проект столько контейнеров сцены, сколько захотите.

Далее будетsceneTwoОтойдите так, чтобы он оказался за правым краем холста. Код выглядит следующим образом:

sceneTwo.x = canvasWith;

Это будет отображаться на холстеsceneOne,а такжеsceneTwoПри необходимости он выдвигается слева, как показано ниже.

sceneTwoПросто жду за экраном.

Наконец, используйтеslideметод изsceneOneПереход кsceneTwo. просто поставьsceneOneПроведите влево, затем проведите вправоsceneTwo, на его месте код выглядит следующим образом.

c.slide(sceneTwo, 0, 0);
c.slide(sceneOne, -canvasWith, 0);

На изображении ниже показано действие этого кода.

Посмотреть пример

временной переход

вы можете настроитьwaitФункция переходит через заданный интервал времени.

function wait(duration = 0) {
    return new Promise((resolve, reject) => {
        setTimeout(resolve, duration);
    });
}

нужно использоватьwait, дайте ему параметр, который представляет количество времени (в миллисекундах), которое вы хотите ждать. Нижеследующее после задержки в 1 секунду (1000 мс) отsceneOneПереход кsceneTwoМетоды.

wait(1000).then(() => {
    c.slide(sceneTwo, 0, 0);
    c.slide(sceneOne, -canvasWith, 0);
});

Посмотреть пример

по фактуCharmМетод ожидания был определен в библиотеке, и принцип такой же, как у функции ожидания выше. Вы можете использовать это так.

c.wait(1000).then(() => {
    c.slide(sceneTwo, 0, 0);
    c.slide(sceneOne, -canvasWith, 0);
});

двигаться по кривой Безье

Если вы не знаете, что такоеКривая Безье, вы можете сначала посмотретьэта статья.

Метод слайда анимирует спрайт по прямой линии, но вы также можете использовать другой метод (followCurve) для анимации спрайта по кривой Безье. Во-первых, определите кривую Безье как двумерный массив из 4 координатных точек следующим образом:

let curve = [
    [sprite.x, sprite.y], //起始点
    [108, 32], //控制点1
    [176, 32], //控制点2
    [196, 160] //结束点
];

Параметры метода followCurve следующие:

имя	По умолчанию	описывать
anySprite		спрайты, которые должны двигаться
curve		массив кривых Безье
durationInFrames	60	Количество кадров, необходимых для анимации, то есть, как долго должна длиться анимация.
easingType	"smoothstep"	Тип замедления
yoyo	false	Используется, чтобы определить, должен ли спрайт двигаться вперед и назад между начальной и конечной точкой анимации.
delayTimeBeforeRepeat	0	Число в миллисекундах, используемое для определения спрайта.yoyoпредыдущее время задержки.

Далее используйтеCharmизfollowCurveспособ заставить спрайт следовать кривой. (укажите массив кривых в качестве второго аргумента)

c.followCurve(
 sprite, //需要移动的精灵
 curve, //贝塞尔曲线数组
 120, //持续时间，以帧为单位
 "smoothstep", //缓动类型
 true, //yoyo
 1000 //yoyo之前的延迟时间
);

Изображение эффекта:

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

sprite.anchor.set(0.5, 0.5);

Посмотреть пример

slideа такжеfollowCurveЭти методы подходят для простых эффектов анимации вперед и назад, но вы также можете комбинировать их, чтобы заставить спрайты следовать более сложным путям.

двигаться по пути

вы можете использоватьCharmизwalkPathметод соединяет ряд точек и заставляет спрайт перемещаться в каждую точку. Каждая точка ряда называетсяwaypoint. Во-первых, начните с поиска путевых точек из двумерного массива координатных точек.waypointНаметьте путь, по которому должен следовать спрайт.

let waypoints = [
 [32, 32], //要移动到的第一个坐标点
 [32, 128], //要移动到的第二个坐标点
 [300, 128], //要移动到的第三个坐标点
 [300, 32], //要移动到的第四个坐标点
 [32, 32] //要移动到的第五个坐标点
];

Вы можете использовать столько, сколько хотитеwaypoint.

Параметры метода walkPath следующие:

имя	По умолчанию	описывать
anySprite		спрайты, которые должны двигаться
waypoints		2D-массив координатных точек
durationInFrames	60	Количество кадров, необходимых для анимации, то есть, как долго должна длиться анимация.
easingType	"smoothstep"	Тип замедления
loop	false	Используется, чтобы определить, начинается ли спрайт с начала, когда он достигает конца
yoyo	false	Используется, чтобы определить, должен ли спрайт двигаться вперед и назад между начальной и конечной точкой анимации.
delayBetweenSections	0	Число в миллисекундах, определяющее, как долго спрайт должен ждать, прежде чем перейти к следующей части пути.

Далее используйтеwalkPathметод заставляет спрайт перемещаться во все эти точки последовательно. (обязательны первые два параметра)

c.walkPath(
    sprite, //需要移动的精灵
    waypoints, //坐标点的二维数组
    300, //持续时间，以帧为单位
    "smoothstep", //缓动类型
    true, //循环
    true, //轮流反向播放动画
    1000 //移动到路径的下一部分之前应该等待的时间
);

Изображение эффекта:

Посмотреть пример

при использованииwalkCurveметод, который заставляет спрайт следовать ряду соединенных кривых Безье. Во-первых, создайте массив любых кривых Безье, описывающих путь, по которому должен следовать спрайт.

let curvedWaypoints = [
 //第一条曲线
 [[sprite.x, sprite.y],[75, 500],[200, 500],[300, 300]],
 //第二条曲线
 [[300, 300],[250, 100],[100, 100],[sprite.x, sprite.y]]
];

Четыре точки каждой кривой иfollowCurveТо же самое в методе: начальная позиция, контрольная точка 1, контрольная точка 2 и конечная позиция. Последняя точка первой кривой должна совпадать с первой точкой следующей кривой. Вы можете использовать столько кривых, сколько хотите.

Параметры метода walkCurve следующие:

имя	По умолчанию	описывать
anySprite		спрайты, которые должны двигаться
curvedWaypoints		массив координат кривой Безье
durationInFrames	60	Количество кадров, необходимых для анимации, то есть, как долго должна длиться анимация.
easingType	"smoothstep"	Тип замедления
yoyo	false	Используется, чтобы определить, должен ли спрайт двигаться вперед и назад между начальной и конечной точкой анимации.
delayBeforeContinue	0	Число в миллисекундах, используемое для определения спрайта.yoyoпредыдущее время задержки.

Далее предоставьтеcurvedWaypointsмассив какwalkCurveВторой параметр в методе, чтобы попробовать этот метод.

c.walkCurve(
    sprite, //需要移动的精灵
    curvedWaypoints, //贝塞尔曲线的坐标点的数组
    300, //持续时间，以帧为单位
    "smoothstep", //缓动类型
    true, //循环
    true, //轮流反向播放动画
    1000 //移动到路径的下一部分之前应该等待的时间
);

Изображение эффекта:

Посмотреть пример

Использование walkPath и walkCurve даст вам отличный старт для создания интересных анимаций для вашей игры.

Дополнительные эффекты анимации

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

затухание и затуханиеМетод fadeOut заставляет спрайт постепенно становиться прозрачным, а метод fadeIn заставляет спрайт постепенно появляться из прозрачного. Оба метода требуют одинаковых параметров.

параметр:

имя	По умолчанию	описывать
anySprite		Нужно произвести мастер эффектов
durationInFrames	60	устойчивые кадры

Пример:

c.fadeOut(anySprite);
c.fadeIn(anySprite);

Посмотреть пример

pulse

Используйте импульсный метод, чтобы спрайт постоянно появлялся и исчезал с постоянной скоростью.

параметр:

имя	По умолчанию	описывать
anySprite		спрайты, которые должны иметь эффект
durationInFrames	60	Количество кадров, которые должно длиться постепенное появление и исчезновение, то есть продолжительность
minAlpha	0	Минимальное значение прозрачности, до которого можно уменьшить спрайт

Пример:

c.pulse(anySprite);

Посмотреть пример

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

c.pulse(anySprite, 60, 0.5);

scale

Вы можете использовать метод масштабирования, чтобы масштабировать спрайт.

параметр:

имя	По умолчанию	описывать
anySprite		спрайты, которые должны иметь эффект
endScaleX	0.5	Масштаб масштабирования по оси X
endScaleY	0.5	масштаб оси Y
durationInFrames	60	продолжительность, в кадрах

Пример:

c.scale(
    sprite, //精灵
    0.1, //x轴缩放的比例
    0.1, //y轴缩放的比例
    100 //持续时间，以帧为单位
);

Посмотреть пример

breathe

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

параметр:

имя	По умолчанию	описывать
anySprite		спрайты, которые должны иметь эффект
endScaleX	0.5	Масштаб масштабирования по оси X
endScaleY	0.5	масштаб оси Y
durationInFrames	60	продолжительность, в кадрах
yoyo	true	Играть ли наоборот
delayBeforeRepeat	0	Число в миллисекундах, используемое для определения спрайта.yoyoпредыдущее время задержки.

Пример:

c.breathe(
    sprite, //精灵
    0.1, //x轴缩放的比例
    0.1, //y轴缩放的比例
    100, //持续时间，以帧为单位
    true, //轮流反向播放 
    0, //yoyo 之间的延迟时间
);

Посмотреть пример

strobe

Используйте метод стробоскопа, чтобы заставить спрайт мигать, как вспышку, быстро изменяя масштаб спрайта.

параметр:Просто передайте спрайт в качестве параметра.

Пример:

c.strobe(sprite);

Посмотреть пример

wobble

Используйте метод колебания, чтобы заставить спрайт покачиваться, как желе.

параметр:Просто передайте спрайт в качестве параметра.

Пример:

c.wobble(sprite);

Посмотреть пример

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

sprite.anchor.set(0.5, 0.5);

Уведомление:
В настоящее время,CharmВерсия Pixi, поддерживаемая этой библиотекой, — 3.0.11. Если вы используете более позднюю версию, будут некоторые проблемы, такие как это предупреждение.

Это связано с тем, что ParticleContainer устарел, начиная с версии Pixi 4.0.0, в пользу частиц.ParticleContainer . Поэтому для решения этой проблемы необходимоCharm.jsИзмените ParticleContainer в файле на частиц.ParticleContainer.

Предыдущая статья Изучение PixiJS — визуальные эффекты

Следующая запись Изучаем PixiJS — обнаружение столкновений