Comment créer un widget coulissant (GTK +, rapidement)


8

Récemment, j'ai vu ce widget dans Gedit:

entrez la description de l'image ici

Il apparaît lorsque vous appuyez sur Ctrl + F. Ce qui m'intéresse, c'est comment obtenir l'effet de glissement. N'hésitez pas à nous faire part de vos suggestions.


L'effet coulissant ne comprend pas ce que signifie "l'effet coulissant"
twister_void

@Gaurav_Java, il semble glisser du dessous du panneau supérieur. Si vous le voyez dans Gedit, vous le verrez en appuyant sur 'Ctrl + F'
Ángel Araya

L'effet est souvent appelé "drop-down", je crois - parfois les menus sont animés de la même manière.
Steve Kroon

1
Je pensais que vous pourriez peut-être utiliser une propriété de transition css, mais je ne vois pas comment changer le positionnement dans css. En regardant à travers le code gedit, ils semblent utiliser un cadre de vue personnalisé pour la zone de recherche bazaar.launchpad.net/~vcs-imports/gedit/master-git/view/head:/… qu'ils animent à travers un module de théâtre (regardez au bzr). Cependant, je ne suis pas très bon pour analyser le code C.
Ian B.

1
BTW, ce widget est également dans Google Chrome (et Chromium vraisemblablement)
Ian B.

Réponses:


7

J'ai obtenu un effet de fondu en utilisant GTK et CSS purs .

Cela ne fonctionne que dans GTK 3.6 et je ne sais pas si un effet de glissement entrant / sortant serait possible, cependant, si vous le souhaitez, vous pouvez regarder la source sur launchpad.net/uberwriter

Cela fonctionne à travers un changement d'état, puis des transitions GTK ... Peut-être qu'avec la hauteur // largeur, cela serait également possible.

ÉDITER

Parce que les gens me déprécient évidemment, voici une autre explication plus détaillée:

Voici le CSS que j'ai utilisé:

GtkLabel:insensitive {
    color: rgba(255,255,255,0);
    transition: 500ms ease-in-out;
}

Si vous l'utilisez comme CSS (j'espère que je suis autorisé à faire référence à une explication de moi-même, comment faire: http://wolfvollprecht.de/blog/gtk-python-and-css-are-an-awesome-combo/ ) vous pouvez ensuite utiliser Gtk.StateFlagspour estomper l’étiquette.

par exemple:

label.set_state_flags(Gtk.StateFlags.INSENSITIVE, True)

Ensuite, vous obtenez une transition vers une opacité nulle.

Cependant, comme je l'ai remarqué, il n'y a pas beaucoup d'options pour influencer le placement / la largeur avec CSS, donc je suppose que c'est limité aux couleurs / opacité, etc.

Prendre plaisir.

PS: Notez que cela ne fonctionne que dans Gtk 3.6, depuis Ubuntu 12.10


Les gens ont probablement voté contre parce que la question demandait une animation glissante, mais vous avez donné une transition d'opacité, ce qui est totalement différent ... donc je ne sais pas pourquoi tant d'autres personnes ont voté . De toute façon, il y en a aujourd'hui GtkRevealer, qui peut faire les deux; voir ma réponse .
underscore_d

3

Une telle animation n'est pas réalisable en GTK + pur. Il n'y a aucun mécanisme pour le traiter.

J'ai donné un rapide aperçu du code source de gedit, il est clair qu'ils traitent cette animation par eux-mêmes. Je n'ai pas examiné les détails, car le code lié aux animations est assez développé, mais j'ai remarqué qu'ils incorporent des fonctionnalités de dessin du Caire pour le widget de recherche animé. Le widget est très probablement animé en déplaçant sa position image par image et en le redessinant à un endroit différent de la superposition utilisée sur une seule zone d'affichage de texte.

Cela semble être la solution la plus simple. (Le code de gedit semble être préparé pour de nombreuses animations partageant la même base de code, donc il peut être exagéré d'utiliser son approche exacte dans une application simple.)

Pour reproduire cet effet, vous devrez:

  • Utilisez un widget personnalisé pour l'élément d'interface utilisateur que vous souhaitez faire glisser vers l'intérieur / l'extérieur.
  • Faites-le réagir sur l' événement de dessin et les délais d'expiration périodiques (pour redessiner chaque image d'animation)
  • Créez une superposition transparente sur le reste de vos widgets (ou toute zone qui doit apparaître comme si elle était en dessous du widget coulissant)
  • Dessinez le widget animé manuellement sur une telle superposition.

Je ne peux pas trouver de solution plus simple. Cependant, étant donné que les développeurs de gedit connaissent GTK + comme probablement très peu, il n'y a peut-être pas de truc plus simple pour obtenir un tel effet.


Il semble que votre idée soit la "plus simple". Je pensais que cela pourrait être fait avec un piratage CSS, mais la lecture du code de Gedit semble plus être codée en dur et préparée pour plus qu'une simple entrée de zone de recherche, comme vous le dites. Donc, je vais essayer de créer un widget personnalisé et, d'abord, le déplacer sur certains événements (au moins si c'est possible). Merci pour vos suggestions.
Ángel Araya

1

Vous pouvez utiliser une combinaison entre Gtk.fixed (), GObject.timeout_add et le déplacement de fonction, voici un exemple en python:

#! / usr / bin / python *
depuis gi.repository import Gtk, GObject

classe TestWindow (Gtk.Window):
     def animateImage (auto):
        GObject.timeout_add (150, self.slideImage)

     def slideImage (auto):
        self.positionX + = 50;
        si (self.positionX> 800):
          self.fixedWidget.move (self.logo, self.positionX, 200)
          retourne vrai        
        autre:
          retour Faux 

     def __init __ (auto):
        Gtk.Window .__ init __ (self, title = 'Registration')

        self.positionX = 500
        self.fixedWidget = Gtk.Fixed ()
        self.fixedWidget.set_size_request (1920,1080)
        self.fixedWidget.show ()

        self.logo = Gtk.Image.new_from_file ('picture.png')
        self.logo.show ()
        self.fixedWidget.put (self.logo, self.positionX, 200)

        self.button1 = Gtk.Button ('Cliquez sur moi pour faire glisser l'image!')
        self.button1.show ()
        self.button1.connect ('cliqué', self.animateImage)
        self.button1.set_size_request (75,30)
        self.fixedWidget.put (self.button1,750,750)
        self.add (self.fixedWidget)

testWindow = TestWindow ()
testWindow.set_size_request (1920,1080)
testWindow.set_name ('testWindow')
testWindow.show ()

Gtk.main ()

1

De nos jours, il y a une vraie réponse à cette question. Depuis qu'il a été initialement demandé et répondu, le code pour révéler un widget à partir libgdduquel - je suppose que c'est ce que GEdit utilisait à l'époque - a été amont dans GTK + comme GtkRevealer:

https://developer.gnome.org/gtk3/stable/GtkRevealer.html

GtkRevealer prend en charge diverses formes de transition, y compris les directions cardinales de glissement et un fondu sur l'opacité.

Donc, de nos jours, c'est aussi simple que d'ajouter le widget vers lequel vous souhaitez effectuer la transition GtkRevealeret d'utiliser ses propriétés :transition-(type|duration)et :reveal-child.

En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.