Animated Tiles Example#

The Animated Tiles example animates items in a graphics scene.

Animated Tiles Screenshot

Download this example

<!DOCTYPE RCC><RCC version="1.0">
<qresource>
    <file>images/Time-For-Lunch-2.jpg</file>
    <file>images/centered.png</file>
    <file>images/ellipse.png</file>
    <file>images/figure8.png</file>
    <file>images/kinetic.png</file>
    <file>images/random.png</file>
    <file>images/tile.png</file>
</qresource>
</RCC>
# Copyright (C) 2010 Riverbank Computing Limited.
# Copyright (C) 2022 The Qt Company Ltd.
# SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause

import sys
import math

from PySide6.QtCore import (QEasingCurve, QObject, QParallelAnimationGroup,
                            QPointF, QPropertyAnimation, QRandomGenerator,
                            QRectF, QTimer, Qt, Property, Signal)
from PySide6.QtGui import (QBrush, QLinearGradient, QPainter,
                           QPainterPath, QPixmap, QTransform)
from PySide6.QtWidgets import (QApplication, QGraphicsItem, QGraphicsPixmapItem,
                               QGraphicsRectItem, QGraphicsScene, QGraphicsView,
                               QGraphicsWidget, QStyle)
from PySide6.QtStateMachine import QState, QStateMachine

import animatedtiles_rc  # noqa: F401


# Deriving from more than one wrapped class is not supported, so we use
# composition and delegate the property.
class Pixmap(QObject):
    def __init__(self, pix):
        super().__init__()

        self.pixmap_item = QGraphicsPixmapItem(pix)
        self.pixmap_item.setCacheMode(QGraphicsItem.DeviceCoordinateCache)

    def set_pos(self, pos):
        self.pixmap_item.setPos(pos)

    def get_pos(self):
        return self.pixmap_item.pos()

    pos = Property(QPointF, get_pos, set_pos)


class Button(QGraphicsWidget):
    pressed = Signal()

    def __init__(self, pixmap, parent=None):
        super().__init__(parent)

        self._pix = pixmap

        self.setAcceptHoverEvents(True)
        self.setCacheMode(QGraphicsItem.DeviceCoordinateCache)

    def boundingRect(self):
        return QRectF(-65, -65, 130, 130)

    def shape(self):
        path = QPainterPath()
        path.addEllipse(self.boundingRect())

        return path

    def paint(self, painter, option, widget):
        down = option.state & QStyle.State_Sunken
        r = self.boundingRect()

        grad = QLinearGradient(r.topLeft(), r.bottomRight())
        if option.state & QStyle.State_MouseOver:
            color_0 = Qt.white
        else:
            color_0 = Qt.lightGray

        color_1 = Qt.darkGray

        if down:
            color_0, color_1 = color_1, color_0

        grad.setColorAt(0, color_0)
        grad.setColorAt(1, color_1)

        painter.setPen(Qt.darkGray)
        painter.setBrush(grad)
        painter.drawEllipse(r)

        color_0 = Qt.darkGray
        color_1 = Qt.lightGray

        if down:
            color_0, color_1 = color_1, color_0

        grad.setColorAt(0, color_0)
        grad.setColorAt(1, color_1)

        painter.setPen(Qt.NoPen)
        painter.setBrush(grad)

        if down:
            painter.translate(2, 2)

        painter.drawEllipse(r.adjusted(5, 5, -5, -5))
        painter.drawPixmap(-self._pix.width() / 2, -self._pix.height() / 2,
                           self._pix)

    def mousePressEvent(self, ev):
        self.pressed.emit()
        self.update()

    def mouseReleaseEvent(self, ev):
        self.update()


class View(QGraphicsView):
    def resizeEvent(self, event):
        super(View, self).resizeEvent(event)
        self.fitInView(self.sceneRect(), Qt.KeepAspectRatio)


