Cách tạo tiện ích trượt (GTK +, Nhanh chóng)


8

Gần đây tôi đã thấy tiện ích này trong Gedit:

nhập mô tả hình ảnh ở đây

Nó xuất hiện khi bạn nhấn Ctrl + F. Điều tôi quan tâm là làm thế nào để có được hiệu ứng trượt. Bất kỳ đề nghị sẽ được đánh giá cao.


Không hiểu hiệu ứng trượt Làm rõ "hiệu ứng trượt" nghĩa là gì
twister_void

@Gaurav_Java nó xuất hiện trượt từ bên dưới bảng trên cùng. Nếu bạn thấy nó trong Gedit, bạn sẽ thấy nó nhấn 'Ctrl + F'
Ángel Araya

Hiệu ứng thường được gọi là "thả xuống", tôi tin rằng - đôi khi các menu được hoạt hình theo cùng một cách.
Steve Kroon

1
Tôi nghĩ có lẽ bạn có thể sử dụng thuộc tính chuyển tiếp css, nhưng tôi không thấy cách thay đổi định vị trong css. Nhìn qua mã gedit, họ dường như sử dụng một khung nhìn tùy chỉnh cho hộp tìm kiếm bazaar.launchpad.net/~vcs-imports/gedit/master-git/view/head:/ trộm mà họ tạo hiệu ứng thông qua một số mô-đun sân khấu (nhìn tại bzr). Tôi không giỏi phân tích mã C mặc dù.
Ian B.

1
BTW, tiện ích này cũng có trong Google Chrome (và có lẽ là Chromium)
Ian B.

Câu trả lời:


7

Tôi đã đạt được hiệu ứng mờ dần bằng cách sử dụng GTK và CSS thuần túy .

Nó chỉ hoạt động trong GTK 3.6 và tôi không chắc liệu hiệu ứng trượt vào / ra có khả thi hay không, tuy nhiên, nếu bạn muốn, bạn có thể xem nguồn tại launchpad.net/uberwriter

Nó hoạt động thông qua thay đổi trạng thái và sau đó là Chuyển đổi GTK ... Có thể với chiều cao // chiều rộng cũng có thể.

BIÊN TẬP

Bởi vì mọi người rõ ràng đánh giá thấp tôi, đây là một lời giải thích chi tiết hơn:

Đây là CSS tôi đã sử dụng:

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

