Как анимировать линию с помощью EaselJS и TweenJS

Моя цель состоит в том, чтобы линия анимировалась из точки А в точку Б с помощью функции Tween.

Я использую библиотеку для рисования EaselJS, а для твининга я использую TweenJS.

Возможно ли это с помощью функции moveTo для анимации прямой линии из точки A в точку B?

Моя текущая установка выглядит следующим образом:

var line = new createjs.Shape();
line.beginStroke('cyan');
line.setStrokeStyle(3);
line.moveTo(100, 100);

Моя цель — анимировать этот путь от x100 y100 до x0 y0.

Пример анимации:

Я пробовал это, используя следующее, и ничего не происходит:

var line = new createjs.Shape();
line.beginStroke('cyan');
line.setStrokeStyle(3);
line.moveTo(100, 100);
createjs.Tween.get(line).to({x: 0, y: 0}, 1000, createjs.Ease.sineInOut);

Ничего не произошло.

Пример рисования:

Однако, если я использую это, я получаю строку, как и ожидалось, но она не анимирована:

var line = new createjs.Shape();
line.beginStroke('cyan');
line.setStrokeStyle(3);
line.moveTo(100, 100);
line.lineTo(0, 0);

Это рисует линию, как и ожидалось.

Есть ли способ использовать метод lineTo с методом анимации движения, который мне не хватает? Я проверил документацию как Easel, так и TweenJS и не могу найти пример или какие-либо четкие инструкции о том, как это сделать или если это невозможно.

Любая помощь приветствуется.


javascript canvas createjs easeljs tween.js
person Daniel Tate    schedule 13.01.2016    source источник
comment
Я боюсь, что вам может понадобиться добавить минимально воспроизводимый пример к вашему вопросу для правильного устранения неполадок, кода недостаточно чтобы узнать, почему то, что вы делаете, не работает   -  person blurfus    schedule 14.01.2016
comment
@ochi Я обновил пример, добавив более полную отправную точку, это должно помочь вам понять, чего я пытаюсь достичь. Пожалуйста, дайте мне знать, если вы чувствуете, что чего-то не хватает.   -  person Daniel Tate    schedule 14.01.2016
comment
Глядя на API (createjs.com/docs/easeljs/classes/Graphics .html#method_lineTo) указывает, что прежде чем использовать lineTo(x,y), вы должны вызвать moveTo(x,y), так что кажется, что перемещение в эквивалентно поднятию карандаша и перемещению курсора к заданным координатам, а затем строке в опускает карандаш и перемещается это к заданным координатам (эффективно рисуя линию, поскольку карандаш теперь опущен, касаясь холста)   -  person blurfus    schedule 14.01.2016
comment
Привет @ochi Спасибо за обновление. Да, я читал документацию и понимаю, что перед изменением положения строки нужен moveTo. Я снова обновил примеры, чтобы показать каждый случай полностью, чтобы было понятнее. На самом деле я использую moveTo в обоих примерах для размещения начальной позиции линии, а затем в каждом случае использую другой метод для перемещения линии. В первом я пытаюсь использовать функцию Tween для его анимации (и терпит неудачу), а во втором я использую метод lineTo и преуспеваю без анимации.   -  person Daniel Tate    schedule 14.01.2016
comment
Понятно, извините, мне это было непонятно с самого начала   -  person blurfus    schedule 14.01.2016
comment
@ochi Все в порядке, спасибо, что помогли мне улучшить качество моего вопроса.   -  person Daniel Tate    schedule 14.01.2016
comment
Я думаю, что этот ответ поможет вам stackoverflow.com/a/32905293/600486   -  person blurfus    schedule 14.01.2016

Ответы (2)


arrow_upward
4
arrow_downward

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

var cmd = line.graphics.lineTo(100,100).command;
createjs.Tween.get(cmd).to({x:0}, 1000);

Вот рабочий пример: https://jsfiddle.net/gskinner/17Lk8a9s/1/

person gskinner    schedule 15.01.2016
comment
Как вы собираетесь делать это с диагональной линией? - person Daniel Tate; 19.01.2016
comment
Просто между значением y. - person gskinner; 20.01.2016

arrow_upward
2
arrow_downward

Демонстрация: http://jsfiddle.net/thpbr1vt/3/

Внимание! Представление.

var stage = new createjs.Stage("canvas");
var vpoint = new createjs.Point( 100, 100);

var line = new createjs.Graphics();
line.beginStroke( 'cyan' );
line.moveTo( vpoint.x, vpoint.y );
var s = new createjs.Shape(line);
stage.addChild(s);

createjs.Tween.get(vpoint).to({x: 0, y: 0}, 1000, createjs.Ease.sineInOut);

createjs.Ticker.addEventListener("tick", tick);
  function tick() { 
  line.lineTo( vpoint.x, vpoint.y );
  stage.update();
}
person p3c    schedule 15.01.2016
comment
Как вы собираетесь создавать диагональную линию? - person Daniel Tate; 19.01.2016
comment
Мой пример - диагональная линия!? - person p3c; 20.01.2016