Animation en javascript/css à paramétrer

**§Gama§** · 17/02/2013, 16h50

Bonjour,
je viens de créer une petite animation qui marche très bien...
que voici:

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
 
<!DOCTYPE html>
 
<html lang="fr">
<head>
 
<style> 
.stylebox
{
	width:100px;
	height:40px;
	color:#ffffff;
	position:relative;
	font-weight:bold;
	font-size:15px;
	padding:10px;
	float:left;
	margin:20px;
	margin-right:50px;
	border:1px solid #888888;
	border-radius:10px;
}
 
#mabox
{
border:5px solid #000000;
background:green;
margin:10px;
opacity:0.7;
}
 
</style>
 
 
<script>
var zebox,zeangle=0,zeevent
 
function boxTransform()
{
	clearInterval(zeevent)
	zeevent=setInterval("startTransform('skew')",1)
}
 
 
function startTransform(funct)
{
	box=document.getElementById("mabox")
	zeangle=zeangle+2
	box.style.transform=funct+"(" + zeangle + "deg)"
	if (!(zeangle%180)) //arret sur un demi-tour!
	{
		clearInterval(zeevent) 	
	}
	zeangle %=360;
}
 
 
 
</script>
</head>
<body > 
 
<div style="height:80px;">
	<div onclick="boxTransform()" id="mabox" class="stylebox">Oulalalala</div>
</div>
 
</body>
</html>

je souhaite maintenant chopper le parametre event! dans la fonction...

donc logiquement

Code :

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

1
2
3
4
5
6
 
	zeevent=setInterval("startTransform(zeevent,'skew')",1)
...
         function startTransform(event, funct)
....
         clearInterval(event)

hors ca ne semble pas fonctionner, le event n'est pas le zeevent...
ce qui me parait logique de ce point de vue... puisqu'on passe par une transformation de string, et les paramètres doivent y passer à la semoule...
donc je pensais utiliser un Array avec des indices et gérer une fonction evenementielle qui testerait la destruction des evenements....
mais avant, je voulais être sûr qu'il n'y a pas un moyen de transmettre une variable de cette facon... merci d'avance.

**SylvainPV** · 18/02/2013, 11h00

Bonjour,

Avant d'aller plus loin quelques bonnes pratiques pour les animations DOM:
- utiliser les transformations CSS lorsque c'est possible
- utiliser requestAnimationFrame plutôt que setInterval ou setTimeout
- passer des fonctions plutôt que des String en instructions, un setInterval(string) équivaut à un eval, déprécié pour ses performances et son manque de lisibilité

**§Gama§** · 18/02/2013, 21h21

Bonjour Sylvain,

Merci pour ta réponse.

Effectivement pour rAF je viens de regarder, ça semble être mieux d'après des tas d'articles sur le net.
Pour les fonctions à passer, ce n'est pas encore ma tasse de thé en JavaScript, j'y vais au fur et à mesure.
Pour les transformations CSS... c'est déjà ce que j'utilise, non ?

**SylvainPV** · 20/02/2013, 22h21

Je voulais dire transition CSS, pas transformation. Là tu réattribues les propriétés CSS à chaque intervalle de temps par un timer Javascript. Il est possible d'optimiser et de simplifier les animations pour passer d'un état CSS à un autre, exemple dans les cours et tutoriels pour apprendre CSS : http://css.developpez.com/cours/

**Auteur** · 20/02/2013, 22h35

event est un objet javascript... Pourquoi un clearInterval ?

**§Gama§** · 21/02/2013, 00h00

Pour libérer le timer?
BOn sinon, maintenant ca marche mieux avec RaF... merci!

**Auteur** · 21/02/2013, 16h53

Envoyé par §Gama§

Pour libérer le timer?
BOn sinon, maintenant ca marche mieux avec RaF... merci!

event est un objet natif de javascript pas une variable !!

**SylvainPV** · 21/02/2013, 19h06

Envoyé par Auteur

event est un objet natif de javascript pas une variable !!

Absolument pas, event est un argument de sa fonction et donc bel et bien une
variable. En revanche il porte mal son nom car associé à un timer (retour de setInterval), il ne s'agit donc pas d'un objet Event.

Au passage, il faut penser à mettre le mot-clé var devant la déclaration de variables, sinon elles sont déclarées dans le scope global (window) ce qui peut causer de nombreuses confusions.

Animation en javascript/css à paramétrer

JavaScript

Discussions similaires

Partager

Partager