Nếu bạn sử dụng điều này như CSS (Tôi hy vọng tôi được phép tham khảo một lời giải thích từ chính mình, thì làm thế nào: http://wolfvollprecht.de/blog/gtk-python-and-css-are-an-awemme-combo/ ) sau đó bạn có thể sử dụng Gtk.StateFlagsđể làm mờ nhãn.

ví dụ:

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

Sau đó, bạn nhận được một sự chuyển đổi sang độ mờ đục bằng không.

Tuy nhiên, như tôi đã nhận thấy, không có nhiều tùy chọn để ảnh hưởng đến vị trí / chiều rộng bằng CSS, vì vậy tôi đoán nó bị giới hạn về màu sắc / độ mờ đục, v.v.

Thưởng thức.

PS: Lưu ý rằng điều này chỉ hoạt động trong Gtk 3.6, kể từ Ubuntu 12.10


Mọi người có thể đánh giá thấp vì câu hỏi yêu cầu hoạt hình trượt, nhưng bạn đã thực hiện chuyển đổi độ mờ, điều này hoàn toàn khác ... vì vậy tôi không biết tại sao rất nhiều người khác bị từ chối . Dù sao, ngày nay có GtkRevealer, có thể làm cả hai; thấy câu trả lời của tôi .
gạch dưới

3

Hoạt hình như vậy là không thể đạt được trong GTK + thuần túy. Không có cơ chế sẽ xử lý nó.

Tôi đã xem nhanh mã nguồn của gedit, rõ ràng là họ tự xử lý hoạt hình này. Tôi chưa xem xét chi tiết, vì mã liên quan đến hoạt hình khá mở rộng, nhưng tôi đã lưu ý rằng chúng kết hợp các tính năng vẽ Cairo cho tiện ích tìm kiếm hoạt hình. Nhiều khả năng widget được hoạt hình bằng cách di chuyển khung vị trí của nó theo khung và vẽ lại nó ở một vị trí khác trong lớp phủ được sử dụng trên một vùng hiển thị văn bản.

Đó dường như là giải pháp đơn giản nhất. (mã của gedit dường như được chuẩn bị cho nhiều hình ảnh động có chung cơ sở mã, do đó có thể là quá mức cần thiết để sử dụng phương pháp chính xác của nó trong một ứng dụng đơn giản.)

Để tái tạo hiệu ứng này, bạn sẽ cần:

  • Sử dụng một tiện ích tùy chỉnh cho phần UI mà bạn muốn trượt vào / ra.
  • Làm cho nó phản ứng khi vẽ sự kiện và thời gian chờ định kỳ (để vẽ lại từng khung hình động)
  • Tạo lớp phủ trong suốt trên phần còn lại của các tiện ích của bạn (hoặc bất kỳ khu vực nào phải xuất hiện như thể nó nằm dưới tiện ích trượt)
  • Vẽ widget hoạt hình bằng tay trên lớp phủ như vậy.

Tôi không thể đưa ra bất kỳ giải pháp dễ dàng hơn. Tuy nhiên, xem xét thực tế rằng các nhà phát triển gedit biết GTK + vì có lẽ rất ít làm, có thể không có mẹo đơn giản nào để đạt được hiệu quả như vậy.


Có vẻ như ý tưởng của bạn là "đơn giản nhất". Tôi nghĩ rằng nó có thể được thực hiện với một số hack CSS, nhưng đọc mã của Gedit dường như giống như được mã hóa cứng và chuẩn bị cho nhiều hơn một mục nhập hộp tìm kiếm đơn giản, như bạn nói. Vì vậy, tôi sẽ thử tạo một widget tùy chỉnh và trước tiên, di chuyển nó xung quanh vào một số sự kiện nhất định (ít nhất là nếu có thể). Cảm ơn lời đề nghị của bạn.
Ángel Araya

1

Bạn có thể sử dụng kết hợp giữa Gtk.fixed (), GObject.timeout_add và chức năng di chuyển, đây là một ví dụ trong python:

#! / usr / bin / trăn *
từ gi.reposeective nhập Gtk, GObject

lớp TestWindow (Gtk.Window):
     def animateImage (tự):
        GObject.timeout_add (150, self.slideImage)

     def slideImage (tự):
        tự.poseitionX + = 50;
        if (self.poseitionX> 800):
          self.fixedWidget.move (self.logo, self.poseitionX, 200)
          trả lại đúng        
        khác:
          trả về sai 

     def __init __ (tự):
        Gtk.Window .__ init __ (tự, tiêu đề = 'Đăng ký')

        tự.poseitionX = 500
        self.fixedWidget = Gtk.Fixed ()
        self.fixedWidget.set_size_Vquest (1920,1080)
        self.fixedWidget.show ()

        self.logo = Gtk.Image.new_from_file ('hình ảnh.png')
        tự.logo.show ()
        self.fixedWidget.put (self.logo, self.poseitionX, 200)

        self.button1 = Gtk.Button ('Nhấp vào tôi để trượt hình ảnh!')
        tự.button1.show ()
        self.button1.connect ('đã nhấp', self.animateImage)
        self.button1.set_size_Vquest (75,30)
        self.fixedWidget.put (self.button1,750,750)
        self.add (self.fixedWidget)

testWindow = TestWindow ()
testWindow.set_size_Vquest (1920,1080)
testWindow.set_name ('testWindow')
testWindow.show ()

Gtk.main ()

1

Ngày nay, có một câu trả lời thực sự cho câu hỏi này. Vì ban đầu nó được hỏi và trả lời, mã để tiết lộ một widget từ libgd- mà tôi đoán là GEdit đang sử dụng vào thời điểm đó - đã được đưa vào GTK + như GtkRevealersau:

https://developer.gnome.org/gtk3/ sóng / GtkRevealer.html

GtkRevealer hỗ trợ các hình thức chuyển tiếp khác nhau, bao gồm các hướng trượt chính và độ mờ dần về độ mờ.

Vì vậy, ngày nay, đơn giản như việc thêm tiện ích mà bạn muốn chuyển sang GtkRevealervà sử dụng các thuộc tính :transition-(type|duration)và tiện ích của nó :reveal-child.

Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.