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

Animation

  • Shapes
  • Glossary
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

1

TECAnimationShapeColor

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. 1 TECAnimationShapeColor

TECAnimationMarkerFilename

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 := 'http://maps.google.com/mapfiles/ms/icons/orange-dot.png';

// change image every 200ms
Animation.Timing := 200;
Animation.Filenames.add('http://maps.google.com/mapfiles/ms/icons/orange-dot.png');
Animation.Filenames.add('http://maps.google.com/mapfiles/ms/icons/green-dot.png');
Animation.Filenames.add('http://maps.google.com/mapfiles/ms/icons/blue-dot.png');

shape.Animation := Animation;

TECAnimationMarkerZoomFilename

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('http://maps.google.com/mapfiles/ms/icons/red-dot.png');

// set animation
shape.Animation := AnimZoom

// filename for zoom 14
AnimZoom.add(14,'http://maps.google.com/mapfiles/ms/icons/orange-dot.png');

// filename forzoom 18
AnimZoom.add(18,'http://maps.google.com/mapfiles/ms/icons/green-dot.png');

// filename for zoom 10
AnimZoom.add(10,'http://maps.google.com/mapfiles/ms/icons/blue-dot.png');

TECAnimationFadePoi

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

1

Fig. 2 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;

TECAnimationRadiusFov

Varies the FovRadius from a TECShapeMarker

Fig. 3 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)

TECAnimationDrawPath

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

2

// 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. 4 TECAnimationDrawPath

TECAnimationMoveOnPath

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);
begin
// 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;
end;

Fig. 5 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

3

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);
begin
ShowMessage('End Animation:'+inttostr(TECShape(sender).Id));
end;

TECAnimationMoveToDirection

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;
begin

// Optimization, call BeginUpdate before adding elements
map.BeginUpdate;

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

ShapeMarker := map.AddMarker(map.Latitude,map.longitude) ;
shapeMarker.Filename := 'http://www.helpandweb.com/arrow2.png';
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
animD.Start;


end;

// We can now allow the map to be updated

map.EndUpdate;

Fig. 6 TECAnimationMoveToDirection

TECAnimationAutoHide

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;

TECAnimationDash

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

poly.PenStyle := psuserStyle;
poly.setcustomdash([4,8,2,8,8,4]);
poly.animation := TECAnimationDash.create;

line.PenStyle := psuserStyle;
line.setcustomdash([4,8,2,8,8,4]);
line.animation := TECAnimationDash.create;
// reverse the direction
TECAnimationDash(line.animation).MoveForward := false;

Fig. 7 TECAnimationDash

go to page
Réalisé avec la version gratuite pour les particuliers d'Help&Web