Блог

Главная - Вопросы по программированию - Анимация положения GSAP PaperJS

Анимация положения GSAP PaperJS

#javascript #gsap #paperjs

Вопрос:

Я пытаюсь интегрировать его в существующую Paper.js заявка на замену оригинала .Функция чириканья (http://paperjs.org/reference/tween/). Единственная проблема, с которой я сталкиваюсь до сих пор, — это «цепочка» анимации свойств позиции или точки:

https://codepen.io/yevsim/pen/GRmPBZB

 paper.install(window)  
paper.setup(canvas);

const text = new PointText({
    point: new Point(100, 100),
    fontFamily: "sans-serif",
    fontWeight: "bold",
    fontSize: 48,
    fillColor: 'black'
});
text.content = 'Move me';

const timeline = gsap.timeline();

timeline.to(text.point, { duration: 1, x: ' =100' });
timeline.to(text.point, { delay: 1, duration: 1, x: ' =100' });

По неизвестной мне причине он перемещает текст обратно в исходное положение перед выполнением второй анимации (т. е. вместо перехода со 100 -> 200 ->> 300, он переходит 100 ->>> 200 ->>>> 100 ->>>>> 200). Цепочка других свойств анимация, например, ширина, высота, цвет, непрозрачность, работает, как и ожидалось. Я пытался играть с заменой точки на позицию, комбинируя их вместе, но у меня ничего не получалось.

Комментарии:

1. Я рекомендую обсудить это на форумах GSAP, если вы еще этого не сделали.

2. Для тех, кому интересно, похоже fromTo ( greensock.com/docs/v3/GSAP/Timeline/fromTo () ) — это путь сюда. Теперь ждем ответа с форумов GSAP. Обновим здесь.

3. Похоже на Paper.js возвращает другой объект каждый раз, когда вы ссылаетесь text.point . Вот решение: greensock.com/forums/topic/. …

Ответ №1:

Я не совсем понимаю, почему, но это сработает, если вы сохраните text.point в переменной и будете использовать эту переменную вместо ссылки на фактический объект при создании своей временной шкалы.

Основываясь на вашем коде, вот исправленная версия:

 const text = new PointText({
    point: new Point(100, 100),
    fontFamily: 'sans-serif',
    fontWeight: 'bold',
    fontSize: 48,
    fillColor: 'black',
    content: 'Move me'
});

// Use a variable to reference the property to animate.
const point = text.point;
const timeline = gsap.timeline();
timeline.to(point, { duration: 1, x: ' =100' });
timeline.to(point, { delay: 1, duration: 1, x: ' =100' });
Метки: