How to create a sliding widget (GTK+, Quickly)
Solution 1
I have achieved a fade-out effect using pure GTK and CSS.
It is only working in GTK 3.6 and I am not sure if a slide in / out effect would be possible, however, if you want, you can look at the source at launchpad.net/uberwriter
It works through a state-change and then GTK Transitions... Maybe with height // width that would be possible, too.
EDIT
Because people obviously downvote me, here is another, more detailed explanation:
This is the CSS I have used:
GtkLabel:insensitive {
color: rgba(255,255,255,0);
transition: 500ms ease-in-out;
}
If you use this as CSS (I hope I am allowed to reference an explanation from myself, how to that: http://wolfvollprecht.de/blog/gtk-python-and-css-are-an-awesome-combo/) then you can use Gtk.StateFlags
to fade out the Label.
e.g.:
label.set_state_flags(Gtk.StateFlags.INSENSITIVE, True)
Then you get a transition to zero opacity.
However, as I have noticed, there are not many options to influence placement / width with CSS, so I guess it's limited to colors / opacity etc.
Enjoy.
PS: Note that this only works in Gtk 3.6, since Ubuntu 12.10
Solution 2
Such animation is not achievable in pure GTK+. There are no mechanisms that would process it.
I have given a quick look on gedit's source code, it's clear that they process this animation on their own. I have not looked into details, for the code related to animations is quite expanded, but I have noted that they incorporate Cairo drawing features for the animated search widget. Most likely the widget is animated by moving its position frame by frame and redrawing it on a different place in the overlay that is used on a single text display area.
That seems to be the simplest solution. (gedit's code seems to be prepared for many animations sharing the same code base, thus it may be an overkill to use it's exact approach in a simple application.)
To reproduce this effect, you will need to:
- Use a custom widget for the UI piece that you want to slide in/out.
- Make it react on draw event and periodical timeouts (to redraw each frame of animation)
- Create a transparent overlay over the rest of your widgets (or any area that has to appear as if it was below the sliding widget)
- Draw the animated widget manually on such overlay.
I can't come up with any easier solution. However, considering the fact that gedit developers do know GTK+ as probably very little do, there may be no simpler trick to achieve such effect.
Solution 3
Nowadays, there is a real answer to this question. Since it was originally asked and answered, the code for revealing a widget from libgd
- which I presume is what GEdit was using at that time - has been upstreamed into GTK+ as GtkRevealer
:
https://developer.gnome.org/gtk3/stable/GtkRevealer.html
GtkRevealer
supports various forms of transition, including the cardinal directions of slide and a fade on the opacity.
So, these days, it's as simple as adding the widget that you want to transition to a GtkRevealer
and using its :transition-(type|duration)
and :reveal-child
properties.
Solution 4
You can use a combination between Gtk.fixed(),GObject.timeout_add and the function move, here is an example in python :
#!/usr/bin/python* from gi.repository import Gtk, GObject class 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 else: return 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('Click me to slide image!') self.button1.show() self.button1.connect('clicked', 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()
Related videos on Youtube
InColorado
Updated on September 18, 2022Comments
-
InColorado over 1 year
Recently I've seen this widget in Gedit:
It appears when you press
Ctrl + F
. What I am interested is in how to get the sliding effect. Any suggestion will be appreciated.-
twister_void over 11 yearsNot Understand Sliding effect clarify what "sliding effect means "
-
InColorado over 11 years@Gaurav_Java it appears sliding from below the top panel. If you see it in Gedit you'll see it pressing 'Ctrl + F'
-
Steve Kroon over 11 yearsThe effect is often called "drop-down", I believe - sometimes menus are animated in the same way.
-
InColorado over 11 years@SteveKroon All I find is about ComboBoxes and not useful with other widgets. I think.
-
Ian B. over 11 yearsI thought maybe you could use a css transition property, but I don't see how to change positioning in css. Looking through the gedit code, they seem to use a custom viewframe to for the search box bazaar.launchpad.net/~vcs-imports/gedit/master-git/view/head:/… which they animate through some theatrics module (look at the bzr). I'm not very good at parsing C code though.
-
Ian B. over 11 yearsBTW, this widget is also in Google Chrome (and Chromium presumably)
-
Rafał Cieślak over 11 yearsGood question. @IanB. It looks to me that Google Chrome is not using GTK for this, unless not a heavily tuned GTK. I will have a look inside gedit's source code and hopefully will figure it out.
-
fnc12 about 9 yearsAccording to gtkmm docs there is a class Gtk::Revealer which does exactly what u need. Honestly I've never used it and that's why I do not post an answer. Revealer inherits Gtk::Bin so it can store a single widget. Also there is enum which configures animation type like fade in, slide up ,left etc. More here developer.gnome.org/gtkmm/stable/…
-
underscore_d over 6 years@fnc12 Yes, that was incubated in
libgd
and upstreamed to GTK+ in 2013, after this question and its answers; see my new answer.
-
-
InColorado over 11 yearsIt seems your idea it's the "simplest". I thought it could be done with some CSS hacking, but reading Gedit's code seems to be more like hardcoded and prepared for more than a simple search box entry, as you say. So, I'll try making a custom widget and, first, move it around on certain events (at least if it is possible). Thanks for your suggestions.
-
underscore_d over 6 yearsPeople probably downvoted because the question asked for a sliding animation, but you gave an opacity transition, which is totally different... so I don't know why so many other people upvoted. Anyway, nowadays there is
GtkRevealer
, which can do both; see my answer. -
shevy about 3 yearsThis is a useful answer but I think it may better for people to show how this could be done in python+GTK, ready-made. I have found many examples here to be incomplete and hard to reproduce, in particular after years passed, and no code has posted at all that has at the least once worked.