Faire une animation en courbe

**gup** · 22/05/2010, 15h01

Bonjour,

Voilà je recherche à faire une animation d'une div sur une courbe. Quelqu'un aurait-il un exemple d'un déplacement d'une div en courbe s'il vous plait ?

Merci

Invité · 22/05/2010, 18h09

Bonjour,

Prendre en compte les coordonnées x et y (genre top et left) de la "div" en regard de celles de la courbe.

Un peu de précision est-il possible?

A+

**gup** · 22/05/2010, 18h31

Merci pour ta réponse.

Admettons par exemple que j'ai une div de 100px par 100px. Je souhaite par exemple quand je clique sur un bouton, la faire bouger en cercle.

**danielhagnoul** · 23/05/2010, 01h06

Bonsoir.

Exemple avec une image et une division :

Code :

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
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
<!doctype html>
<html lang="fr">
<head>
	<meta charset="utf-8" />
	<meta name="Author" content="Daniel Hagnoul" />
	<title>Page type</title>
	<style>
		body {
			background-color:#696969;
			color:#000000;
			font-family:Arial, Helvetica, sans-serif;
			font-size:medium;
			font-style:normal;
			font-weight:normal;
			line-height:normal;
			letter-spacing:normal;
		}
		#imgID {
			position:absolute;
			top:200px;
			left:700px;
			width:270px;
			height:200px;
		}
		#divID {
			position:absolute;
			top:50px;
			left:50px;
			width:100px;
			height:100px;
			padding:6px;
			font-family:cursive;
			font-size:0.8em;
			background-color:whiteSmoke;
			border:1px solid gray;
		}
	</style>
	<script src="../lib/jqueryui/js/jquery-1.4.2.min.js"></script>
	<script>
		// effectue un arc de cercle autour du centre r
 
		// img : x = 700 , y = 200, r = 150
 
		var angleIMG = 0;
 
		function imgCercle(){
			$("#imgID").css({
				left:parseInt(700 + 150 * Math.cos(angleIMG)),
				top:parseInt(200 - 150 * Math.sin(angleIMG))
			});			
 
			angleIMG += 0.05;
		}
 
		// div : x = 50 , y = 50, r = 50
 
		var angleDIV = 0;
 
		function divCercle(){
			$("#divID").css({
				left:parseInt(50 + 50 * Math.cos(angleDIV)),
				top:parseInt(50 - 50 * Math.sin(angleDIV))
			});			
 
			angleDIV -= 0.05;	// négatif, tourne dans l'autre sens
		}
 
		$(window).load(function(){
 
			var autreInterval = setInterval(function(){
				imgCercle();
				divCercle();
			}, 30);
 
			// arrêt de l'animation après 10s
			setTimeout("clearInterval(" + autreInterval + ")", 10000);
 		});
	</script>
</head>
<body>
	<img id="imgID" src="../images/imageTest.png" />
	<div id="divID">Un mot pour remplir.</div>
</body>
</html>

**gup** · 24/05/2010, 16h07

Merci beaucoup, ca marche bien.

Je pousse un tout petit peu plus loin. Mes div ont un fond en forme circulaire. Est-il possible de faire une détection de collision entre 2 div mais sur l'intersection des cercles du background ? Le background est le même pour toutes les div.

encore merci

**danielhagnoul** · 24/05/2010, 20h37

Bonsoir.

Envoyé par gup

Mes div ont un fond en forme circulaire. Est-il possible de faire une détection de collision entre 2 div mais sur l'intersection des cercles du background ? Le background est le même pour toutes les div.i

Détail

Une division occupe toujours un emplacement rectangulaire, même si en apparence elle est circulaire.

Détection de collision

Idée : vérifier à chaque instant t qu'il n'y a pas intersection entre les deux rectangles. Comment ? Aucune idée sur l'instant et pas le temps de chercher.

Ces calculs risquent de ralentir l'animation.

**danielhagnoul** · 25/05/2010, 00h18

Bonsoir.

Deux divisions tournant en cercle en sens contraire avec arrêt de l'animation si intersection des divisions :

