Como criar um widget deslizante (GTK +, Rapidamente)

8

Recentemente eu vi esse widget no Gedit:

insira a descrição da imagem aqui

Aparece quando você pressiona Ctrl + F. O que me interessa é como obter o efeito deslizante. Qualquer sugestão será apreciada.

Ángel Araya
fonte
Não Entenda deslizante efeito esclarecer o que "significa efeito deslizante"
twister_void
@Gaurav_Java parece deslizar por baixo do painel superior. Se você o vir no Gedit, verá pressionando 'Ctrl + F'
Ángel Araya
O efeito costuma ser chamado de "suspenso", acredito - às vezes os menus são animados da mesma maneira.
Steve Kroon
1
Pensei que talvez você pudesse usar uma propriedade de transição css, mas não vejo como alterar o posicionamento em css. Olhando através do código gedit, eles parecem usar um viewframe personalizado para a caixa de pesquisa bazaar.launchpad.net/~vcs-imports/gedit/master-git/view/head:/…, que eles animam através de algum módulo teatral (veja no bzr). Eu não sou muito bom em analisar o código C.
Ian B
1
BTW, este widget é também no Google Chrome (e Cromo presumivelmente)
Ian B.

Respostas:

7

Consegui um efeito fade-out usando puro GTK e CSS.

Ele está funcionando apenas no GTK 3.6 e não tenho certeza se seria possível um efeito slide in / out; no entanto, se você quiser, pode procurar a fonte em launchpad.net/uberwriter

Funciona através de uma mudança de estado e, em seguida, de Transições GTK ... Talvez com height // width, também seria possível.

EDITAR

Como as pessoas obviamente me criticaram, aqui está outra explicação mais detalhada:

Este é o CSS que eu usei:

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

Se você usar isso como CSS (espero poder me referir a uma explicação de mim mesmo, como fazer isso: http://wolfvollprecht.de/blog/gtk-python-and-css-are-an-awesome-combo/ ) então você pode usar Gtk.StateFlagspara esmaecer a etiqueta.

por exemplo:

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

Então você obtém uma transição para zero opacidade.

No entanto, como observei, não há muitas opções para influenciar o posicionamento / largura com CSS, então acho que é limitado a cores / opacidade etc.

Aproveitar.

PS: Observe que isso funciona no Gtk 3.6, desde o Ubuntu 12.10

wolfv
fonte
As pessoas provavelmente votaram negativamente porque a pergunta pedia uma animação deslizante, mas você deu uma transição de opacidade, que é totalmente diferente ... então eu não sei por que tantas outras pessoas aprovaram . Enfim, hoje em dia existe GtkRevealer, o que pode fazer as duas coisas; veja minha resposta .
Underscore_d
3

Essa animação não é possível em GTK + puro. Não há mecanismos que o processariam.

Dei uma rápida olhada no código fonte do gedit, é claro que eles processam essa animação por conta própria. Não examinei os detalhes, pois o código relacionado às animações é bastante expandido, mas notei que elas incorporam recursos de desenho do Cairo para o widget de pesquisa animado. Provavelmente, o widget é animado movendo sua posição quadro a quadro e redesenhando-o em um local diferente na sobreposição usada em uma única área de exibição de texto.

Essa parece ser a solução mais simples. (o código do gedit parece estar preparado para muitas animações que compartilham a mesma base de código, portanto, pode ser um exagero usar sua abordagem exata em um aplicativo simples.)

Para reproduzir esse efeito, você precisará:

  • Use um widget personalizado para a parte da interface do usuário que deseja deslizar para dentro / para fora.
  • Faça reagir a eventos de desenho e tempos limite periódicos (para redesenhar cada quadro da animação)
  • Crie uma sobreposição transparente sobre o restante dos seus widgets (ou qualquer área que precise aparecer como se estivesse abaixo do widget deslizante)
  • Desenhe o widget animado manualmente nessa sobreposição.

Não consigo encontrar uma solução mais fácil. No entanto, considerando o fato de que os desenvolvedores do gedit conhecem o GTK + como provavelmente muito pouco, talvez não haja um truque mais simples para obter esse efeito.

Rafał Cieślak
fonte
Parece que a sua ideia é a "mais simples". Eu pensei que isso poderia ser feito com alguns hackers CSS, mas a leitura do código do Gedit parece ser mais codificada e preparada para mais do que uma simples entrada da caixa de pesquisa, como você diz. Portanto, tentarei criar um widget personalizado e, primeiro, movê-lo em determinados eventos (pelo menos se for possível). Obrigado por suas sugestões.
Ángel Araya
1

Você pode usar uma combinação entre Gtk.fixed (), GObject.timeout_add e a função move, aqui está um exemplo em python:

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

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

     def slideImage (auto):
        self.positionX + = 50;
        if (self.positionX> 800):
          self.fixedWidget.move (self.logo, self.positionX, 200)
          return True        
        outro:
          retorna falso 

     def __init __ (próprio):
        Gtk.Window .__ init __ (self, title = 'Registro')

        self.positionX = 500
        self.fixedWidget = Gtk.Fixed ()
        self.fixedWidget.set_size_request (1920.1080)
        self.fixedWidget.show ()

        self.logo = Gtk.Image.new_from_file ('imagem.png')
        self.logo.show ()
        self.fixedWidget.put (self.logo, self.positionX, 200)

        self.button1 = Gtk.Button ('Clique em mim para deslizar a imagem!')
        self.button1.show ()
        self.button1.connect ('clicado', 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 ()
Brahim Ayari
fonte
1

Atualmente, há uma resposta real para essa pergunta. Desde que foi originalmente perguntado e respondido, o código para revelar um widget libgd- do qual presumo que o GEdit estava usando naquele momento - foi introduzido no GTK + como GtkRevealer:

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

GtkRevealer suporta várias formas de transição, incluindo as direções principais do slide e um desbotamento da opacidade.

Portanto, atualmente, é tão simples quanto adicionar o widget para o qual você deseja fazer a transição GtkRevealere usar suas propriedades :transition-(type|duration)e :reveal-child.

underscore_d
fonte