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

Animation

Vous êtes ici :TECNativeMap > Shapes

English

Composant cartographique Delphi
Achat - Contact
TECNativeMap
1. Mode hors-ligne
2. Styles
3. Multi vue
4. Serveur de tuiles distant
5. Localisation
6. Import/Export
7. Shapes
  1. TECShapeMarker
  2. TECShapePoi
  3. TECShapeLine
  4. TECShapePolygone
  5. TECShapeInfoWindow
  6. Animation
8. Routes
9. Layers
10. Composants
11. Android
12. iOS

Contactez-moi pour obtenir une version de test du composant

Sommaire

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

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

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é

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

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

À suivre... Routes

Voir aussi

Aller à la page