Code :

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
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
<!doctype html>
<html lang="fr">
<head>
	<meta charset="utf-8" />
	<meta name="Author" content="Daniel Hagnoul" />
	<title>Page type</title>
	<style>
		body {
			background-color:#696969;
			color:#000000;
			font-family:Arial, Helvetica, sans-serif;
			font-size:medium;
			font-style:normal;
			font-weight:normal;
			line-height:normal;
			letter-spacing:normal;
		}
		h1,h2,h3,h4,h5 {
			font-family:serif;
		}
		div,p,h1,h2,h3,h4,h5,h6,ul,ol,dl,form,table,img {
			margin:0px;
			padding:0px;
		}
	</style>
	<script src="../lib/jqueryui/js/jquery-1.4.2.min.js"></script>
	<script>
		// effectue un arc de cercle autour du centre r
		// div : x = 50 , y = 50, r = 50
 
		var angleH = 0;
 
		function cercleHoraire(id, rect){
			$("#"+id).css({
				left:parseInt(rect[0] + rect[4] * Math.cos(angleH)),
				top:parseInt(rect[1] - rect[4] * Math.sin(angleH))
			});			
 
			angleH -= 0.05;	// négatif, sens horaire
		}
 
		var angleT = 0;
 
		function cercleTrigo(id, rect){
			$("#"+id).css({
				left:parseInt(rect[0] + rect[4] * Math.cos(angleT)),
				top:parseInt(rect[1] - rect[4] * Math.sin(angleT))
			});			
 
			angleT += 0.05;	// positif, sens trigonométrique
		}
 
		function intersects(r1, r2){
			return !((r1[0] + r1[2] <= r2[0]) || (r1[1] + r1[3] <= r2[1]) || (r1[0] >= r2[0] + r2[2]) || (r1[1] >= r2[1] + r2[2]));
		}
 
		$(window).load(function(){
			// x, y, width, height, r
 
		/*
			// se frôle sans intersection
			var rect1 = [100, 100, 100, 100, 100];
			var rect2 = [202, 202, 100, 100, 100];
		*/
 
			// avec intersection
			var rect1 = [100, 100, 100, 100, 100];
			var rect2 = [220, 220, 100, 100, 150];
 
			$("<div/>",{
				id:"div1",
				css:{
					position:"absolute",
					left:rect1[0]+"px",
					top:rect1[1]+"px",
					width:rect1[2]+"px",
					height:rect1[3]+"px",
					backgroundColor:"yellow",
					border:"1px solid grey"
				}
			}).appendTo("body");
 
			$("<div/>",{
				id:"div2",
				css:{
					position:"absolute",
					left:rect2[0]+"px",
					top:rect2[1]+"px",
					width:rect2[2]+"px",
					height:rect2[3]+"px",
					backgroundColor:"#ccffcc",
					border:"1px solid grey"
				}
			}).appendTo("body");
 
			// Firebug
			// ne tient pas compte des bordures
			//console.log(intersects(rect1, rect2));
 
			var obj1 = $("#div1");
			var obj2 = $("#div2");
			var offset1 = obj1.offset();
			var offset2 = obj2.offset();
			var r1 = [offset1.left, offset1.top, obj1.outerWidth(), obj1.outerHeight(), rect1[4]];
			var r2 = [offset2.left, offset2.top, obj2.outerWidth(), obj2.outerHeight(), rect1[4]];
 
			// Firebug
			//console.log(r1);
			//console.log(r2);
 
			// Firebug
			// tient compte des bordures
			//console.log(intersects(r1, r2));
 
			var cercleInterval = setInterval(function(){
				cercleHoraire("div1", rect1);
				cercleTrigo("div2", rect2);
 
				offset1 = obj1.offset();
				offset2 = obj2.offset();
				r1 = [offset1.left, offset1.top, obj1.outerWidth(), obj1.outerHeight(), rect1[4]];
				r2 = [offset2.left, offset2.top, obj2.outerWidth(), obj2.outerHeight(), rect2[4]];
 
				if (intersects(r1, r2)){
					clearInterval(cercleInterval);
				}
			}, 30);
 		});
	</script>
</head>
<body>
</body>
</html>

**gup** · 25/05/2010, 16h05

Merci beaucoup.

J'ai eu quelques souci sur certaines collisions, que j'ai pu régler en prenant en compte l'angle au moment de la collision.

Un grand merci

Faire une animation en courbe

jQuery

Discussions similaires

Partager

Partager