if __name__ == '__main__':
    app = QApplication(sys.argv)

    kinetic_pix = QPixmap(':/images/kinetic.png')
    bg_pix = QPixmap(':/images/Time-For-Lunch-2.jpg')

    scene = QGraphicsScene(-350, -350, 700, 700)

    items = []
    for i in range(64):
        item = Pixmap(kinetic_pix)
        item.pixmap_item.setOffset(-kinetic_pix.width() / 2,
                                   -kinetic_pix.height() / 2)
        item.pixmap_item.setZValue(i)
        items.append(item)
        scene.addItem(item.pixmap_item)

    # Buttons.
    button_parent = QGraphicsRectItem()
    ellipse_button = Button(QPixmap(':/images/ellipse.png'), button_parent)
    figure_8button = Button(QPixmap(':/images/figure8.png'), button_parent)
    random_button = Button(QPixmap(':/images/random.png'), button_parent)
    tiled_button = Button(QPixmap(':/images/tile.png'), button_parent)
    centered_button = Button(QPixmap(':/images/centered.png'), button_parent)

    ellipse_button.setPos(-100, -100)
    figure_8button.setPos(100, -100)
    random_button.setPos(0, 0)
    tiled_button.setPos(-100, 100)
    centered_button.setPos(100, 100)

    scene.addItem(button_parent)
    button_parent.setTransform(QTransform().scale(0.75, 0.75))
    button_parent.setPos(200, 200)
    button_parent.setZValue(65)

    # States.
    root_state = QState()
    ellipse_state = QState(root_state)
    figure_8state = QState(root_state)
    random_state = QState(root_state)
    tiled_state = QState(root_state)
    centered_state = QState(root_state)

    # Values.
    generator = QRandomGenerator.global_()

    for i, item in enumerate(items):
        # Ellipse.
        ellipse_state.assignProperty(item, 'pos',
                                     QPointF(math.cos((i / 63.0) * 6.28) * 250,
                                             math.sin((i / 63.0) * 6.28) * 250))

        # Figure 8.
        figure_8state.assignProperty(item, 'pos',
                                     QPointF(math.sin((i / 63.0) * 6.28) * 250,
                                             math.sin(((i * 2) / 63.0) * 6.28) * 250))

        # Random.
        random_state.assignProperty(item, 'pos',
                                    QPointF(-250 + generator.bounded(0, 500),
                                            -250 + generator.bounded(0, 500)))

        # Tiled.
        width = kinetic_pix.width()
        height = kinetic_pix.height()
        tiled_state.assignProperty(item, 'pos',
                                   QPointF(((i % 8) - 4) * width + width / 2,
                                           ((i // 8) - 4) * height + height / 2))

        # Centered.
        centered_state.assignProperty(item, 'pos', QPointF())

    # Ui.
    view = View(scene)
    view.setWindowTitle("Animated Tiles")
    view.setViewportUpdateMode(QGraphicsView.BoundingRectViewportUpdate)
    view.setBackgroundBrush(QBrush(bg_pix))
    view.setCacheMode(QGraphicsView.CacheBackground)
    view.setRenderHints(QPainter.Antialiasing | QPainter.SmoothPixmapTransform)
    view.show()

    states = QStateMachine()
    states.addState(root_state)
    states.setInitialState(root_state)
    root_state.setInitialState(centered_state)

    group = QParallelAnimationGroup()
    for i, item in enumerate(items):
        anim = QPropertyAnimation(item, b'pos')
        anim.setDuration(750 + i * 25)
        anim.setEasingCurve(QEasingCurve.InOutBack)
        group.addAnimation(anim)

    trans = root_state.addTransition(ellipse_button.pressed, ellipse_state)
    trans.addAnimation(group)

    trans = root_state.addTransition(figure_8button.pressed, figure_8state)
    trans.addAnimation(group)

    trans = root_state.addTransition(random_button.pressed, random_state)
    trans.addAnimation(group)

    trans = root_state.addTransition(tiled_button.pressed, tiled_state)
    trans.addAnimation(group)

    trans = root_state.addTransition(centered_button.pressed, centered_state)
    trans.addAnimation(group)

    timer = QTimer()
    timer.start(125)
    timer.setSingleShot(True)
    trans = root_state.addTransition(timer.timeout, ellipse_state)
    trans.addAnimation(group)

    states.start()

    sys.exit(app.exec())