search

tweenjs / es6-tween

ES6 version of tween.js
MIT License
186 stars 34 forks source link

How to use es6-tween with Angular APP to animate vehicle Movement on ArcGIS JS API map #62

Closed kAliRM70 closed 5 years ago

kAliRM70 commented 5 years ago

I have an angular js application. One of the controllers uses Esri MAP (ArcGIS JS API). I need to animate the vehicle graphic movement.

What I did? I imported the es-tween library and set autoPlay to true

const { Tween, Easing, autoPlay } = require('es6-tween'); autoPlay(true);

On the function of the vehicle location updated I did the following code:: let position = { x: vehicle.graphic.geometry.getLongitude(), y: vehicle.graphic.geometry.getLatitude(), heading: 180 }; let target = {x:position.x+2, y:position.y}; vehicle.tween = new Tween(position).to(target, 15000).easing(Easing.Elastic.InOut).on('update', (position) => { vehicle.graphic.setGeometry(position); console.log(position); }); vehicle.tween.start(); The Tween object of the vehicle is updated with the position and target. But the vehicle image does not move.

This is the Vehicle Object Object graphic: attributes: {currentPosition_X: -122.387786865234, currentPosition_Y: 47.5610885620117, driverName: "Unassigned", vehicleId: "new", mouseClicked: false} geometry: spatialReference: {wkid: 4326} type: "point" x: -122.387786865234 y: 47.5610885620117 proto: Object infoTemplate: undefined symbol: undefined _cache: null _extent: {type: "extent", xmin: -122.387786865234, ymin: 47.5610885620117, xmax: -122.387786865234, ymax: 47.5610885620117, …} _graphicsLayer: {_attrs: {…}, _url: null, url: null, spatialReference: {…}, initialExtent: {…}, …} _layer: {_attrs: {…}, _url: null, url: null, spatialReference: {…}, initialExtent: {…}, …} proto: Object make: "Dodge" model: "Caravan" onboard_device_id: "new" tween: L id: 7 object: {x: -122.387786865234, y: 47.5610885620117, heading: 180} updateCallback0: ƒ (position) _chainedTweensCount: 0 _delayTime: 0 _duration: 15000 _easingFunction: ƒ (t) _easingReverse: ƒ (t) _initTime: 48742.665000027046 _interpolationFunction: ƒ (t,e,r) _isFinite: true _isPlaying: true _maxListener: 15 _onStartCallbackFired: false _pausedTime: null _prevTime: 48742.665000027046 _r: 0 _rendered: false _repeat: 0 _reversed: false _startTime: 48742.665000027046 _valuesEnd: {x: -120.387786865234, y: 47.5610885620117} _valuesStart: {} _yoyo: false proto: Object vehicle_id: 888 vehicle_id_number: "new" vehicle_registration: "new" vehicle_status: "active" vehicle_type: "sedan" proto: Object

Issue name Issue description Issue Demo URL

Related

This issue is related to

What you excepted?

NOTE

dalisoft commented 5 years ago

Hi @kAliRM70! Thank you for using this library. Can you create online pen at jsbin or codepen for i am be able to check where/what is going wrong? I am tried to create pen myself, but there error, what is vehicle class i do know, so i should know what is under these construction

kAliRM70 commented 5 years ago

Hi Davlate and thank you very much for your quick reply. I will create a codePen with graphics and let you know

Thank you Khaled

Khaled Ali Sr. Software Engineer RouteMatch Software O: 404.239.2121 Khaled.ali@routematch.commailto:Khaled.ali@routematch.com [signature_1379854148]https://www.routematch.com/ [signature_342577630] https://www.facebook.com/Routematch [signature_184240108] https://twitter.com/routematch [signature_747976855] https://www.linkedin.com/company-beta/10877440/ [signature_123094543] https://www.instagram.com/routematch/

