Composant Delphi / Google Maps / OpenStreetMap / Leaflet  / Mappilary / Native Maps 100% Delphi 0% WebBrowser 0% Javascript


you are here :TECNativeMap > Shapes

TECShape has a property type Animation TECShapeAnimation to animate.

The following classes are available as standard, TECAnimationShapeColor , TECAnimationAutoHide, TECAnimationMarkerFilename, TECAnimationFadePoi, TECAnimationDrawPath, TECAnimationMoveToDirection and TECAnimationMarkerZoomFilename

You can create the your in the class heritant TECShapeAnimation and redefining the procedure Animation



This animation will toggle the property Color and HoverColor the TECShape

shape := map.shapes.markers[0];
shape.Animation := TECAnimationShapeColor.create;
// change color every 250ms
shape.Animation.Timing := 250;

shape := map.shapes.markers[1];
// stop animation after 10 cycles
shape.Animation := TECAnimationShapeColor.create(10);
// change color every 250ms
shape.Animation.Timing := 250;

Fig. 80 TECAnimationShapeColor


This class is used to modify the property Filename of TECShapeMarker and therefore have an animation of images

var Animation : TECAnimationMarkerFilename ;
Shape : TECShapeMarker;

shape := map.shapes.markers[0];

Animation := TECAnimationMarkerFilename.create;

// importantly other animation will not work
Shape.Filename := '';

// change image every 200ms
Animation.Timing := 200;

shape.Animation := Animation;


This class is used to change the Filename property of TECShapeMarker depending on the zoom level of the map

shape := map.shapes.markers[0];

// create animation and fix filename by default
AnimZoom := TECAnimationMarkerZoomFilename.create('');

// set animation
shape.Animation := AnimZoom

// filename for zoom 14

// filename forzoom 18

// filename for zoom 10


The size (width et Height) of a TECShapePOI varies from a minimum to a maximum and at the same time the marker becomes increasingly transparent to disappear.

Transparency for poiEllipse is supported only in version Firemonkey


Fig. 81 TECAnimationFadePoi

property MaxSize : integer
Maximum size of the marker (default 20)
property StartSize : integer
Minimum size of the marker (default 10)
property StartOpacity: byte
Start opacity (default 50), it decreases to 0 (full transparency)
property Step : integer
Number of step from Startsize to MaxSize (default 10)

anim := TECAnimationFadePoi.Create;
anim.MaxSize := 32;
anim.StartSize := 8 ;

anim.StartOpacity := 90;

ShapePOI.Animation := anim;


Varies the FovRadius from a TECShapeMarker

Fig. 82 TECAnimationRadiusFov

property MaxSize : integer
Maximum Radius size (default 30)
property StartSize : integer
Minimum radius size (default 10)
property Step : integer
Number of steps from StartSize to MaxSize (default 10)


Displays a Polyline step by step

Constructor Create(const ValueDuration: cardinal = 5000);

Creation of animation, ValueDuration is the time in milliseconds to display all of the trace

property Latitude : Double

Latitude of the last displayed point

property Longitude: Double

Longitude of the last displayed point

property OnDraw : TNotifyEvent

Event is raised after each display

The OnEndAnimation event is raised when the trace was fully displayed


// draw route in 3s
DrawingRoute := TECAnimationDrawPath.Create(3000);

// call when line is 100% draw
DrawingRoute.OnEndAnimation := doOnDrawAllRoute;

// call every draw
DrawingRoute.OnDraw := doOnDraw

// DrawingRoute will be automatically deleted
map.shapes.Lines[i].Animation := DrawingRoute;

Fig. 83 TECAnimationDrawPath


This class allows to move a TECShape along a TECShapeLine

property Distance : integer ;

Distance in metres from the beginning of TECShapeLine
property Heading : boolean;
Adjust the angle of the element according to the movement

property Speed : integer;

Movement speed in Km/H

property Stop : boolean;

