8

เมื่อเร็ว ๆ นี้ฉันเคยเห็นวิดเจ็ตนี้ใน Gedit:

ป้อนคำอธิบายรูปภาพที่นี่

Ctrl + Fมันจะปรากฏขึ้นเมื่อคุณกด สิ่งที่ฉันสนใจคือการหาเอฟเฟ็กต์การเลื่อน ข้อเสนอแนะใด ๆ จะได้รับการชื่นชม

— Ángel Araya
แหล่งที่มา

ไม่เข้าใจเอฟเฟกต์การเลื่อนให้ความกระจ่างว่า "เอฟเฟกต์การเลื่อนหมายถึง"

— twister_void

@Gaurav_Java ดูเหมือนว่าเลื่อนจากด้านล่างของแผงด้านบน หากคุณเห็นมันใน Gedit คุณจะเห็นมันกด 'Ctrl + F'

— Ángel Araya

เอฟเฟกต์นี้มักเรียกว่า "ดรอปดาวน์" ฉันเชื่อว่าบางครั้งเมนูเคลื่อนไหวในลักษณะเดียวกัน

— Steve Kroon

1

ฉันคิดว่าบางทีคุณสามารถใช้คุณสมบัติการเปลี่ยน CSS ได้ แต่ฉันไม่เห็นวิธีการเปลี่ยนการวางตำแหน่งใน CSS เมื่อมองดูรหัส gedit พวกเขาดูเหมือนจะใช้ viewframe ที่กำหนดเองสำหรับช่องค้นหาbazaar.launchpad.net/~vcs-imports/gedit/master-git/view/head:/ซึ่งทำให้พวกเขาเคลื่อนไหวผ่านโมดูล theatrics บางตัว (ดู ที่ bzr) ฉันไม่ค่อยเก่งในการแยกวิเคราะห์รหัส C

— เอียนบี

1

BTW วิดเจ็ตนี้ยังอยู่ใน Google Chrome (และ Chromium น่าจะเป็นไปได้)

— Ian B.

7

ฉันได้รับเอฟเฟกต์จางหายไปโดยใช้GTK และ CSS ที่บริสุทธิ์

มันใช้งานได้กับ GTK 3.6 เท่านั้นและฉันไม่แน่ใจว่าจะมีเอฟเฟกต์สไลด์เข้า / ออกอย่างไรก็ตามถ้าคุณต้องการคุณสามารถดูซอร์สได้ที่ launchpad.net/uberwriter

มันทำงานผ่านการเปลี่ยนสถานะแล้วเปลี่ยน GTK ... อาจมีความสูง // ความกว้างที่อาจเป็นไปได้เช่นกัน

แก้ไข

เนื่องจากผู้คนลงคะแนนให้ฉันอย่างชัดเจนนี่เป็นอีกคำอธิบายที่ละเอียดมากขึ้น:

นี่คือ 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
แหล่งที่มา

คนอาจจะ downvoted เพราะคำถามที่ถามหาภาพเคลื่อนไหวเลื่อน แต่คุณให้เปลี่ยนแปลงความทึบแสงซึ่งจะแตกต่างกันโดยสิ้นเชิง ... ดังนั้นผมไม่ทราบว่าทำไมคนอื่น ๆ อีกมากมายupvoted อย่างไรก็ตามทุกวันนี้มีอยู่GtkRevealerซึ่งสามารถทำได้ทั้งสองอย่าง ดูคำตอบของฉัน

— underscore_d

3

ภาพเคลื่อนไหวดังกล่าวไม่สามารถทำได้ใน pure GTK + ไม่มีกลไกที่จะดำเนินการ

ฉันได้ดูอย่างรวดเร็วเกี่ยวกับซอร์สโค้ดของ gedit เป็นที่ชัดเจนว่าพวกเขาประมวลผลภาพเคลื่อนไหวนี้ด้วยตัวเอง ฉันไม่ได้ดูรายละเอียดเพราะรหัสที่เกี่ยวข้องกับภาพเคลื่อนไหวค่อนข้างขยาย แต่ฉันสังเกตว่าพวกเขารวมคุณสมบัติการวาดภาพของไคโรไว้สำหรับวิดเจ็ตการค้นหาภาพเคลื่อนไหว วิดเจ็ตส่วนใหญ่มีการเคลื่อนไหวโดยการเลื่อนเฟรมตำแหน่งโดยเฟรมและวาดใหม่ในตำแหน่งอื่นในการซ้อนทับที่ใช้ในพื้นที่แสดงข้อความเดียว

