スライドウィジェットを作成する方法(GTK +、すばやく)


8

最近、私はこのウィジェットをGeditで見ました:

ここに画像の説明を入力してください

を押すと表示されますCtrl + F。私が興味を持っているのは、スライド効果を得るための方法です。任意の提案をいただければ幸いです。


スライディングエフェクトが理解できないことで、「スライディングエフェクトの意味」が明確になります
twister_void

@Gaurav_Java上部パネルの下からスライドして表示されます。あなたがGeditの中でそれを見た場合、あなたはそれが「Ctrlキー+ F」を押して表示されます
アンヘル・アラヤ

この効果は、しばしば「ドロップダウン」と呼ばれていると思います。メニューが同じようにアニメーション化されることもあります。
Steve Kroon、

1
CSS遷移プロパティを使用できると思いましたが、CSSで位置を変更する方法がわかりません。geditコードを見ると、彼らはカスタムビューフレームを使用して検索ボックスbazaar.launchpad.net/~vcs-imports/gedit/master-git/view/head:/…をいくつかの演劇モジュール( bzrで)。ただし、Cコードの解析はあまり得意ではありません。
Ian B.

1
ところで、このウィジェットは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:これはUbuntu 12.10以降、Gtk 3.6でのみ機能することに注意してください。


質問はスライディングアニメーションを求めていたため、おそらく反対票を投じましたが、不透明度の変化を与えましたが、それはまったく異なります...だから、他の多くの人々がなぜ反対票を投じたのかわかりません。とにかく、今日GtkRevealerは両方ができるがあります。私の答えをください。
underscore_d

3

このようなアニメーションは、純粋なGTK +では実現できません。それを処理するメカニズムはありません。

geditのソースコードをざっと見てみましたが、彼らがこのアニメーションを自分で処理していることは明らかです。アニメーションに関連するコードは非常に拡張されているため、詳細については調べていませんが、アニメーション検索ウィジェット用のCairo描画機能が組み込まれていることに注意しました。ほとんどの場合、ウィジェットはフレームごとに位置を移動し、単一のテキスト表示領域で使用されるオーバーレイの別の場所にウィジェットを再描画することによってアニメーション化されます。

それが最も簡単な解決策のようです。(geditのコードは、同じコードベースを共有する多くのアニメーション用に準備されているようです。そのため、単純なアプリケーションで正確なアプローチを使用するのはやり過ぎかもしれません。)

この効果を再現するには、次のことを行う必要があります。

  • スライドイン/スライドアウトするUIピースのカスタムウィジェットを使用します。
  • 描画イベントと定期的なタイムアウトに反応させる(アニメーションの各フレームを再描画するため)
  • 残りのウィジェット(またはスライドウィジェットの下にあるかのように表示する必要がある任意の領域)の上に透明なオーバーレイを作成します。
  • そのようなオーバーレイ上に手動でアニメーションウィジェットを描画します。

簡単な解決策は思いつきません。ただし、gedit開発者がGTK +を知っているのはおそらくごくわずかであるという事実を考慮すると、そのような効果を達成するためのより簡単なトリックはないかもしれません。


それはあなたの考えが「最も単純」だと思われます。CSSハッキングを使用してそれを実行できると思ったが、Geditのコードを読み取ることは、ハードコーディングされており、単純な検索ボックスエントリ以上のものを準備しているようです。それで、私はカスタムウィジェットを作ってみて、最初に、特定のイベントでそれを動かします(少なくとも可能であれば)。あなたの提案をありがとう。
アンヘル・アラヤ

1

Gtk.fixed()、GObject.timeout_addと関数moveの組み合わせを使用できます。これはpythonの例です。

#!/ usr / bin / python *
gi.repositoryからインポート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を返す        
        そうしないと:
          Falseを返す 

     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プロパティを使用するだけの簡単さです。

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.