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.
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.
Because people obviously downvote me, here is another, more detailed explanation:
This is the CSS I have used:
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
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.
PS: Note that this only works in Gtk 3.6, since Ubuntu 12.10
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:
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.
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()