นั่นดูเหมือนจะเป็นทางออกที่ง่ายที่สุด (ดูเหมือนว่าโค้ดของ gedit นั้นจะถูกเตรียมไว้สำหรับแอนิเมชั่นจำนวนมากที่แชร์ฐานรหัสเดียวกันดังนั้นจึงอาจใช้เกินวิธีที่จะใช้ในการสมัครง่ายๆ)

ในการทำซ้ำเอฟเฟกต์นี้คุณจะต้อง:

ใช้วิดเจ็ตที่กำหนดเองสำหรับชิ้นส่วน UI ที่คุณต้องการเลื่อนเข้า / ออก
ทำให้ตอบสนองเหตุการณ์การดึงและการหมดเวลาเป็นระยะ (เพื่อวาดใหม่ทุกเฟรมของภาพเคลื่อนไหว)
สร้างการซ้อนทับแบบโปร่งใสบนวิดเจ็ตที่เหลือของคุณ (หรือพื้นที่ใด ๆ ที่ต้องปรากฏราวกับว่าอยู่ใต้วิดเจ็ตเลื่อน)
วาดวิดเจ็ตภาพเคลื่อนไหวด้วยตนเองบนภาพซ้อนทับดังกล่าว

ฉันไม่สามารถหาวิธีแก้ปัญหาที่ง่ายกว่านี้ได้อีก อย่างไรก็ตามเมื่อพิจารณาจากข้อเท็จจริงที่ว่าผู้พัฒนา gedit รู้ว่า GTK + อาจทำอะไรได้น้อยมาก

— RafałCieślak
แหล่งที่มา

ดูเหมือนความคิดของคุณคือ "ง่ายที่สุด" ฉันคิดว่ามันสามารถทำได้ด้วยการแฮ็ค CSS แต่การอ่านโค้ดของ Gedit ดูเหมือนจะเป็นรหัสที่ยากกว่าและถูกเตรียมไว้มากกว่ารายการช่องค้นหาแบบง่ายอย่างที่คุณพูด ดังนั้นฉันจะลองสร้างวิดเจ็ตที่กำหนดเองก่อนอื่นให้ย้ายไปรอบ ๆ ในบางเหตุการณ์ (อย่างน้อยถ้าเป็นไปได้) ขอบคุณสำหรับคำแนะนำของคุณ

— Ángel Araya

1

คุณสามารถใช้การรวมกันระหว่าง Gtk.fixed (), GObject.timeout_add และการย้ายฟังก์ชั่นนี่คือตัวอย่างในไพ ธ อน:

#! / usr / bin / หลาม *
จาก gi.repository นำเข้า Gtk, GObject

คลาส TestWindow (Gtk.Window):
     def animateImage (ตัวเอง):
        GObject.timeout_add (150, self.slideImage)

     def slideImage (ตัวเอง):
        self.positionX + = 50;
        ถ้า (self.positionX> 800):
          self.fixedWidget.move (self.logo, self.positionX 200)
          กลับ True        
        อื่น:
          กลับเท็จ 

     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 ('คลิก', 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
แหล่งที่มา

1

ทุกวันนี้มีคำตอบที่แท้จริงสำหรับคำถามนี้ เนื่องจากมันถูกถามและตอบรับมาแล้วรหัสสำหรับการเปิดเผยวิดเจ็ตlibgdซึ่งฉันคิดว่าเป็นสิ่งที่ GEdit ใช้ในเวลานั้นได้ถูกอัปเกรดเป็น GTK + เป็นGtkRevealer:

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

GtkRevealer รองรับการเปลี่ยนแปลงในรูปแบบต่าง ๆ รวมถึงทิศทางที่สำคัญของสไลด์และจางลงบนความทึบ

ดังนั้นวันนี้มันเป็นเรื่องง่ายเหมือนการเพิ่มวิดเจ็ตที่คุณต้องการเปลี่ยนเป็นGtkRevealerและใช้:transition-(type|duration)และ:reveal-childคุณสมบัติ

— underscore_d
แหล่งที่มา

วิธีสร้างวิดเจ็ตแบบเลื่อน (GTK +, อย่างรวดเร็ว)

แก้ไข