Tutorials

Использование библиотеки Tween

Часто мы хотим анимировать Entity или некоторое произвольное значение между двумя точками. Это называется твинингом. Мы создали библиотеку твининга для этой конкретной цели. Вы можете найти библиотеку по адресу https://github.com/playcanvas/playcanvas-tween.

Чтобы использовать библиотеку, просто загрузите файл tween.js в ваш проект. Это позволит вам анимировать свойства Entity, такие как позиция, вращение, масштаб и т. д., следующим образом:

entity.tween(entity.getLocalPosition()).to({x: 10, y: 0, z: 0}, 1, pc.SineOut);

Вот пример того, как сделать плавное изменение локальной позиции Entity:

Здесь ссылки на Проект и Редактор для этого примера.

Чтобы получить вышеуказанное, мы делаем:

this.entity
    .tween(this.entity.getLocalPosition())
    .to(new pc.Vec3(4, 0, 0), 1.0, pc.SineOut)
    .loop(true)
    .yoyo(true)
    .start();

Вот пример того, как сделать плавное изменение локального вращения Entity:

Здесь ссылки на Проект и Редактор для этого примера.

Чтобы получить вышеуказанное, мы можем сделать:

this.entity
    .tween(this.entity.getLocalEulerAngles())
    .rotate(new pc.Vec3(180, 0, 180), 1.0, pc.Linear)
    .loop(true)
    .yoyo(true)
    .start();

Вот как сделать плавное изменение локального масштаба Entity:

Здесь ссылки на Проект и Редактор для этого примера.

Чтобы получить то, что выше, мы можем сделать:

this.entity
    .tween(this.entity.getLocalScale())
    .to(new pc.Vec3(3, 3, 3), 1.0, pc.SineOut)
    .loop(true)
    .yoyo(true)
    .start();

И, наконец, вот способ сделать плавный переход между цветами:

Вот ссылки на Проект и Редактор для этого примера.

Чтобы получить то, что выше, мы можем сделать:

var color = new pc.Color(0, 0, 0);
var material = this.entity.render.material;
this.app
    .tween(color)
    .to(new pc.Color(1, 1, 1), 1.0, pc.Linear)
    .loop(true)
    .yoyo(true)
    .on('update', function () {
        material.diffuse = color;
        material.update();
    })
    .start();

Снова вы можете найти библиотеку по адресу https://github.com/playcanvas/playcanvas-tween.

This site is translated by the community. If you want to get involved visit this page