Jak utworzyć przesuwany widżet (GTK +, Szybko)


8

Ostatnio widziałem ten widget w Gedit:

wprowadź opis zdjęcia tutaj

Pojawia się po naciśnięciu Ctrl + F. Interesuje mnie, jak uzyskać efekt przesuwny. Wszelkie sugestie będą mile widziane.


Nie rozumiem Efekt przesuwny wyjaśnia, co oznacza „efekt przesuwny”
twister_void

@Gaurav_Java wydaje się przesuwać spod górnego panelu. Jeśli zobaczysz to w Gedit, zobaczysz, że naciskasz „Ctrl + F”
Ángel Araya

Wydaje mi się, że efekt ten często nazywany jest „rozwijanym” - czasami menu są animowane w ten sam sposób.
Steve Kroon,

1
Pomyślałem, że możesz użyć właściwości przejścia css, ale nie widzę, jak zmienić pozycję w css. Przeglądając kod gedit, wydają się używać niestandardowej ramki widoku dla pola wyszukiwania bazaar.launchpad.net/~vcs-imports/gedit/master-git/view/head:/…, które animują za pomocą modułu theatrics (patrz na bzr). Jednak nie jestem zbyt dobry w analizowaniu kodu C.
Ian B.,

1
BTW, ten widget jest również w Google Chrome (i prawdopodobnie Chromium)
Ian B.

Odpowiedzi:


7

Osiągnąłem efekt zanikania za pomocą czystego GTK i CSS.

Działa tylko w GTK 3.6 i nie jestem pewien, czy efekt wsunięcia / wyjazdu byłby możliwy, jednak jeśli chcesz, możesz zajrzeć do źródła na launchpad.net/uberwriter

Działa poprzez zmianę stanu, a następnie GTK Transitions ... Może przy wysokości // szerokości też byłoby to możliwe.

EDYTOWAĆ

Ponieważ ludzie oczywiście głosują za mną, oto inne, bardziej szczegółowe wyjaśnienie:

Oto CSS, którego użyłem:

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

Jeśli używasz tego jako CSS (mam nadzieję, że mogę odnieść się do samego wyjaśnienia, jak to zrobić: http://wolfvollprecht.de/blog/gtk-python-and-css-are-an-awesome-combo/ ) następnie możesz użyć Gtk.StateFlagsdo wyciszenia etykiety.

na przykład:

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

Następnie uzyskasz przejście do zerowego krycia.

Jednak, jak zauważyłem, nie ma wielu opcji wpływania na położenie / szerokość za pomocą CSS, więc myślę, że ogranicza się to do kolorów / krycia itp.

Cieszyć się.

PS: Zauważ, że działa to tylko w Gtk 3.6, ponieważ Ubuntu 12.10


Ludzie prawdopodobnie głosowali za odrzuceniem, ponieważ pytanie dotyczyło ruchomej animacji, ale daliście nieprzejrzyste przejście, które jest zupełnie inne ... więc nie wiem, dlaczego tak wielu innych ludzi głosowało za tym . Tak czy inaczej, obecnie istnieje coś GtkRevealer, co może zrobić oba; zobacz moją odpowiedź .
underscore_d

3

Takiej animacji nie da się osiągnąć w czystej wersji GTK +. Nie ma mechanizmów, które by to przetworzyły.

Rzuciłem okiem na kod źródłowy gedit, jasne jest, że przetwarzają tę animację samodzielnie. Nie analizowałem szczegółów, ponieważ kod związany z animacjami jest dość rozbudowany, ale zauważyłem, że zawierają one funkcje rysowania Kair dla animowanego widżetu wyszukiwania. Najprawdopodobniej widget jest animowany poprzez przesuwanie jego pozycji klatka po klatce i przerysowywanie go w innym miejscu nakładki używanej w jednym obszarze wyświetlania tekstu.

To wydaje się być najprostszym rozwiązaniem. (wydaje się, że kod gedit jest przygotowany na wiele animacji korzystających z tej samej bazy kodu, więc używanie jego dokładnego podejścia w prostej aplikacji może być przesadą).

Aby odtworzyć ten efekt, musisz:

  • Użyj niestandardowego widgetu dla elementu interfejsu, który chcesz wsuwać / wysuwać.
  • Niech reaguje na zdarzenie losowania i okresowe limity czasu (aby przerysować każdą klatkę animacji)
  • Utwórz przezroczystą nakładkę na pozostałe widżety (lub dowolny obszar, który musi wyglądać, jakby znajdował się poniżej przesuwanego widżetu)
  • Narysuj ręcznie animowany widget na takiej nakładce.

Nie mogę znaleźć prostszego rozwiązania. Jednak biorąc pod uwagę fakt, że programiści gedit znają GTK +, jak zapewne bardzo mało, może nie być prostszej sztuczki, aby osiągnąć taki efekt.


Wygląda na to, że Twój pomysł jest „najprostszy”. Pomyślałem, że można to zrobić za pomocą hakowania CSS, ale czytanie kodu Gedita wydaje się bardziej zakodowane i przygotowane na coś więcej niż zwykłe wpisywanie w polu wyszukiwania, jak mówisz. Spróbuję więc stworzyć niestandardowy widget i najpierw przenieść go na określone zdarzenia (przynajmniej jeśli to możliwe). Dziękuję za twoje sugestie.
Ángel Araya

1

Możesz użyć kombinacji Gtk.fixed (), GObject.timeout_add i funkcji move, oto przykład w python:

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

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

     def slideImage (self):
        pozycja własna X + = 50;
        jeśli (self.positionX> 800):
          self.fixedWidget.move (self.logo, self.positionX, 200)
          zwróć True        
        jeszcze:
          zwrócić False 

     def __init __ (self):
        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 („Kliknij mnie, aby przesunąć obraz!”)
        self.button1.show ()
        self.button1.connect („kliknięty”, self.animateImage)
        self.button1.set_size_request (75,30)
        self.fixedWidget.put (przycisk 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

Obecnie istnieje prawdziwa odpowiedź na to pytanie. Od momentu pierwotnego pytania i odpowiedzi, kod do ujawnienia widżetu, z libgdktórego - jak zakładam - korzystał wówczas GEdit - został przesłany do GTK + jako GtkRevealer:

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

GtkRevealer obsługuje różne formy przejścia, w tym kardynalne kierunki przesuwu i zanikanie krycia.

W dzisiejszych czasach jest to tak proste, jak dodanie widżetu, do którego chcesz przejść, GtkRevealeroraz użycie jego :transition-(type|duration)i :reveal-childwłaściwości.

Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.