Insérer et positionner des images matricielles

**eleydet** · 01/03/2020, 12h26

Bonjour,

Il est possible d'insérer et de positionner des images matricielles :
- Entre <div> et </div> (solution la plus ancienne, voir la discussion Animation continue d'images dans une fenêtre)
- Entre <canvas> et </canvas> (voir la discussion Canvas, latitude et longitude)
- Et entre <svg> et </svg> (solution la plus récente)

Je me demande quelle solution est la meilleure... Il me semble que la dernière, entre <svg> et </svg>, est la plus souple.

**NoSmoking** · 03/03/2020, 11h05

Bonjour,

Je me demande quelle solution est la meilleure...

la bonne question serait pour quel usage ?

**eleydet** · 07/03/2020, 22h05

Bonsoir,

L'idée est de créer des animations :

A partir d'images 2D.
Traitées coté client... en JavaScript.

Et de comparer trois solutions :

Entre <div> et </div> : Simple mais l'ajout d'un segment ou d'un triangle est compliqué.
Entre <canvas> et </canvas> : Fonctionne, mais il faut placer des images les unes par dessus les autres au lieu de les déplacer.
Et entre <svg> et </svg> : Les possibilités pour obtenir un même résultat sont nombreuses!

Pour illustrer cette comparaison, les trois codes ci-dessous font la même chose.

1ère solution

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<!DOCTYPE html>
<html>
 
<head>
<meta charset="utf-8">
<style>
div {
  background-color: #ddd;
  position: relative;
  width: 500px;
  height: 300px;
  margin: auto;
  overflow: hidden;
}
img { position: absolute; }
</style>
</head>
 
<body>
<div><img src="velo.png"></div>
 
<script>
x = -100;
velo = document.getElementsByTagName("IMG")[0];
velo.style.top = "20px";
bouge = function() {
  x=x+2;
  if (x>400) x = -100;
  velo.style.left = x+"px";
};
setInterval(bouge, 8);
</script>
</body>
 
</html>

2ème solution

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<!DOCTYPE html>
<html>
 
<head>
<meta charset="utf-8">
<style>
canvas {
  display: block;
  margin: auto;
}
</style>
</head>
 
<body>
<canvas id="dessin" width="500" height="300"></canvas>
 
<script>
cadre = document.getElementById('dessin').getContext('2d');
cadre.fillStyle = "rgb(220, 220, 220)";
cadre.fillRect (0, 0, 500, 300);
x = -100;
velo = new Image();
velo.src = 'velo.png';
velo.onload=function() {
  cadre.drawImage(velo, -100, 20);
};
bouge = function() {
  x=x+2;
  if (x>400) x = -100;
  cadre.fillRect (0, 0, 500, 300);
  cadre.drawImage(velo,x,20);
};
setInterval(bouge, 8);
</script>
 
</body>
 
</html>

3ème solution

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<!DOCTYPE html>
<html>
 
<head>
<meta charset="utf-8">
<style>
svg {
  display: block;
  margin: auto;
}
</style>
</head>
 
<body>
<svg width="500" height="300">
  <rect x="0" y="0" width="500" height="300" fill="#ddd" />
  <image xlink:href="velo.png" x="-100" y="20"/>
</svg>
 
<script>
x = -100;
velo = document.getElementsByTagName("image")[0];
bouge = function() {
  x=x+2;
  if (x>400) x = -100;
  velo.setAttribute('x',x);
};
setInterval(bouge, 8);
</script>
</body>
 
</html>

**SpaceFrog** · 09/03/2020, 09h15

Une vielle page de sprites
https://sk-martin.developpez.com/Art...toon/wheel.htm

**NoSmoking** · 12/03/2020, 15h59

Envoyé par eleydet

Pour illustrer cette comparaison, les trois codes ci-dessous font la même chose.

Pour reprendre ton exemple je dirais que, pour moi, la seule solution à mettre en place est de placer une l'image dans une <div>, le tout étant animé via le CSS et non par le JavaScript, de la sorte on aura moins d'utilisation de CPU et peu ou pas de reflow.
A ce sujet il est préférable dans ce cas de jouer avec transform: translate3d qu'avec la position left.

Avec SVG tu pourrais également te passer de JavaScript, SVG possédant des éléments comme animateMotion permettant de faire des choses sympas même si pas toujours très évidentes, mais mettre un élément <image> dans un élément <svg> et la déplacer via JavaScript est pour moi un non-sens.

Concernant <canvas>, il n'y a pas de travail sur les pixels donc son intérêt sur le coup est moindre et consommateur de CPU.

Ici on est effectivement dans une « animation linéaire » mais dès qu'il va falloir être un peu plus tordu alors la question pourra effectivement se poser.