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

Animation

Vous êtes ici :TECNativeMap > Shapes

TECShape dispose d'une propriété Animation de type TECShapeAnimation permettant de l'animer.

Les classes suivantes sont disponibles en standard, TECAnimationShapeColor , TECAnimationAutoHide, TECAnimationMarkerFilename , TECAnimationMarkerZoomFilename, TECAnimationFadePoi, TECAnimationDrawPath , TECAnimationMoveOnPath et TECAnimationMoveToDirection

Vous pouvez créer les votre en heritant de la classe TECShapeAnimation et en redéfinissant la procedure Animation

1

TECAnimationShapeColor

Cette animation fait alterner les proprieté Color et HoverColor du 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

Cette classe permet de modifier la propriété Filename des TECShapeMarker et donc d'avoir une animation d'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

Cette classe permet de modifier la propriété Filename des TECShapeMarker en fonction du niveau de zoom de la carte

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

La taille (width et Height) d'un TECShapePOI varie d'un minimum vers un maximum et dans le même temps le marker devient de plus en plus transparent jusqu'a disparaitre.

La transparence pour les poiEllipse n'est gérée que dans la version Firemonkey

1
property MaxSize : integer
Taille maximale du marker (défaut 20)
property StartSize : integer
Taille minimale du marker (défaut 10)
property StartOpacity: byte
Opacité de départ (défaut 50), elle décroit jusqu'a 0 ( transparence totale )
property Step : integer
Nombre d'étape pour passer de StartSize à MaxSize (défaut 10)

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

anim.StartOpacity := 90;

ShapePOI.Animation := anim;

TECAnimationRadiusFov

Fait varier le FovRadius d'un TECShapeMarker

Fig. 2 TECAnimationRadiusFov

property MaxSize : integer
Taille maximale du Radius (défaut 30)
property StartSize : integer
Taille minimale du Radius (défaut 10)
property Step : integer
Nombre d'étape pour passer de StartSize à MaxSize (défaut 10)

TECAnimationDrawPath

Affiche un Polyline pas à pas

Constructor Create(const ValueDuration: cardinal = 5000);
Création de l'animation, ValueDuration est le temps en milliseconde pour afficher la totalité du tracé
property Latitude : Double
Latitude du dernier point affiché
property Longitude: Double
Longitude du dernier point affiché
property OnDraw : TNotifyEvent
Événement déclenché après chaque affichage

L'événement OnEndAnimation est déclenché lorsque le tracé a été entièrement affiché

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;

TECAnimationMoveOnPath

Cette classe permet de déplacer un TECShape le long d'un TECShapeLine

property Distance : integer ;
Distance en mètres depuis le début du TECShapeLine
property Heading : boolean;
Ajuster l'angle de l'élément en fonction du déplacement
property Speed : integer;
Vitesse de déplacement en Km/H
property Stop : boolean;
Autoriser ou non le déplacement
property ComeBack : boolean;
Indique le sens de déplacement, si ComeBack = true alors l'élément se déplace de la fin vers le début du TECShapeLine
property OnDriveUp : TNotifyEvent
Évenement déclenché lorsque l'élément arrive à la fin ou au début, suivant le sens, du chemin

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

Vous n'avez pas besoin de détruire TECShapeAnimation le TECShape le fait automatiquement quand vous lui assignez une nouvelle animation ou quand il est lui même libéré

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;

Les animations disposent des événements OnAnimation, déclenché après chaque cycle et OnEndAnimation déclenché en fin d'animation si vous avez indiqué un nombre maximal de cyles lors de la création de l'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

Cette animation permet de déplacer un élément dans une direction en fonction de sa vitesse

property Direction: double
de 0 à 360°, 0 indiquant le haut de la carte (nord)
property Heading : boolean
Oriente ou non l'élément en fonction de sa direction
property Speed: integer
Vitesse en km/h
procedure Start
Lance l'animation
property Stop: boolean
Arrête l'animation
property TimeOut : cardinal
indique un temps en milliseconde après lequel l'animation est arrêtée, 0 = illimité , 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. 4 TECAnimationMoveToDirection

TECAnimationAutoHide

Cette animation cache un élément en basculant sa propriété visible à false, MaxTiming indique le temps en milliseconde après lequel l'élément est caché.

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

Permet de faire défiler le pattern utilisé par PenStyle dans les TECShapePoi, TECShapeLine et 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. 5 TECAnimationDash

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