From: Davlat Shavkatov notifications@github.com Reply-To: tweenjs/es6-tween reply@reply.github.com Date: Tuesday, March 5, 2019 at 2:45 PM To: tweenjs/es6-tween es6-tween@noreply.github.com Cc: Khaled Ali Khaled.Ali@routematch.com, Mention mention@noreply.github.com Subject: Re: [tweenjs/es6-tween] How to use es6-tween with Angular APP to animate vehicle Movement on ArcGIS JS API map (#62)

Hi @kAliRM70https://github.com/kAliRM70! Thank you for using this library. Can you create online pen at jsbin or codepen for i am be able to check where/what is going wrong?

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHubhttps://github.com/tweenjs/es6-tween/issues/62#issuecomment-469830989, or mute the threadhttps://github.com/notifications/unsubscribe-auth/AeMMSDzVK4HahnW1j-8dlWWL7WUh99UDks5vTslYgaJpZM4bfU0b.

dalisoft commented 5 years ago

@kAliRM70 I now checked the basic tweening functionality at here and also checked the tests, these things works as excepted, so i think you should create issue to another repository (project which doing animating updates values).

kAliRM70 commented 5 years ago

Yes, I see that same thing when I run it but the graphic image does not move from its location

Khaled Ali Sr. Software Engineer RouteMatch Software O: 404.239.2121 Khaled.ali@routematch.commailto:Khaled.ali@routematch.com [signature_695232273]https://www.routematch.com/ [signature_1374897043] https://www.facebook.com/Routematch [signature_456117453] https://twitter.com/routematch [signature_470812580] https://www.linkedin.com/company-beta/10877440/ [signature_1858306680] https://www.instagram.com/routematch/

From: Davlat Shavkatov notifications@github.com Reply-To: tweenjs/es6-tween reply@reply.github.com Date: Tuesday, March 5, 2019 at 2:55 PM To: tweenjs/es6-tween es6-tween@noreply.github.com Cc: Khaled Ali Khaled.Ali@routematch.com, Mention mention@noreply.github.com Subject: Re: [tweenjs/es6-tween] How to use es6-tween with Angular APP to animate vehicle Movement on ArcGIS JS API map (#62)

@kAliRM70https://github.com/kAliRM70 I now checked the basic tweening functionality at herehttps://repl.it/@dalisoft/basic-nodejs-tween and also checked the tests, these things works as excepted, so i think you should create issue to another repository (project which doing animating updates values).

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHubhttps://github.com/tweenjs/es6-tween/issues/62#issuecomment-469834516, or mute the threadhttps://github.com/notifications/unsubscribe-auth/AeMMSBWdvWRKd05TuVZBLARtEp5Ym7naks5vTsvMgaJpZM4bfU0b.

dalisoft commented 5 years ago

Yea, es6-tween takes care of tweening number, updating original object, emitting events (update, complete) and works out-of-box with some 3d renderers such as Three.js with or without plugins. But es6-tween does not care about animating ArcGIS API Class Instance. You('re) welcome to create plug-in for es6-tween to make it work or fixing manually. Hope you can find bug, i don't have more free time to find bug and fix. Here some way may help you

kAliRM70 commented 5 years ago

Thank you Very much. I really appreciate your quick stop

Khaled Ali Sr. Software Engineer RouteMatch Software O: 404.239.2121 Khaled.ali@routematch.commailto:Khaled.ali@routematch.com [signature_2079751899]https://www.routematch.com/ [signature_217685058] https://www.facebook.com/Routematch [signature_1092600320] https://twitter.com/routematch [signature_506575879] https://www.linkedin.com/company-beta/10877440/ [signature_2114828986] https://www.instagram.com/routematch/

From: Davlat Shavkatov notifications@github.com Reply-To: tweenjs/es6-tween reply@reply.github.com Date: Tuesday, March 5, 2019 at 3:04 PM To: tweenjs/es6-tween es6-tween@noreply.github.com Cc: Khaled Ali Khaled.Ali@routematch.com, Mention mention@noreply.github.com Subject: Re: [tweenjs/es6-tween] How to use es6-tween with Angular APP to animate vehicle Movement on ArcGIS JS API map (#62)

Yea, es6-tween takes care of tweening number, updating original object, emitting events (update, complete) and works out-of-box with some 3d renderers such as Three.js with or without plugins. But es6-tween does not care about animating ArcGIS API Class Instance. You('re) welcome to create plug-in for es6-tween to make it work or fixing manually. Hope you can find bug, i don't have more free time to find bug and fix. Here some way may help you

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHubhttps://github.com/tweenjs/es6-tween/issues/62#issuecomment-469837480, or mute the threadhttps://github.com/notifications/unsubscribe-auth/AeMMSEReZaXWvAFfd9FP0y-6lQMQLrteks5vTs3kgaJpZM4bfU0b.

kAliRM70 commented 5 years ago

Hi man and thank you very much for your support. Yesterday I figured out how to animate graphics on Esri map. Every thing was as I sent it to you. The only thing I added to make it work is the vehicle.graphic.draw() inside the on(‘update’, (position) => { Vehicle.x = position.x Vehicle.y = position.y vehicle.graphic.draw() });

It works perfectly now

Thank you

Khaled Ali Sr. Software Engineer RouteMatch Software O: 404.239.2121 Khaled.ali@routematch.commailto:Khaled.ali@routematch.com [signature_1096495174]https://www.routematch.com/ [signature_1719021884] https://www.facebook.com/Routematch [signature_403662802] https://twitter.com/routematch [signature_1336297399] https://www.linkedin.com/company-beta/10877440/ [signature_18078914] https://www.instagram.com/routematch/

From: Davlat Shavkatov notifications@github.com Reply-To: tweenjs/es6-tween reply@reply.github.com Date: Tuesday, March 5, 2019 at 2:55 PM To: tweenjs/es6-tween es6-tween@noreply.github.com Cc: Khaled Ali Khaled.Ali@routematch.com, Mention mention@noreply.github.com Subject: Re: [tweenjs/es6-tween] How to use es6-tween with Angular APP to animate vehicle Movement on ArcGIS JS API map (#62)

@kAliRM70https://github.com/kAliRM70 I now checked the basic tweening functionality at herehttps://repl.it/@dalisoft/basic-nodejs-tween and also checked the tests, these things works as excepted, so i think you should create issue to another repository (project which doing animating updates values).

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHubhttps://github.com/tweenjs/es6-tween/issues/62#issuecomment-469834516, or mute the threadhttps://github.com/notifications/unsubscribe-auth/AeMMSBWdvWRKd05TuVZBLARtEp5Ym7naks5vTsvMgaJpZM4bfU0b.