как создать анимацию в кадре

Question

На изображении я показываю программу, в которой я пытаюсь показать рамку в тот момент, когда мышь находится на моей основной оранжевой рамке. Однако внешний вид рамы очень резкий. Хотелось бы знать, можем ли мы создать вид анимации, чтобы вместо того, чтобы появляться таким образом, казалось, что рамка скользит вправо

код:

from PyQt5.QtWidgets import QMainWindow,QApplication
from PyQt5 import uic 
from PyQt5 import Qt
from PyQt5 import QtCore

class Principal(QMainWindow):
    def __init__(self):
        QMainWindow.__init__(self)
        uic.loadUi("we.ui",self)

        self.setAttribute(Qt.Qt.WA_TranslucentBackground, True )   
        self.setAttribute(Qt.Qt.WA_NoSystemBackground, False)      
        self.setWindowFlags(Qt.Qt.FramelessWindowHint)
        self.frame1.installEventFilter(self)

    def eventFilter(self,watched,event):
        if self.frame1 is watched:
            if event.type() == QtCore.QEvent.Enter:
                self.frame2.resize(121,self.height())
            elif event.type() == QtCore.QEvent.Leave:
                self.frame2.resize(10,10)
        return super(Principal,self).eventFilter(watched,event)

app = QApplication([])
p = Principal()
p.show()
app.exec_()

file.ui:

<?xml version="1.0" encoding="UTF-8"?>
      <ui version="4.0">
       <class>MainWindow</class>
       <widget class="QMainWindow" name="MainWindow">
        <property name="geometry">
         <rect>
          <x>0</x>
          <y>0</y>
          <width>552</width>
          <height>397</height>
         </rect>
        </property>
        <property name="windowTitle">
         <string>MainWindow</string>
        </property>
        <property name="styleSheet">
         <string notr="true">background:qlineargradient(spread:pad, x1:0.565, y1:0, x2:0.508475, y2:1, stop:0 rgba(0, 0, 103, 0), stop:1 rgba(255, 255, 255, 0));</string>
        </property>
        <widget class="QWidget" name="centralwidget">
         <property name="styleSheet">
          <string notr="true"/>
         </property>
         <widget class="QPushButton" name="Ajustes">
          <property name="geometry">
           <rect>
            <x>406</x>
            <y>0</y>
            <width>31</width>
            <height>23</height>
           </rect>
          </property>
          <property name="styleSheet">
           <string notr="true">QPushButton#Ajustes{
      background:none;
      border:0px;
      }</string>
          </property>
          <property name="text">
           <string/>
          </property>
          <property name="icon">
           <iconset>
            <normaloff>settings.png</normaloff>settings.png</iconset>
          </property>
         </widget>
         <widget class="QFrame" name="frame1">
          <property name="geometry">
           <rect>
            <x>0</x>
            <y>0</y>
            <width>431</width>
            <height>401</height>
           </rect>
          </property>
          <property name="styleSheet">
           <string notr="true">background:orange;</string>
          </property>
          <property name="frameShape">
           <enum>QFrame::StyledPanel</enum>
          </property>
          <property name="frameShadow">
           <enum>QFrame::Raised</enum>
          </property>
         </widget>
         <widget class="QFrame" name="frame2">
          <property name="geometry">
           <rect>
            <x>430</x>
            <y>0</y>
            <width>0</width>
            <height>401</height>
           </rect>
          </property>
          <property name="styleSheet">
           <string notr="true">background:red;</string>
          </property>
          <property name="frameShape">
           <enum>QFrame::StyledPanel</enum>
          </property>
          <property name="frameShadow">
           <enum>QFrame::Raised</enum>
          </property>
         </widget>
         <zorder>frame1</zorder>
         <zorder>Ajustes</zorder>
         <zorder>frame2</zorder>
        </widget>
       </widget>
       <resources/>
       <connections/>
      </ui>

Надеюсь, вы мне поможете. Я искал что-то связанное, но не могу найти, как создавать такие анимации, если вы можете их так называть

Answer 1

Вы должны использовать QPropertyAnimation:

from PyQt5 import QtCore, QtWidgets, uic 

class Principal(QtWidgets.QMainWindow):
    def __init__(self):
        super(Principal, self).__init__()
        uic.loadUi("we.ui",self)
        self.setAttribute(QtCore.Qt.WA_TranslucentBackground, True)   
        self.setAttribute(QtCore.Qt.WA_NoSystemBackground, False)      
        self.setWindowFlags(QtCore.Qt.FramelessWindowHint)
        self.frame1.installEventFilter(self)
        self._animation = QtCore.QPropertyAnimation(self.frame2, b'size', self)
        self._animation.setStartValue(QtCore.QSize(0, self.height()))
        self._animation.setEndValue(QtCore.QSize(121, self.height()))
        self._animation.setDuration(200)

    def eventFilter(self, watched, event):
        if self.frame1 is watched:
            if event.type() == QtCore.QEvent.Enter:
                self._animation.setDirection(QtCore.QAbstractAnimation.Forward)
                self._animation.start()
            elif event.type() == QtCore.QEvent.Leave:
                self._animation.setDirection(QtCore.QAbstractAnimation.Backward)
                self._animation.start()
        return super(Principal,self).eventFilter(watched, event)

if __name__ == '__main__':
    import sys
    app = QtWidgets.QApplication(sys.argv)
    p = Principal()
    p.show()
    sys.exit(app.exec_())