PySide で画像をフェードイン/フェードアウトする


前回の記事では、アニメーションを利用して画像をスライドさせる方法について記述しました。今回は、画像をフェードイン/フェードアウトする方法に挑戦してみます。また、複数のアニメーションをつなげる方法についてもふれます。

今回も、コードは全て Python3.3 で検証しています。

基本の画像を配置する

例によって、まず骨格を作ります。フェードインの様子が分かりやすいように、少し大きめの画像 “fuga.jpg” を背景の画像として表示させましょう。

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

次に、この背景の上に、少し小さな画像 “hoge.jpg” を表示させてみます。以下のコードを追加します。

実行すると、以下のように hoge.jpg が fuga.jpg の左上に表示されます。
bg_fg

[Code 2] の 1行目に注目して下さい。”flabel” の生成時に、”blabel” を引数として与えています。このようにすると、”flabel” は “blabel” の子として扱われます。(“blabel” は “flabel” の親) こうすることで、”flabel” は “blabel” の内部に表示されます。

不透明エフェクトを設定する

ここまでで基本部分の準備ができました。では、フェードインの実現について考えてみます。”hoge.jpg” をフェードインするには、予め “hoge.jpg” を透明にしておき、徐々に不透明にしていきます。この、「不透明」なエフェクトは、QGraphicsOpacityEffect オブジェクトで表現できます。hoge.jpg に不透明エフェクトを設定するには、以下のようにします。

QGraphicsOpacityEffect の「不透明度」の初期値は 70% です。この値は setOpacity メソッドで変更できます。50% で表示すると以下のようになります。
OpacityEffect

フェードインを実現する

この「不透明度」は “opacity” というプロパティになっていますので、QPropertyAnimation を使ってアニメーション化すればフェードインが実現できます。フェードインアニメーションを返すメソッドは、以下のように定義できます。

“target” にはアニメーション化する QGraphicsOpacityEffect を、”duration” にはアニメーションにかける時間を msec で与えます。以下のようにしてフェードイン表示できます。

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

ここで一つ注意です。アニメーションオブジェクトは、アニメーションが終わるまで破棄されないようにする必要があります。fadein() メソッドが、アニメーションオブジェクトを返すようにしてあるのはそのためです。もし fadein() が内部で start() まで実行し、アニメーションオブジェクトを返さないと、fadein() から戻った時点でアニメーションオブジェクトが破棄されてしまうためアニメーションの効果は得られません。

フェードアウトを定義する

フェードインがわかればフェードアウトは自明ですね。以下のメソッドで定義できます。アニメーションの初期値と終了値を交換するだけです。

※2013/05/29 メソッド定義部分のインデントが無かったので修正しました。

フェードイン/アウトをつなげる

では、最後にフェードインしてからフェードアウトするようにしてみます。Code 5 を以下のように書き換えます。

QAnimationGroup を使うと、複数のアニメーションをまとめて一つのアニメーションとして扱う事ができます。QSequentialAnimationGroup は QAnimationGroup の派生クラスで、複数のアニメーションを順番につなげる事ができます。上記のように、addAnimation() で追加した順番にアニメーションを実行します。addPause() は、アニメーションとアニメーションの間に一時停止状態を作ります。

なお、QParallelAnimationGroup も QAnimationGroup の派生クラスで、こちらは登録したアニメーションを同時に実行できます。スライドしながらフェードイン等が実現できます。

本記事で出てきた各クラスのリファレンスを見て、細かな設定を調整してみてください。なお、完全なコードをこちらに用意しました。

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

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

[関連記事]

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

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