PySide で画像をスライドさせる


PySide を使って、スライドショーでよく見られるような画像を縦・横にスライドさせて表示する方法について記述します。プロパティについてもふれます。

注)以下のコードは、Python3.3 で検証しています。

メインウインドウにラベルを配置する

まず、アプリケーションの骨格を定義しておきます。メインのウインドウの中に、画像(hoge.jpg)を表示するラベルを配置してみます。(後でスライドさせるので、あまり大きくない hoge.jpg を用意してください。)また、13行目の setGeometry は、メインウインドウの大きさです。環境に合わせて適当な値にしてください。

実行すると以下のようになります。
image

プロパティを扱う

ここで定義した “label” をスライドさせるには、アニメーションを利用します。PySide でのアニメーションは、QObject が持っている「プロパティ」を少しずつ変化させることで実現されています。

Qt における「プロパティ」は、言語に依存しないように設計されていますが、その実現は言語毎に多少異なっているようです。PySide(Python) ではメソッド(いわゆる “Setter”, “Getter”)として実現されており、リファレンス中を見ないと「プロパティ」であるかどうかわかりません。プロパティの場合、”This property holds …” のような説明になっています。「プロパティ」を調べる場合は、(PySide でなく) Qt のリファレンスを見た方が見つけやすいと思います。

アニメーションを定義する

さて、今回の目的の「スライド」は、QWidget の “pos” プロパティを変化させて実現できます。”pos” は、そのオブジェクトの左上隅の位置を保持する QPoint 型のプロパティです。

最初に、QPropertyAnimation オブジェクトを定義します。

「”label” オブジェクトの “pos” プロパティをアニメーション化します。」ということです。
あとは、アニメーションにかける時間(msec)と、開始時/終了時の “pos” の値を定義します。

そして、最後にアニメーションを開始します。

上記、QPropertyAnimation オブジェクト an の一連の定義部分を、最初のアプリケーション骨格の window.show() の後に挿入すれば完成です。完全なソースをこちらに用意しました。

次回は、画像のフェードイン/フェードアウトについて記述します。

[参考にしたサイト]
Using_Qt_Properties_in_PySide | Qt Wiki | Qt Project

[関連サイト]
junf/PySideSamples · GitHub

[関連記事]

  1. Qt で画像をスライドさせる | DeVlog – 銀の翼で翔べ –
  2. PySide で画像をフルスクリーン表示する | DeVlog – 銀の翼で翔べ –
  3. PySide で画像をフェードイン/フェードアウト | DeVlog – 銀の翼で翔べ –
  4. PySide でズームイン/ズームアウトを実現 | DeVlog – 銀の翼で翔べ –

メールアドレスが公開されることはありません。