Как да анимирате линия с помощта на EaselJS и TweenJS

Целта ми е линия да анимирам от точка А до точка Б с помощта на функцията Tween.

Библиотеката за рисуване, която използвам, е EaselJS, а за Tweening използвам TweenJS.

Възможно ли е това да се използва функцията moveTo за анимиране на права линия от точка А до точка Б?

Текущата ми настройка е както следва:

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 с метода tweening, който ми липсва? Проверих документацията както на 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 връща последната създадена графична команда, която след това можете да манипулирате с tween:

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