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

Animation

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

93

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. 118 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

31

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;

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

94

// 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

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

95


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

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