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 , 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. 118 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. 119 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;


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. 120 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. 121 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. 122 TECAnimationMoveToDirection

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