Cara membuat widget geser (GTK +, Cepat)

8

Baru-baru ini saya melihat widget ini di Gedit:

masukkan deskripsi gambar di sini

Itu muncul ketika Anda menekan Ctrl + F. Yang saya tertarik adalah bagaimana mendapatkan efek geser. Setiap saran akan dihargai.

Ángel Araya
sumber
Tidak Memahami Efek geser memperjelas apa "efek geser artinya"
twister_void
@Gaurav_Java tampaknya meluncur dari bawah panel atas. Jika Anda melihatnya di Gedit Anda akan melihatnya menekan 'Ctrl + F'
Ángel Araya
Efeknya sering disebut "drop-down", saya percaya - kadang-kadang menu dianimasikan dengan cara yang sama.
Steve Kroon
1
Saya pikir mungkin Anda bisa menggunakan properti transisi css, tapi saya tidak melihat cara mengubah posisi di css. Melihat melalui kode gedit, mereka tampaknya menggunakan viewframe khusus untuk untuk kotak pencarian bazaar.launchpad.net/~vcs-import/gedit/master-git/view/head:/... yang mereka hidupkan melalui beberapa modul teater (lihat di bzr). Saya tidak pandai mengurai kode C sekalipun.
Ian B.
1
BTW, widget ini juga ada di Google Chrome (dan mungkin Chromium)
Ian B.

Jawaban:

7

Saya telah mencapai efek fade-out menggunakan GTK dan CSS murni .

Ini hanya bekerja di GTK 3.6 dan saya tidak yakin apakah efek geser masuk / keluar mungkin terjadi, namun, jika Anda mau, Anda dapat melihat sumbernya di launchpad.net/uberwriter

Ia bekerja melalui perubahan status dan kemudian Transisi GTK ... Mungkin dengan tinggi // lebar itu juga mungkin.

EDIT

Karena orang-orang jelas-jelas mengecewakan saya, berikut ini penjelasan lain yang lebih terperinci:

Ini adalah CSS yang saya gunakan:

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

Jika Anda menggunakan ini sebagai CSS (saya harap saya diizinkan untuk merujuk penjelasan dari diri saya sendiri, caranya: http://wolfvollprecht.de/blog/gtk-python-and-css-are-an-awesome-combo/ ) maka Anda dapat menggunakannya Gtk.StateFlagsuntuk menghilangkan Label.

misalnya:

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

Kemudian Anda mendapatkan transisi ke opacity nol.

Namun, seperti yang saya perhatikan, tidak ada banyak pilihan untuk mempengaruhi penempatan / lebar dengan CSS, jadi saya kira itu terbatas pada warna / opacity dll.

Nikmati.

PS: Perhatikan bahwa ini hanya berfungsi di Gtk 3.6, sejak Ubuntu 12.10

serigala
sumber
Orang-orang mungkin downvoted karena pertanyaannya meminta animasi geser, tetapi Anda memberikan transisi opacity, yang sama sekali berbeda ... jadi saya tidak tahu mengapa begitu banyak orang yang terunggah . Bagaimanapun, saat ini ada GtkRevealer, yang dapat melakukan keduanya; lihat jawaban saya .
underscore_d
3

Animasi semacam itu tidak dapat dicapai di GTK + murni. Tidak ada mekanisme yang akan memprosesnya.

Saya telah melihat sekilas kode sumber gedit, jelas bahwa mereka memproses animasi ini sendiri. Saya belum melihat detailnya, karena kode yang terkait dengan animasi cukup diperluas, tetapi saya perhatikan bahwa mereka memasukkan fitur menggambar Kairo untuk widget pencarian animasi. Kemungkinan besar widget dianimasikan dengan menggerakkan posisinya bingkai demi bingkai dan menggambarnya kembali di tempat berbeda dalam hamparan yang digunakan pada area tampilan teks tunggal.

Itu tampaknya menjadi solusi paling sederhana. (Kode gedit tampaknya dipersiapkan untuk banyak animasi yang berbagi basis kode yang sama, sehingga mungkin merupakan kerja keras untuk menggunakan pendekatan yang tepat dalam aplikasi sederhana.)

Untuk mereproduksi efek ini, Anda harus:

  • Gunakan widget khusus untuk bagian UI yang ingin Anda geser masuk / keluar.
  • Buat reaksi pada acara menggambar dan batas waktu berkala (untuk menggambar ulang setiap bingkai animasi)
  • Buat overlay transparan di atas sisa widget Anda (atau area apa pun yang harus ditampilkan seolah-olah berada di bawah widget geser)
  • Gambar widget animasi secara manual pada hamparan seperti itu.

Saya tidak dapat menemukan solusi yang lebih mudah. Namun, mengingat fakta bahwa pengembang gedit tahu GTK + mungkin sangat sedikit, mungkin tidak ada trik sederhana untuk mencapai efek seperti itu.

Rafał Cieślak
sumber
Sepertinya ide Anda itu "paling sederhana". Saya pikir itu bisa dilakukan dengan beberapa peretasan CSS, tetapi membaca kode Gedit tampaknya lebih seperti hardcoded dan dipersiapkan untuk lebih dari entri kotak pencarian sederhana, seperti yang Anda katakan. Jadi, saya akan mencoba membuat widget khusus dan, pertama, memindahkannya ke acara tertentu (setidaknya jika memungkinkan). Terima kasih atas saran Anda.
Ángel Araya
1

Anda dapat menggunakan kombinasi antara Gtk.fixed (), GObject.timeout_add dan pemindahan fungsi, berikut adalah contoh dalam python:

#! / usr / bin / python *
dari gi.repositori, impor Gtk, GObject

kelas 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)
          mengembalikan True        
        lain:
          mengembalikan False 

     def __init __ (mandiri):
        Gtk.Window .__ init __ (diri, judul = 'Pendaftaran')

        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 ('Klik saya untuk menggeser gambar!')
        self.button1.show ()
        self.button1.connect ('diklik', 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
sumber
1

Saat ini, ada jawaban nyata untuk pertanyaan ini. Sejak awalnya ditanyakan dan dijawab, kode untuk membuka widget dari libgd- yang saya duga adalah apa yang digunakan GEdit pada saat itu - telah di-upstream ke GTK + sebagai GtkRevealer:

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

GtkRevealer mendukung berbagai bentuk transisi, termasuk arah mata angin slide dan fade pada opacity.

Jadi, hari ini, sesederhana menambahkan widget yang ingin Anda transisikan ke GtkRevealerdan menggunakan properti :transition-(type|duration)dan :reveal-child.

underscore_d
sumber