Allow or not moving

property ComeBack : boolean;

Indicates the direction of travel, if ComeBack = true then the element moves from the end to the beginning of TECShapeLine

property OnDriveUp : TNotifyEvent

Event raised when the item arrives at the end or at the beginning of the path

shape := map.shapes.markers[0];

// create animation on Lines[0] , start à 0 meter, Speed = 50km/h
moving := TECAnimationMoveOnPath.create(map.shapes.Lines[ 0],0,50);

shape.animation := moving;

moving.OnDriveUp := doEndAnimationMove;
// run shape
moving.stop := false;
procedure TForm.doEndAnimationMove(sender : TObject);
// We arrived at the end of the road, reversing the direction of movement
TECAnimationMoveOnPath(TECShape(sender).animation).ComeBack := not TECAnimationMoveOnPath(TECShape(sender).animation).ComeBack;
// run shape
TECAnimationMoveOnPath(TECShape(sender).animation).Stop := false;

Fig. 84 TECAnimationMovOnPath

You do not need to destroy TECShapeAnimation the TECShape does this automatically when you assign a new animation or when he is even released


shape := map.shapes.markers[0];
// stop animation after 10 cycles
shape.Animation := TECAnimationShapeColor.create(10);
// change color every 250ms
shape.Animation.Timing := 250;


// free TECAnimationShapeColor
shape.Animation := nil;

The animations have events OnAnimation, raised after each cycle and OnEndAnimation raised at the end of the animation if you indicated a maximum number of cycles during the creation of animation.

shape := map.shapes.markers[0];
// stop animation after 10 cycles
shape.Animation := TECAnimationShapeColor.create(10);
// change color every 250ms
shape.Animation.Timing := 250;
shape.Animation.OnEndAnimation := doEndAnimation;

procedure TForm.doEndAnimation(sender : TObject);
ShowMessage('End Animation:'+inttostr(TECShape(sender).Id));


This animation allows you to move an element in one direction depending on its speed

property Direction: double
de 0 à 360°, 0 indicating the top of the map (North)
property Heading : boolean
Rotates the item depending on its direction
property Speed: integer
Speed in km/h
procedure Start
Starts the animation
property Stop: boolean
Stops the animation
property TimeOut : cardinal
indicates a time in milliseconds after which the animation is stopped, 0 = unlimited, 1000 = 1s
var Direction : integer;
animD : TECAnimationMoveToDirection;
ShapeMarker: TECShapeMarker;
SpeedKMh : integer;

// Optimization, call BeginUpdate before adding elements

// Create 360 markers that will move in their own direction
for Direction := 0 to 359 do

ShapeMarker := map.AddMarker(map.Latitude,map.longitude) ;
shapeMarker.Filename := '';
SpeedKMh := 30 + random(100);

// create animation
animD := TECAnimationMoveToDirection.Create(SpeedKMh,Direction);
shapeMArker.Animation := animD;

// the item points in the direction
animD.Heading := true;

// start move


// We can now allow the map to be updated


Fig. 85 TECAnimationMoveToDirection


This animation hides an element by switching its visible property to false, MaxTiming shows the time in milliseconds after which the element is hidden.

var win: TECShapeInfowindow;
win: = map. addInfoWindow (lat, lng);

// automatically close the window after 15 seconds
win.Animation := TECAnimationAutoHide.Create;
TECAnimationAutoHide (win.Animation).MaxTiming := 1000 * 15;


Allows to scroll the pattern used by PenStyle in TECShapeLine and TECShapePolygone.

poly.PenStyle := psuserStyle;
poly.animation := TECAnimationDash.create;

line.PenStyle := psuserStyle;
line.animation := TECAnimationDash.create;
// reverse the direction
TECAnimationDash(line.animation).MoveForward := false;

Fig. 86 TECAnimationDash

go to page
© 2016 ESCOT-SEP Christophe - Made width Help&Web - RSS - Google+