9
votes

JavaScript Rétrécissement / Transition de cercle de croissance

Ma première question ici. :)

Je recherche une transition entre deux images où l'image se rétrécit d'abord dans une forme de cercle, puis le cercle se développe à nouveau sur l'autre image. Il est difficile d'expliquer et j'utilise peut-être les mauvais mots, car je ne trouve rien à ce sujet sur l'interwebz.

Je parle d'un effet comme les toons de façon méprise se terminant. http://www.youtube.com/watch?v=zuyiq-j5l9i

qui s'est rétrécissant à noir, peut-il être fait en JavaScript / JQuery?

javascript jquery image geometry transition

0 commentaires

4 Réponses :

1
votes

Je suis venu cela, j'espère que c'est intéressant: http://www.netzgesta.de/transm/ . La transition cercles_out avec un cercle pourrait faire le travail que je pense.



                                                                    
                                    
                                    
                                        1 commentaires
                                        
                                                                                            
                                                    Cela a l'air bien, bien que je n'ai pas encore été capable de le faire travailler. J'essaierai un peu plus cet après-midi.


                        
                                            
                            
                                
                                    0
 votes
                                
                            
                            
                                
                                     Vous allez.  http://jquery.malsup.com/cycle/  Vérifiez le zoom. Quelque chose peut être élaboré avec la partie de cercle.                                 

                                                                    
                                    
                                    
                                        1 commentaires
                                        
                                                                                            
                                                    Oui, j'ai trouvé celui-là, mais ce n'est pas ce dont j'ai besoin. Je ne veux pas rétrécir l'image elle-même, mais seulement l'espace autour de lui, une partie de plus en plus petite de l'image devient visible.                                                
                                                
                                                                                    
                                    
                                                            
                        
                        
                                            
                            
                                
                                    6
 votes
                                
                            
                            
                                
                                      tl: dr  
 - Cross-Browser: [** Voir une démonstration de travail
   ici **] (http://jsfiddle.net/lthibodeaux/8dsjz/).
   Bien, surtout travaillant ... et
   navigateur croisé. Pourrait faire pire. ;]
 - Solution purement CSS3: [** Voir une démonstration de travail
   ici **] (http://jsfiddle.net/lthibodeaux/8dsjz/16/)
 
 Comment puis-je commencer à décrire celui-ci? Il serait beaucoup plus facile si la norme CSS 2 Clip Standard supporta quelque chose d'ailleurs une valeur "rect", à savoir un "cercle" ou "ellipse", mais ... depuis que cela n'existe pas, j'ai fait de mon mieux pour pièce quelque chose ensemble cela fera ce que vous demandez. Les mises en garde sont nombreuses. On est que cela ne va pas travailler sur quelque chose avec une couleur de couleur unie dans le cas où vous vouliez que l'image puisse clipser à l'arrière-plan. Un autre est que lorsque j'ai essayé de prendre en compte le chronométrage de la mise à jour CSS à travers les navigateurs, le rendu n'est toujours pas "parfait". Mon approche initiale consistait à simplement animer le clip sur l'image qui devait être remplacée, mais cela n'a pas fonctionné en raison de la manière dont les mises à jour ont été apportées à la découpage via la fonction d'assouplissement du plug-in Ité. L'approche finale est ci-dessous.  
  L'approche   
 Le concept consiste à définir l'image en tant que propriété  image de fond  propriété de un conteneur comme un  
  avec un  position d'arrière-plan  de  centre central , et la position   du conteneur à  relatif  ou quelque chose de non-statique. La prochaine est de générer les éléments de découpage comme enfants du conteneur. Le premier est une position : absolu  Cercle de clipping image de la couleur de votre arrière-plan, transparent png ou gif (je préfère le premier), et les quatre suivants sont des divs, également avec  absolu < / code> positions  gauche ,  droit ,  haut  et  bas  attributs défini sur 0 pour chacun des côtés respectifs, ils clipseront. L'idée est d'animer le  top ,  gauche ,  largeur  et  hauteur  de l'image cercle de clipping et synchronisation La largeur et la hauteur des DIV de découpage à l'aide de l'option Étape de rappel de l'appel à l'étape de l'appel () en les faisant correspondre à l'actuelle  gauche  et  top . Entre animations, vous modifiez le  arrière-fond-image  du conteneur sur la nouvelle image, puis démarrez l'animation dans la direction opposée.   Ceci nécessitait un peu de fidélisation dans IE7, 8 et webkit navigateurs comme l'animation s'accrochait beaucoup plus proprement dans Firefox et IE9. Ce serait la variable  ajuster  que vous verrez dans la démonstration de travail.  
 Le code exemple est ci-dessous:  
  le balisage    xxx  
  le CSS    xxx  
  Le script  < / p>  xxx  
  edit:   
  la solution CSS3   
 " La compatibilité du navigateur est moins préoccupante, CSS3 est une option (bien que je suggère probablement de voir ce qui peut être fait avec la nouvelle toile HTML5 pour ce type d'animation). Il y a quelques choses à noter:  

 L'image doit être dans un conteneur afin de nous permettre de clipser vers son centre plutôt que son coin supérieur gauche. 
 L'attribut frontière-rayon ne clipsera pas les images de l'enfant à l'intérieur d'un conteneur. Pour cette raison, l'image doit devenir l'attribut d'image de fond du conteneur. 
 jQuery n'annule pas correctement à la frontière-rayon correctement. Vous pouvez également remplacer la fonctionnalité actuelle de JQuery Animate pour cet attribut ou construire un objet d'animation de frontières personnalisés pour rendre JQuery plus bien comporté. J'ai opté pour ce dernier. Le rayon de frontière de chaque coin doit être animé séparément. 
 L'animation in ou out est composée de deux segments distincts et, par conséquent, la fonction d'assouplissement "linéaire" est probablement mieux utilisée pour les résultats les plus propres. 
  La méthode est commentée en ligne ci-dessous:  
  le balisage    xxx  
  le CSS    xxx  
  le script    xxx  
    à nouveau, la démo est située ici.                                     


                                                                    
                                    
                                    
                                        7 commentaires
                                        
                                                                                            
                                                    Cela a l'air très bien, même si je vais probablement en avoir besoin pour travailler sur un fond aussi. J'aurais dû mention que, mais je ne savais pas à l'époque où j'ai posté la question. : - /                                                
                                                
                                                                                            
                                                    Mais j'ai pensé que je pouvais peut-être mettre l'image dans une DIV avec des frontières (CSS3) arrondies et rétrécir ce que Div. L'image d'arrière-plan sera tronquée à la frontière même si elle est arrondie, non? Ensuite, je n'ai besoin que d'animer la taille et la position de cette div et la position de l'arrière-plan. Dans IE et (Autres) Les navigateurs âgés, il animera comme une carrée, mais je peux vivre avec ça si cela me donnera la possibilité d'utiliser cette animation sur un fond. Je vais essayer de comprendre comment cette animation fonctionne et comment je peux l'adapter à mes besoins. Merci déjà pour la grande quantité d'effort.                                                
                                                
                                                                                            
                                                    @Goleztrol Eh bien, cela devient probablement beaucoup plus facile si vous ne vous souciez pas des solutions de navigateur croisée, pour ce que ça vaut. Cependant, dans le monde de IE7 / 8 ... OY ... Ouais, ce sera un gâchis sans flash ni similaire.                                                
                                                
                                                                                            
                                                    @Goleztrol Juste une mise à jour pour vous, utilisez simplement les normes CSS3, j'ai créé une démonstration de travail pour vous  ici . Encore une fois, pas sans faille, mais une option. Je vais faire une édition pour expliquer dans la réponse ci-dessus.                                                
                                                
                                                                                            
                                                    @LTHIBODEAUX: Bien fait, cependant en chrome, les images tremblent.                                                
                                                
                                                                                            
                                                    #Goleztrol Je me rends compte que sur la solution CSS3. Malheureusement, il n'y a pas de tonne que je puisse faire à propos de la façon dont JQuery anime les attributs CSS. Les attributs ne sont pas tous mis à jour de manière synchrone. La gigue Palette se produit différemment en fonction de la façon dont vous commandez les attributs dans les paramètres de la fonction d'animation. Pourrait former une base décente pour que vous le prenne plus loin, cependant.                                                
                                                
                                                                                            
                                                    Les images sont un peu shaky indépendant, en particulier sur IE (9) et le chrome. J'ai vu ce même problème dans d'autres animations aussi, même dans les bibliothèques professionnelles. Donc, j'ai bien peur qu'il n'y ait pas grand chose que vous puissiez faire à ce sujet, à moins que vous ne soyez capable de rond de la taille et de la position du bon numéro (travailler avec des multiples de 2). Pour l'instant, je suis plus que ravi. Merci beaucoup pour votre aide!                                                
                                                
                                                                                    
                                    
                                                            

                        

                        
                                            
                            
                                
                                    0
 votes
                                
                            
                            
                                
                                     J'ai essayé de plus et j'ai trouvé l'idée d'utiliser un élément  
 Veuillez voir le résultat de:  http://jsfiddle.net/3mg8e/2/ .   xxx                                  


                                                                    
                                    
                                    
                                        0 commentaires
                                        
                                                                                    
                                    
                                                            

                        

                        
                                    
            

            
                
		    
                    Articles qui pourrait vous intéresser :
                                            
                            Impossible d'importer le module "@ angular / material"                        
                        
                                            
                            Interaction profonde avec break and catch                        
                        
                                            
                            Utilisation de node.js comment renommer tous les fichiers d'un dossier                        
                        
                                            
                            Google Chrome Uncaught (promis) DOMException lors de la lecture AUDIO