So erstellen Sie ein gleitendes Widget (GTK +, Schnell)


8

Kürzlich habe ich dieses Widget in Gedit gesehen:

Geben Sie hier die Bildbeschreibung ein

Es erscheint, wenn Sie drücken Ctrl + F. Was mich interessiert, ist, wie man den Gleiteffekt erhält. Jeder Vorschlag wird geschätzt.


Nicht verstehen
Gleiteffekt

@Gaurav_Java scheint unter dem oberen Bereich zu gleiten. Wenn Sie es in Gedit sehen, werden Sie sehen, wie es 'Strg + F' drückt
Ángel Araya

Ich glaube, der Effekt wird oft als "Dropdown" bezeichnet - manchmal werden Menüs auf die gleiche Weise animiert.
Steve Kroon

1
Ich dachte, Sie könnten vielleicht eine CSS-Übergangseigenschaft verwenden, aber ich sehe nicht, wie ich die Positionierung in CSS ändern kann. Wenn sie den gedit-Code durchsehen, scheinen sie einen benutzerdefinierten Ansichtsrahmen für das Suchfeld bazaar.launchpad.net/~vcs-imports/gedit/master-git/view/head:/… zu verwenden, das sie über ein Theatermodul animieren (siehe) am bzr). Ich bin jedoch nicht sehr gut darin, C-Code zu analysieren.
Ian B.

1
Übrigens ist dieses Widget auch in Google Chrome (und vermutlich in Chromium)
Ian B.

Antworten:


7

Ich habe einen Ausblendeffekt mit reinem GTK und CSS erzielt .

Es funktioniert nur in GTK 3.6 und ich bin mir nicht sicher, ob ein Slide-In / Out-Effekt möglich wäre. Wenn Sie möchten, können Sie sich die Quelle unter launchpad.net/uberwriter ansehen

Es funktioniert durch eine Zustandsänderung und dann durch GTK-Übergänge ... Vielleicht wäre dies auch mit Höhe // Breite möglich.

BEARBEITEN

Da die Leute mich offensichtlich ablehnen, ist hier eine weitere, detailliertere Erklärung:

Dies ist das CSS, das ich verwendet habe:

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

Wenn Sie dies als CSS verwenden (ich hoffe, ich darf auf eine Erklärung von mir selbst verweisen, wie das geht: http://wolfvollprecht.de/blog/gtk-python-and-css-are-an-awesome-combo/ ) Dann können Sie Gtk.StateFlagsdas Etikett ausblenden.

z.B:

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

Dann erhalten Sie einen Übergang zur Deckkraft Null.

Wie ich jedoch bemerkt habe, gibt es nicht viele Optionen, um die Platzierung / Breite mit CSS zu beeinflussen. Ich denke, es ist auf Farben / Deckkraft usw. beschränkt.

Genießen.

PS: Beachten Sie, dass dies nur in Gtk 3.6 funktioniert, seit Ubuntu 12.10


Die Leute haben wahrscheinlich abgestimmt, weil die Frage nach einer gleitenden Animation gefragt hat, aber Sie haben einen Opazitätsübergang gegeben, der völlig anders ist ... also weiß ich nicht, warum so viele andere Leute gestimmt haben . Jedenfalls gibt es heutzutage GtkRevealerbeides, was beides kann; siehe meine Antwort .
underscore_d

3

Eine solche Animation ist in reinem GTK + nicht erreichbar. Es gibt keine Mechanismen, die dies verarbeiten würden.

Ich habe einen kurzen Blick auf den Quellcode von gedit geworfen. Es ist klar, dass sie diese Animation selbst verarbeiten. Ich habe mich nicht mit Details befasst, da der Code für Animationen ziemlich erweitert ist, aber ich habe festgestellt, dass sie Kairo-Zeichenfunktionen für das animierte Such-Widget enthalten. Höchstwahrscheinlich wird das Widget animiert, indem seine Position Frame für Frame verschoben und an einer anderen Stelle in der Überlagerung neu gezeichnet wird, die in einem einzelnen Textanzeigebereich verwendet wird.

Das scheint die einfachste Lösung zu sein. (Der Code von gedit scheint für viele Animationen vorbereitet zu sein, die dieselbe Codebasis verwenden. Daher kann es ein Overkill sein, den genauen Ansatz in einer einfachen Anwendung zu verwenden.)

Um diesen Effekt zu reproduzieren, müssen Sie:

  • Verwenden Sie ein benutzerdefiniertes Widget für das UI-Teil, das Sie ein- und ausschieben möchten.
  • Lassen Sie es auf Zeichenereignisse und periodische Zeitüberschreitungen reagieren (um jedes Bild der Animation neu zu zeichnen)
  • Erstellen Sie eine transparente Überlagerung über dem Rest Ihrer Widgets (oder einem Bereich, der so aussehen muss, als ob er sich unter dem verschiebbaren Widget befindet).
  • Zeichnen Sie das animierte Widget manuell auf einer solchen Überlagerung.

Ich kann keine einfachere Lösung finden. Angesichts der Tatsache, dass Gedit-Entwickler GTK + wahrscheinlich nur sehr wenig kennen, gibt es möglicherweise keinen einfacheren Trick, um einen solchen Effekt zu erzielen.


Es scheint, dass Ihre Idee die "einfachste" ist. Ich dachte, es könnte mit einigem CSS-Hacking gemacht werden, aber das Lesen von Gedit's Code scheint eher hartcodiert und auf mehr als einen einfachen Suchfeldeintrag vorbereitet zu sein, wie Sie sagen. Also werde ich versuchen, ein benutzerdefiniertes Widget zu erstellen und es zunächst bei bestimmten Ereignissen zu verschieben (zumindest wenn es möglich ist). Vielen Dank für Ihre Vorschläge.
Ángel Araya

1

Sie können eine Kombination zwischen Gtk.fixed (), GObject.timeout_add und der Funktion move verwenden. Hier ein Beispiel in Python:

#! / usr / bin / python *
aus gi.repository importieren Gtk, GObject

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

     def slideImage (self):
        self.positionX + = 50;
        if (self.positionX> 800):
          self.fixedWidget.move (self.logo, self.positionX, 200)
          return True        
        sonst:
          falsch zurückgeben 

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

        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 ('Klicken Sie auf mich, um das Bild zu schieben!')
        self.button1.show ()
        self.button1.connect ('geklickt', 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

Heutzutage gibt es eine echte Antwort auf diese Frage. Da es ursprünglich gefragt und beantwortet wurde, wurde der Code zum libgdAnzeigen eines Widgets - von dem ich annehme, dass GEdit ihn zu diesem Zeitpunkt verwendet hat - in GTK + als Folgendes vorgeschaltet GtkRevealer:

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

GtkRevealer unterstützt verschiedene Formen des Übergangs, einschließlich der Hauptrichtungen der Folie und einer Überblendung der Deckkraft.

Heutzutage ist es so einfach, das Widget hinzuzufügen, zu dem Sie wechseln möchten, GtkRevealerund dessen :transition-(type|duration)und :reveal-childEigenschaften zu verwenden.

Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.