Как создать скользящий виджет (GTK +, Quickly)

8

Недавно я видел этот виджет в Gedit:

введите описание изображения здесь

Появляется при нажатии Ctrl + F. Меня интересует, как получить скользящий эффект. Любое предложение будет оценено.

Анхель Арайя
источник
Не понимаю, эффект скольжения проясняет, что означает «эффект скольжения»
twister_void
@Gaurav_Java кажется скользящим снизу верхней панели. Если вы видите это в Gedit, вы увидите это нажав Ctrl + F
Ángel Araya
Я считаю, что этот эффект часто называют «выпадающим» - иногда меню анимируются одинаково.
Стив Кроон
1
Я подумал, может быть, вы могли бы использовать свойство перехода CSS, но я не вижу, как изменить позиционирование в CSS. Просматривая код gedit, они, кажется, используют собственный видовой кадр для поля поиска bazaar.launchpad.net/~vcs-imports/gedit/master-git/view/head:/…, который они анимируют с помощью некоторого театрального модуля (смотрите на бзр). Я не очень хорош в разборе кода C, хотя.
Ян Б.
1
Кстати, этот виджет также есть в Google Chrome (и, предположительно, Chromium)
Ян Б.

Ответы:

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

wolfv
источник
Люди, вероятно, голосовали против, потому что вопрос задал скользящую анимацию, но вы дали переход непрозрачности, который совершенно другой ... поэтому я не знаю, почему так много других людей проголосовали . Во всяком случае, в настоящее время есть GtkRevealer, что может сделать оба; смотри мой ответ .
underscore_d
3

Такая анимация недостижима в чистом GTK +. Нет механизмов, которые бы это обрабатывали.

Я быстро взглянул на исходный код gedit, стало ясно, что они обрабатывают эту анимацию самостоятельно. Я не стал вдаваться в подробности, поскольку код, связанный с анимацией, достаточно расширен, но я заметил, что они включают функции рисования в Каире для виджета анимированного поиска. Скорее всего, виджет анимируется, перемещая его положение кадр за кадром и перерисовывая его в другом месте наложения, которое используется в одной области отображения текста.

Это, кажется, самое простое решение. (Кажется, код gedit подготовлен для многих анимаций, использующих одну и ту же кодовую базу, поэтому использование точного подхода в простом приложении может оказаться излишним).

Чтобы воспроизвести этот эффект, вам необходимо:

  • Используйте пользовательский виджет для части пользовательского интерфейса, которую вы хотите вставить / вывести.
  • Сделайте так, чтобы он реагировал на событие рисования и периодические таймауты (чтобы перерисовать каждый кадр анимации)
  • Создайте прозрачное наложение поверх остальных виджетов (или любой области, которая должна выглядеть так, как если бы она была ниже скользящего виджета)
  • Нарисуйте анимированный виджет вручную на таком наложении.

Я не могу придумать более простого решения. Однако, учитывая тот факт, что разработчики Gedit знают GTK +, как, вероятно, очень мало, возможно, не существует более простого трюка для достижения такого эффекта.

Рафал Цеслак
источник
Кажется, твоя идея самая "простая". Я думал, что это можно сделать с помощью некоторого хакерского CSS-кода, но чтение кода Gedit кажется скорее жестко запрограммированным и подготовленным для более чем простой записи в окне поиска, как вы говорите. Итак, я постараюсь создать собственный виджет и, во-первых, переместить его на определенные события (по крайней мере, если это возможно). Спасибо за ваши предложения.
Анхель Арайя
1

Вы можете использовать комбинацию между Gtk.fixed (), GObject.timeout_add и функцией move, вот пример на python:

#! / USR / бен / питон *
из gi.repository import Gtk, GObject

Класс 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)
          верните True        
        еще:
          вернуть Ложь 

     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 («Нажмите на меня, чтобы вставить изображение!»)
        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)и :reveal-childсвойства.

underscore_d
источник