如何创建滑动小部件(GTK +,快速)


8

最近,我在Gedit中看到了此小部件:

在此处输入图片说明

按时出现Ctrl + F。我感兴趣的是如何获得滑动效果。任何建议将不胜感激。


不了解滑动效果阐明了“滑动效果的含义”
twister_void 2012年

@Gaurav_Java,它似乎从顶部面板下方滑动。如果您Gedit的看到它,你会看到它按“Ctrl + F键”
安赫尔阿拉亚

我相信这种效果通常称为“下拉菜单”-有时菜单以相同的方式进行动画处理。
史蒂夫·克朗

1
我以为您可以使用CSS过渡属性,但我看不到如何更改CSS的位置。浏览gedit代码时,他们似乎使用自定义视框来搜索框bazaar.launchpad.net/~vcs-imports/gedit/master-git/view/head:/…,并通过一些戏剧模块对其进行动画处理(看一下在bzr)。我不是很擅长解析C代码。
伊恩·B。

1
顺便说一句,这个widget也是谷歌浏览器(和铬大概)
伊恩B.

Answers:


7

我已经使用 GTK和CSS 实现了淡出效果。

它仅在GTK 3.6中有效,我不确定是否可以实现滑入/滑出效果,但是,如果需要,可以在launchpad.net/uberwriter中查看源代码。

它先通过状态更改,然后通过GTK Transitions进行工作……也许也可以使用高度//宽度。

编辑

因为人们显然对我投了反对票,这是另一个更详细的解释:

这是我使用的CSS:

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

如果您将其用作CSS(希望我自己引用一个解释,如何使用它:http : //wolfvollprecht.de/blog/gtk-python-and-css-are-an-awesome-combo/)然后您可以使用Gtk.StateFlags淡入标签。

例如:

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

然后,您将过渡到零不透明度。

但是,正如我已经注意到的那样,没有太多选项可以影响CSS的放置/宽度,因此我认为它仅限于颜色/不透明度等。

请享用。

PS:请注意,这适用于Gtk 3.6,因为Ubuntu 12.10


人们可能投票否决,是因为该问题要求使用滑动动画,但是您进行了不透明转换,这是完全不一样的...所以我不知道为什么有这么多人投票赞成。无论如何,如今有GtkRevealer,两者都可以做到;看我的答案
underscore_d

3

在纯GTK +中无法实现这种动画。没有任何机制可以处理它。

我快速浏览了gedit的源代码,很明显,他们是自己处理动画的。我没有研究细节,因为与动画有关的代码已得到扩展,但是我注意到它们为动画搜索小部件合并了Cairo绘图功能。最有可能的是,通过逐帧移动其位置并将其重新绘制在用于单个文本显示区域的叠加层中的其他位置上,可以使小部件具有动画效果。

这似乎是最简单的解决方案。(gedit的代码似乎是为许多共享相同代码库的动画准备的,因此,在简单的应用程序中使用它的确切方法可能是过大的选择。)

要重现此效果,您将需要:

  • 对要滑入/滑出的UI使用自定义小部件。
  • 使它对绘制事件和定期超时做出反应(重新绘制动画的每一帧)
  • 在其余小部件(或任何看起来好像在滑动小部件下方的区域)上创建透明的覆盖图
  • 在此类叠加层上手动绘制动画小部件。

我无法提出任何更简单的解决方案。但是,考虑到gedit开发人员确实很少了解GTK +的事实,可能没有更简单的技巧可以达到这种效果。


您的想法似乎是“最简单的”。我以为可以通过一些CSS黑客来做到这一点,但是正如您所说的那样,阅读Gedit的代码似乎更像是经过硬编码并为更多的准备工作而不是简单的搜索框条目。因此,我将尝试制作一个自定义窗口小部件,首先,在某些事件上移动它(至少在可能的情况下)。感谢您的建议。
安赫尔阿拉亚

1

您可以在Gtk.fixed(),GObject.timeout_add和move函数之间结合使用,这是python中的示例:

#!/ usr / bin / python *
从gi.repository导入Gtk,GObject

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

     def slideImage():
        self.positionX + = 50;
        if(self.positionX> 800):
          self.fixedWidget.move(self.logo,self.positionX,200)
          返回True        
        其他:
          返回False 

     def __init __():
        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('单击我以滑动图像!')
        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()

1

如今,这个问题确实存在。自从最初被询问和回答以来,用于显示窗口小部件的代码(libgd我认为是GEdit当时所使用的代码)已作为GTK +的上游GtkRevealer

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

GtkRevealer 支持各种形式的过渡,包括滑动的基本方向和不透明度的淡入淡出。

因此,如今,这就像添加要转换为的小部件GtkRevealer并使用其:transition-(type|duration)and :reveal-child属性一样简单。

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.