GraphicsViewでQColorをアニメーションさせる¶
タイトルの通り。
GraphicsViewのアイテムの色などをアニメーションさせるやり方を
調べてみました。
コード¶
#!python3
# -*- coding: utf-8 -*-
import sys
from PySide2 import QtCore, QtWidgets, QtGui
class testWindow(QtWidgets.QMainWindow):
def __init__(self, parent=None):
super(testWindow, self).__init__(parent)
self.scene = Scene(QtCore.QRect(0, 0, 640, 480))
self.scene.addRect(0, 0, 640, 480, QtGui.QPen(QtCore.Qt.black), QtGui.QBrush(QtCore.Qt.white))
self.view = QtWidgets.QGraphicsView(self.scene)
self.view.setBackgroundBrush(QtGui.QBrush(QtCore.Qt.gray))
# itemを配置
self.item = TestItem(QtCore.QRect(270, 190, 100, 100))
self.scene.addItem(self.item)
self.setCentralWidget(self.view)
self.setGeometry(100, 100, 700, 500)
class Scene(QtWidgets.QGraphicsScene):
mouse_pos = None
sel_item = None
def __init__(self, *args, **kwargs):
super(Scene, self).__init__(*args, **kwargs)
class TestItem(QtWidgets.QGraphicsObject):
rect = None
def __init__(self, rect, parent=None):
super(TestItem, self).__init__(parent)
self.__rect = rect
self.setProperty('color', QtGui.QColor('red'))
self.animStopped = False
self.ani = QtCore.QPropertyAnimation(self, b'color')
self.ani.setDuration(1000)
self.ani.setStartValue(QtGui.QColor('white'))
self.ani.setEndValue(QtGui.QColor('blue'))
# ずっとループする
self.ani.finished.connect(self.animLoop)
# 点滅タイプを変更
self.ani.setEasingCurve(QtCore.QEasingCurve.OutCubic)
# アニメーションを永遠にループするようにする
# それだと止められないからBoolのフラグで制御
self.ani.valueChanged.connect(lambda: self.update(self.boundingRect()))
self.ani.start()
self.setAcceptHoverEvents(True)
def animStop(self):
if self.animStopped:
self.animStopped = False
self.ani.start()
else:
self.animStopped = True
self.ani.stop()
def animLoop(self):
if self.animStopped is False:
self.ani.start()
def boundingRect(self):
return self.__rect
def paint(self, painter, option, widget):
painter.setBrush(self.property('color'))
painter.drawRoundedRect(self.__rect, 5, 5)
def mouseDoubleClickEvent(self, event):
self.animStop()
return super().mouseDoubleClickEvent(event)
def changeRect(self, rect):
self.__rect = rect
self.update()
if __name__ == '__main__':
app = QtWidgets.QApplication(sys.argv)
a = testWindow()
a.show()
sys.exit(app.exec_())
実行すると、こんな感じで白→青にアニメーションするようになります。
いくつかはまりポイント¶
一応できたのですが、いくつかはまりポイントがあったので軽く解説。
Propertyを作る¶
アニメーションを使用するには、「プロパティ」を作成する必要があります。
ネットで調べた限りだと、出てくるプロパティは「Property関数」を使用して
作っている例しかありませんでした。
が、PySideの場合なのかはわかりませんが
self.setProperty('color', QtGui.QColor('red'))
こんな感じで setProperty(プロパティ名、初期値)
のように指定する必要がありました。
そしてこのプロパティを使用する場合は
self.property(プロパティ名)
のようにする必要があります。
PropertyAnimationの引数¶
アニメーションを行う PropertyAnimation ですが、
引数は プロパティのあるオブジェクト、プロパティ名 のように指定します。
が、
self.ani = QtCore.QPropertyAnimation(self, 'color')
これだとエラーになってしまいます。
対応方法は、エラーのSupported signaturesを見て分かるとおり
第二引数は「ByteArray」である必要があるので
self.ani = QtCore.QPropertyAnimation(self, b'color')
こうすればOKです。
GraphicsObjectを使う¶
プロパティを使用するためには、QObjectを継承している必要があります。
が、QGraphicsItemのほうはQObjectを継承していません。
なので、QGraphicsItemではなく
QObjectを継承している「 QGraphicsObject 」を使用する必要があります。
ずっとループする¶
PropertyAnimationには「何回ループするか」の設定はあるのですが
ずっとループしてほしいという設定はありません。
ので、ずっとループしたい場合は
self.ani.finished.connect(self.ani.start)
このようにすればとりあえずできます。
が、これだと絶対に終了しなくなるので
今回はBoolでフラグを作って、ダブルクリックで停止と再開をできるようにしています。
アニメーションカーブの指定¶
アニメーションカーブは
self.ani.setEasingCurve(QtCore.QEasingCurve.OutCubic)
これで指定できます。
今回は
こんなカーブになりました。
他にも種類は色々あるので、詳しくは こちら を参照してください。
色々と罠はありましたが、分かってしまえば簡単なので
色々幅が広がりそう。
参考¶
- https://dftalk.jp/?p=19675
- https://stackoverflow.com/questions/8191255/how-do-i-create-and-animate-a-custom-widget-property-in-pyqt4
- https://github.com/janbodnar/pyqt-qpropertyanimation/blob/master/color_anim.py