Skip to content
  • Categories
  • Recent
  • Tags
  • Popular
  • Users
  • Groups
  • Search
  • Get Qt Extensions
  • Unsolved
Collapse
Brand Logo
  1. Home
  2. Qt Development
  3. General and Desktop
  4. Animating the scale of a QDialog
Forum Updated to NodeBB v4.3 + New Features

Animating the scale of a QDialog

Scheduled Pinned Locked Moved Unsolved General and Desktop
4 Posts 2 Posters 278 Views 2 Watching
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • M Offline
    M Offline
    Mizmas
    wrote on last edited by
    #1

    I'm looking for ways to animate the scale of a QDialog to create a smooth animated popup.

    Qt widgets don't have a scale property that you can animate, so I tried using a QGraphicsView() and wrapped a QDialog in a QGraphicsProxyWidget().

    The problem then becomes that the QGraphicsView doesn't have a .exec() method that would force the QDialog to be interacted with before proceeding.

    Maybe someone knows a workaround or better yet another approach how I could animate the scale(not the height and width) of the QDialog

    This is how it looks:

    Full code, you can replace uic.loadUi("Error.ui", self) with your own .ui file:

    from PyQt6.QtWidgets import (QApplication, QDialog, QStyleFactory, QGraphicsView,
                                 QGraphicsScene, QGraphicsProxyWidget)
    from PyQt6.QtCore import Qt, QPropertyAnimation, QEasingCurve
    from PyQt6 import uic
    import sys
    import os
    
    
    class ExpandingDialog(QDialog):
        def __init__(self):
            super().__init__()
    
            # Load your own
            uic.loadUi("Error.ui", self)
    
            self.setWindowFlag(Qt.WindowType.FramelessWindowHint)
            self.setAttribute(Qt.WidgetAttribute.WA_TranslucentBackground)
    
            # Create a Graphics View and Scene to enable scaling animation
            self.scene = QGraphicsScene()
            self.view = QGraphicsView(self.scene)
            self.view.setWindowFlags(Qt.WindowType.FramelessWindowHint)
            self.view.setAttribute(Qt.WidgetAttribute.WA_TranslucentBackground)
            self.view.setStyleSheet("background: transparent; border: none;")
            self.view.setFixedSize(self.width(), self.height())
    
            # Wrap the Dialog inside a QGraphicsProxyWidget
            self.proxy_widget = QGraphicsProxyWidget()
            self.proxy_widget.setWidget(self)
            self.scene.addItem(self.proxy_widget)
    
        def showEvent(self, event):
            self.start_animation()
            self.view.show()
            # self.exec()
    
        def start_animation(self):
            # Scale Animation
            self.scale_animation = QPropertyAnimation(self.proxy_widget, b"scale")
            self.scale_animation.setDuration(600)
            self.scale_animation.setStartValue(0.0)
            self.scale_animation.setEndValue(1.0)
            self.scale_animation.setEasingCurve(QEasingCurve.Type.OutCubic)
    
            # Opacity Animation
            self.opacity_animation = QPropertyAnimation(self.proxy_widget, b"opacity")
            self.opacity_animation.setDuration(300)
            self.opacity_animation.setStartValue(0.0)
            self.opacity_animation.setEndValue(1.0)
    
            # Start Animations
            self.scale_animation.start()
            self.opacity_animation.start()
    
    if __name__ == "__main__":
    
        os.environ['QT_ENABLE_HIGHDPI_SCALING'] = '0'
        os.environ['QT_FONT_DPI'] = '120'
    
        app = QApplication(sys.argv)
        app.setStyle(QStyleFactory.create('windowsvista'))
    
        dialog = ExpandingDialog()
        dialog.exec()
    
    
    Pl45m4P 1 Reply Last reply
    0
    • M Mizmas

      I'm looking for ways to animate the scale of a QDialog to create a smooth animated popup.

      Qt widgets don't have a scale property that you can animate, so I tried using a QGraphicsView() and wrapped a QDialog in a QGraphicsProxyWidget().

      The problem then becomes that the QGraphicsView doesn't have a .exec() method that would force the QDialog to be interacted with before proceeding.

      Maybe someone knows a workaround or better yet another approach how I could animate the scale(not the height and width) of the QDialog

      This is how it looks:

      Full code, you can replace uic.loadUi("Error.ui", self) with your own .ui file:

      from PyQt6.QtWidgets import (QApplication, QDialog, QStyleFactory, QGraphicsView,
                                   QGraphicsScene, QGraphicsProxyWidget)
      from PyQt6.QtCore import Qt, QPropertyAnimation, QEasingCurve
      from PyQt6 import uic
      import sys
      import os
      
      
      class ExpandingDialog(QDialog):
          def __init__(self):
              super().__init__()
      
              # Load your own
              uic.loadUi("Error.ui", self)
      
              self.setWindowFlag(Qt.WindowType.FramelessWindowHint)
              self.setAttribute(Qt.WidgetAttribute.WA_TranslucentBackground)
      
              # Create a Graphics View and Scene to enable scaling animation
              self.scene = QGraphicsScene()
              self.view = QGraphicsView(self.scene)
              self.view.setWindowFlags(Qt.WindowType.FramelessWindowHint)
              self.view.setAttribute(Qt.WidgetAttribute.WA_TranslucentBackground)
              self.view.setStyleSheet("background: transparent; border: none;")
              self.view.setFixedSize(self.width(), self.height())
      
              # Wrap the Dialog inside a QGraphicsProxyWidget
              self.proxy_widget = QGraphicsProxyWidget()
              self.proxy_widget.setWidget(self)
              self.scene.addItem(self.proxy_widget)
      
          def showEvent(self, event):
              self.start_animation()
              self.view.show()
              # self.exec()
      
          def start_animation(self):
              # Scale Animation
              self.scale_animation = QPropertyAnimation(self.proxy_widget, b"scale")
              self.scale_animation.setDuration(600)
              self.scale_animation.setStartValue(0.0)
              self.scale_animation.setEndValue(1.0)
              self.scale_animation.setEasingCurve(QEasingCurve.Type.OutCubic)
      
              # Opacity Animation
              self.opacity_animation = QPropertyAnimation(self.proxy_widget, b"opacity")
              self.opacity_animation.setDuration(300)
              self.opacity_animation.setStartValue(0.0)
              self.opacity_animation.setEndValue(1.0)
      
              # Start Animations
              self.scale_animation.start()
              self.opacity_animation.start()
      
      if __name__ == "__main__":
      
          os.environ['QT_ENABLE_HIGHDPI_SCALING'] = '0'
          os.environ['QT_FONT_DPI'] = '120'
      
          app = QApplication(sys.argv)
          app.setStyle(QStyleFactory.create('windowsvista'))
      
          dialog = ExpandingDialog()
          dialog.exec()
      
      
      Pl45m4P Offline
      Pl45m4P Offline
      Pl45m4
      wrote on last edited by
      #2

      @Mizmas

      What if you pick the geometry property instead of scale? I don't think you need the QGraphicsView for that


      If debugging is the process of removing software bugs, then programming must be the process of putting them in.

      ~E. W. Dijkstra

      M 2 Replies Last reply
      0
      • Pl45m4P Pl45m4

        @Mizmas

        What if you pick the geometry property instead of scale? I don't think you need the QGraphicsView for that

        M Offline
        M Offline
        Mizmas
        wrote on last edited by
        #3

        @Pl45m4 Geometry is not like scale, you're still basically animating the width and height with it, and if you use a fixed size, it won't really look good. I will try though and post the result later

        1 Reply Last reply
        0
        • Pl45m4P Pl45m4

          @Mizmas

          What if you pick the geometry property instead of scale? I don't think you need the QGraphicsView for that

          M Offline
          M Offline
          Mizmas
          wrote on last edited by
          #4

          @Pl45m4 I actually recently learned that you can basically overlay any widget on top of widgets in a layout, so I made something better. As an alternative for animating the scale, I guess you can just take a snapshot of your widget, and just animate the scale in After Effects or something, and show the animation first and than the dialog itself.

          1 Reply Last reply
          0

          • Login

          • Login or register to search.
          • First post
            Last post
          0
          • Categories
          • Recent
          • Tags
          • Popular
          • Users
          • Groups
          • Search
          • Get Qt Extensions
          • Unsolved