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

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+