nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Animations broken after updating to 3.4 API

NathanTyler

We have been using 2.4 for a long time. I'm trying to update our project to the 3.4 API, and we have some animations that have stopped working. Here's an example:

<esri:GraphicsLayer id="mapGraphicsLayer">   <esri:Graphic id="myGraphic" symbol="{locaterSymbol}" toolTip="Current Location" scaleX="1" scaleY="1" alpha="0">     <esri:geometry>       <esri:MapPoint id="myGraphicMapPoint" x="{lon}" y="{lat}" spatialReference="{spatialRef}"/>     </esri:geometry>   </esri:Graphic> </esri:GraphicsLayer>

... inside Declarations:

<esri:CompositeSymbol id="locaterSymbol">   <esri:SimpleMarkerSymbol id="blueDot" color="#6694D0" size="10" style="circle" >     <esri:SimpleLineSymbol color="#FFFFFF" width="2"/>   </esri:SimpleMarkerSymbol>   <esri:SimpleMarkerSymbol id="blueRingCircle" alpha="0" size="7" style="circle">     <esri:SimpleLineSymbol id="blueRingLine" color="#FFFFFF" width="2"/>   </esri:SimpleMarkerSymbol> </esri:CompositeSymbol>

Animation - runs on a 1s timer (using Tweener library):

blueRingCircle.size = 8; blueRingLine.alpha = 1;  Tweener.addTween(blueRingCircle, {size: 60, time: 24, transition: "easeOutQuad", useFrames: true}); Tweener.addTween(blueRingLine, {alpha: 0, time: 24, transition: "easeOutQuad", useFrames: true});

This animation used to work fine with the 2.4 API, now with 3.4 it doesn't seem to do anything. If I zoom/pan the map I can see it being drawn in various different stages of the animation, but when the map is static it doesn't seem to be redrawing to pick up the animated frames. Any suggestions? Thanks.

Find more posts tagged with

Accepted answers

YannCabon

Hi,

This a bug yes with the CompositeSymbol.
Thanks for reporting, it will be fixed in the 3.5 release.
In the meantime use the onUpdate parameter with Tweener to dispatch a change event from the symbol like this:

blueRingCircle.size = 8; blueRingLine.alpha = 1;  Tweener.addTween(blueRingCircle,                  {                      size: 60,                      time: 24,                      transition: "easeOutQuad",                      useFrames: true,                      onUpdate: function():void {                          (this as Symbol).dispatchEvent(new Event(Event.CHANGE));                      },                      onUpdateScope: locaterSymbol                  }); Tweener.addTween(blueRingLine,                  {                      alpha: 0,                      time: 24,                      transition: "easeOutQuad",                      useFrames: true,                      onUpdate: function():void {                          (this as Symbol).dispatchEvent(new Event(Event.CHANGE));                      },                      onUpdateScope: locaterSymbol                  });

The change event will make the symbol redraw.

All comments

BjornSvensson

Version 3.5 was released today and includes the fix for this issue:
* CompositeSymbol doesn't redraw on children symbols changes. Bug was specific to versions 3.1-3.4

YannCabon

I've tested, the latest version working with your code is 3.0
The 3.5 is scheduled around september.

NathanTyler

Thanks for the information. Do you have an estimated release date for 3.5, and do you know the last version that will work with the Tweener animations?

YannCabon

blueRingCircle.size = 8; blueRingLine.alpha = 1;  Tweener.addTween(blueRingCircle,                  {                      size: 60,                      time: 24,                      transition: "easeOutQuad",                      useFrames: true,                      onUpdate: function():void {                          (this as Symbol).dispatchEvent(new Event(Event.CHANGE));                      },                      onUpdateScope: locaterSymbol                  }); Tweener.addTween(blueRingLine,                  {                      alpha: 0,                      time: 24,                      transition: "easeOutQuad",                      useFrames: true,                      onUpdate: function():void {                          (this as Symbol).dispatchEvent(new Event(Event.CHANGE));                      },                      onUpdateScope: locaterSymbol                  });

The change event will make the symbol redraw.

Join the Conversation

Signed in members can post, follow updates, and more. New here? Register a free account.

Quick Links

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.