Animation

This commit is contained in:
Irony 2018-12-27 22:58:12 +08:00
parent a49a423507
commit a102b92a53
36 changed files with 24 additions and 391 deletions

View file

Before

Width:  |  Height:  |  Size: 47 KiB

After

Width:  |  Height:  |  Size: 47 KiB

View file

Before

Width:  |  Height:  |  Size: 40 KiB

After

Width:  |  Height:  |  Size: 40 KiB

View file

Before

Width:  |  Height:  |  Size: 45 KiB

After

Width:  |  Height:  |  Size: 45 KiB

View file

Before

Width:  |  Height:  |  Size: 41 KiB

After

Width:  |  Height:  |  Size: 41 KiB

View file

Before

Width:  |  Height:  |  Size: 57 KiB

After

Width:  |  Height:  |  Size: 57 KiB

View file

Before

Width:  |  Height:  |  Size: 47 KiB

After

Width:  |  Height:  |  Size: 47 KiB

View file

Before

Width:  |  Height:  |  Size: 64 KiB

After

Width:  |  Height:  |  Size: 64 KiB

View file

Before

Width:  |  Height:  |  Size: 89 KiB

After

Width:  |  Height:  |  Size: 89 KiB

View file

Before

Width:  |  Height:  |  Size: 53 KiB

After

Width:  |  Height:  |  Size: 53 KiB

View file

@ -129,7 +129,7 @@
<customwidget>
<class>SlidingStackedWidget</class>
<extends>QStackedWidget</extends>
<header location="global">SlidingStackedWidget</header>
<header location="global">Lib.SlidingStackedWidget</header>
<container>1</container>
</customwidget>
</customwidgets>

View file

Before

Width:  |  Height:  |  Size: 107 KiB

After

Width:  |  Height:  |  Size: 107 KiB

View file

@ -8,7 +8,7 @@ from PyQt5.QtWidgets import QWidget, QVBoxLayout, QPushButton
# author: Irony
# site: https://pyqt5.com, https://github.com/892768447
# email: 892768447@qq.com
# file: 动画特效.淡入淡出
# file: FadeInOut
# description:
__Author__ = """By: Irony
QQ: 892768447

View file

@ -6,7 +6,7 @@ Created on 2018年8月22日
@author: Irony
@site: https://pyqt5.com, https://github.com/892768447
@email: 892768447@qq.com
@file: 动画特效.右键菜单动画
@file: MenuAnimation
@description:
"""
from PyQt5.QtCore import QPropertyAnimation, QEasingCurve, QRect

View file

@ -6,7 +6,7 @@ Created on 2018年11月24日
author: Irony
site: https://pyqt5.com , https://github.com/892768447
email: 892768447@qq.com
file:
file: PageSwitching
description:
"""
import os
@ -15,7 +15,7 @@ from PyQt5.QtCore import QEasingCurve, Qt
from PyQt5.QtGui import QPixmap
from PyQt5.QtWidgets import QWidget, QLabel
from UiImageSlider import Ui_Form # @UnresolvedImport
from Lib.UiImageSlider import Ui_Form # @UnresolvedImport
__Author__ = """By: Irony
@ -48,10 +48,10 @@ class ImageSliderWidget(QWidget, Ui_Form):
self.pushButtonStop.clicked.connect(self.autoStop)
# 添加图片页面
for name in os.listdir('Images'):
for name in os.listdir('Data/Images'):
label = QLabel(self.stackedWidget)
label.setScaledContents(True)
label.setPixmap(QPixmap('Images/' + name))
label.setPixmap(QPixmap('Data/Images/' + name))
self.stackedWidget.addWidget(label)
def autoStart(self):

1
Animation/README.en.md Normal file
View file

@ -0,0 +1 @@
# Animation

View file

@ -1,8 +1,7 @@
# 动画特效
# Animation
使用QPropertyAnimation属性类动画支持的属性有限
## [1、窗口淡入淡出](窗口淡入淡出.py)
# 1、窗口淡入淡出
[运行 FadeInOut.py](FadeInOut.py)
1. 使用`QPropertyAnimation`对窗口的`windowOpacity`透明度属性进行修改
1. 窗口启动时开启透明度0-->1的动画
@ -12,46 +11,18 @@
1. 停止就动画
1. 绑定动画完成后`finished`信号连接到`close`关闭窗口函数
![截图](ScreenShot/窗口淡入淡出.gif)
![FadeInOut](ScreenShot/FadeInOut.gif)
## [2、右键菜单动画](右键菜单动画.py)
# 2、右键菜单动画
[运行 MenuAnimation](MenuAnimation.py)
1. 使用`QPropertyAnimation`对菜单控件的`geometry`属性进行修改
1. 当菜单事件`contextMenuEvent`触发时调用动画启动,同时显示菜单
![截图](ScreenShot/右键菜单动画.gif)
![MenuAnimation](ScreenShot/MenuAnimation.gif)
## [3、按钮放大缩小动画](按钮放大缩小动画.py)
1. 使用`QPropertyAnimation`对按钮的`geometry`属性进行修改
1. 针对按钮在布局中或者没有在布局中两种情况,需要对主窗口的`showEvent`和`resizeEvent`两个事件进行重写,从而达到更新按钮的最新`geometry`值
1. 主动调用按钮的`updatePos`函数来更新`geometry`值
比如:
```python
def showEvent(self, event):
super(TestWindow, self).showEvent(event)
# 更新按钮的位置
self.button1.updatePos()
# 针对不在控件中的按钮
self.button2.move(self.width() - self.button2.width() - 15,
self.height() - self.button2.height() - 10)
self.button2.updatePos()
def resizeEvent(self, event):
super(TestWindow, self).resizeEvent(event)
# 更新按钮的位置
self.button1.updatePos()
# 针对不在控件中的按钮
self.button2.move(self.width() - self.button2.width() - 15,
self.height() - self.button2.height() - 10)
self.button2.updatePos()
```
![截图](ScreenShot/按钮放大缩小动画.gif)
## [4、点阵特效](点阵特效.py)
## 3、点阵特效
[运行 RlatticeEffect.py](RlatticeEffect.py)
1. emmm,我也不知道这个动画叫啥名字,反正就是仿照网页做的
1. 参考js源码,大概的原理就是:
@ -123,9 +94,10 @@ def findClose(points):
p1.closest = closest
```
![截图](ScreenShot/点阵特效.gif)
![RlatticeEffect](ScreenShot/RlatticeEffect.gif)
## [5、图片轮播动画](多页面切换动画/图片轮播动画.py)
## 5、页面切换/图片轮播动画
[运行 PageSwitching.py](PageSwitching.py)
1. 使用`QPropertyAnimation`对`QStackedWidget`中的子控件进行pos位移操作实现动画切换特效
1. 主要代码参考http://qt.shoutwiki.com/wiki/Extending_QStackedWidget_for_sliding_page_animations_in_Qt
@ -138,4 +110,4 @@ def findClose(points):
1. `setCurrentIndex` 切换到指定页
1. `autoStart(msec)` 轮播模式, 默认是3000毫秒
![截图](ScreenShot/图片轮播动画.gif)
![PageSwitching](ScreenShot/PageSwitching.gif)

View file

@ -6,7 +6,7 @@ Created on 2018年11月22日
@author: Irony
@site: https://pyqt5.com, https://github.com/892768447
@email: 892768447@qq.com
@file:
@file: RlatticeEffect
@description:
"""
from random import random
@ -26,7 +26,7 @@ __Version__ = 1.0
try:
import pointtool # @UnusedImport @UnresolvedImport
from Lib import pointtool # @UnusedImport @UnresolvedImport
getDistance = pointtool.getDistance
findClose = pointtool.findClose
except:

View file

Before

Width:  |  Height:  |  Size: 630 KiB

After

Width:  |  Height:  |  Size: 630 KiB

View file

Before

Width:  |  Height:  |  Size: 78 KiB

After

Width:  |  Height:  |  Size: 78 KiB

View file

Before

Width:  |  Height:  |  Size: 1.6 MiB

After

Width:  |  Height:  |  Size: 1.6 MiB

View file

Before

Width:  |  Height:  |  Size: 1.7 MiB

After

Width:  |  Height:  |  Size: 1.7 MiB

View file

@ -6,7 +6,7 @@ Created on 2018年10月30日
@author: Irony
@site: http://pyqt5.com https://github.com/892768447
@email: 892768447@qq.com
@file:
@file: ButtomZoom
@description:
"""
from PyQt5.QtCore import QPropertyAnimation, QRect

View file

Before

Width:  |  Height:  |  Size: 38 KiB

After

Width:  |  Height:  |  Size: 38 KiB

View file

@ -1,238 +0,0 @@
#!/usr/bin/env python
# -*- coding: utf-8 -*-
"""
Created on 2018年11月24日
author: Irony
site: https://pyqt5.com , https://github.com/892768447
email: 892768447@qq.com
file:
description: 参考 http://qt.shoutwiki.com/wiki/Extending_QStackedWidget_for_sliding_page_animations_in_Qt
"""
from PyQt5.QtCore import Qt, pyqtProperty, QEasingCurve, QPoint, \
QPropertyAnimation, QParallelAnimationGroup, QTimer
from PyQt5.QtWidgets import QStackedWidget
__Author__ = """By: Irony
QQ: 892768447
Email: 892768447@qq.com"""
__Copyright__ = 'Copyright (c) 2018 Irony'
__Version__ = 1.0
class SlidingStackedWidget(QStackedWidget):
LEFT2RIGHT, RIGHT2LEFT, TOP2BOTTOM, BOTTOM2TOP, AUTOMATIC = range(5)
def __init__(self, *args, **kwargs):
super(SlidingStackedWidget, self).__init__(*args, **kwargs)
self._pnow = QPoint(0, 0)
# 动画速度
self._speed = 500
# 当前索引
self._now = 0
# 自动模式的当前索引
self._current = 0
# 下一个索引
self._next = 0
# 是否激活
self._active = 0
# 动画方向(默认是横向)
self._orientation = Qt.Horizontal
# 动画曲线类型
self._easing = QEasingCurve.Linear
# 初始化动画
self._initAnimation()
def setSpeed(self, speed=500):
"""设置动画速度
:param speed: 速度值,默认值为500
:type speed: int
"""
self._speed = speed
@pyqtProperty(int, fset=setSpeed)
def speed(self):
return self._speed
def setOrientation(self, orientation=Qt.Horizontal):
"""设置动画的方向(横向和纵向)
:param orientation: 方向(Qt.Horizontal或Qt.Vertical)
:type orientation: http://doc.qt.io/qt-5/qt.html#Orientation-enum
"""
self._orientation = orientation
@pyqtProperty(int, fset=setOrientation)
def orientation(self):
return self._orientation
def setEasing(self, easing=QEasingCurve.OutBack):
"""设置动画的曲线类型
:param easing: 默认为QEasingCurve.OutBack
:type easing: http://doc.qt.io/qt-5/qeasingcurve.html#Type-enum
"""
self._easing = easing
@pyqtProperty(int, fset=setEasing)
def easing(self):
return self._easing
def slideInNext(self):
"""滑动到下一页"""
now = self.currentIndex()
if now < self.count() - 1:
self.slideInIdx(now + 1)
self._current = now + 1
def slideInPrev(self):
"""滑动到上一页"""
now = self.currentIndex()
if now > 0:
self.slideInIdx(now - 1)
self._current = now - 1
def slideInIdx(self, idx, direction=4):
"""滑动到指定序号
:param idx: 序号
:type idx: int
:param direction: 方向,默认是自动AUTOMATIC=4
:type direction: int
"""
if idx > self.count() - 1:
direction = self.TOP2BOTTOM if self._orientation == Qt.Vertical else self.RIGHT2LEFT
idx = idx % self.count()
elif idx < 0:
direction = self.BOTTOM2TOP if self._orientation == Qt.Vertical else self.LEFT2RIGHT
idx = (idx + self.count()) % self.count()
self.slideInWgt(self.widget(idx), direction)
def slideInWgt(self, widget, direction):
"""滑动到指定的widget
:param widget: QWidget, QLabel, etc...
:type widget: QWidget Base Class
:param direction: 方向
:type direction: int
"""
if self._active:
return
self._active = 1
_now = self.currentIndex()
_next = self.indexOf(widget)
if _now == next:
self._active = 0
return
w_now = self.widget(_now)
w_next = self.widget(_next)
# 自动判断方向
if _now < _next:
directionhint = self.TOP2BOTTOM if self._orientation == Qt.Vertical else self.RIGHT2LEFT
else:
directionhint = self.BOTTOM2TOP if self._orientation == Qt.Vertical else self.LEFT2RIGHT
if direction == self.AUTOMATIC:
direction = directionhint
# 计算偏移量
offsetX = self.frameRect().width()
offsetY = self.frameRect().height()
w_next.setGeometry(0, 0, offsetX, offsetY)
if direction == self.BOTTOM2TOP:
offsetX = 0
offsetY = -offsetY
elif direction == self.TOP2BOTTOM:
offsetX = 0
elif direction == self.RIGHT2LEFT:
offsetX = -offsetX
offsetY = 0
elif direction == self.LEFT2RIGHT:
offsetY = 0
# 重新定位显示区域外部/旁边的下一个窗口小部件
pnext = w_next.pos()
pnow = w_now.pos()
self._pnow = pnow
# 移动到指定位置并显示
w_next.move(pnext.x() - offsetX, pnext.y() - offsetY)
w_next.show()
w_next.raise_()
self._animnow.setTargetObject(w_now)
self._animnow.setDuration(self._speed)
self._animnow.setEasingCurve(self._easing)
self._animnow.setStartValue(QPoint(pnow.x(), pnow.y()))
self._animnow.setEndValue(
QPoint(offsetX + pnow.x(), offsetY + pnow.y()))
self._animnext.setTargetObject(w_next)
self._animnext.setDuration(self._speed)
self._animnext.setEasingCurve(self._easing)
self._animnext.setStartValue(
QPoint(-offsetX + pnext.x(), offsetY + pnext.y()))
self._animnext.setEndValue(QPoint(pnext.x(), pnext.y()))
self._next = _next
self._now = _now
self._active = 1
self._animgroup.start()
def _initAnimation(self):
"""初始化当前页和下一页的动画变量"""
# 当前页的动画
self._animnow = QPropertyAnimation(
self, propertyName=b'pos', duration=self._speed,
easingCurve=self._easing)
# 下一页的动画
self._animnext = QPropertyAnimation(
self, propertyName=b'pos', duration=self._speed,
easingCurve=self._easing)
# 并行动画组
self._animgroup = QParallelAnimationGroup(
self, finished=self.animationDoneSlot)
self._animgroup.addAnimation(self._animnow)
self._animgroup.addAnimation(self._animnext)
def setCurrentIndex(self, index):
# 覆盖该方法实现的动画切换
# super(SlidingStackedWidget, self).setCurrentIndex(index)
# 坚决不能调用上面的函数,否则动画失效
self.slideInIdx(index)
def setCurrentWidget(self, widget):
# 覆盖该方法实现的动画切换
super(SlidingStackedWidget, self).setCurrentWidget(widget)
# 坚决不能调用上面的函数,否则动画失效
self.setCurrentIndex(self.indexOf(widget))
def animationDoneSlot(self):
"""动画结束处理函数"""
# 由于重写了setCurrentIndex方法所以这里要用父类本身的方法
# self.setCurrentIndex(self._next)
QStackedWidget.setCurrentIndex(self, self._next)
w = self.widget(self._now)
w.hide()
w.move(self._pnow)
self._active = 0
def autoStop(self):
"""停止自动播放"""
if hasattr(self, '_autoTimer'):
self._autoTimer.stop()
def autoStart(self, msec=3000):
"""自动轮播
:param time: 时间, 默认3000, 3
"""
if not hasattr(self, '_autoTimer'):
self._autoTimer = QTimer(self, timeout=self._autoStart)
self._autoTimer.stop()
self._autoTimer.start(msec)
def _autoStart(self):
if self._current == self.count():
self._current = 0
self._current += 1
self.setCurrentIndex(self._current)

View file

@ -1,102 +0,0 @@
# -*- coding: utf-8 -*-
# Form implementation generated from reading ui file 'UiImageSlider.ui'
#
# Created by: PyQt5 UI code generator 5.10.1
#
# WARNING! All changes made in this file will be lost!
from PyQt5 import QtCore, QtGui, QtWidgets
class Ui_Form(object):
def setupUi(self, Form):
Form.setObjectName("Form")
Form.resize(656, 612)
self.verticalLayout = QtWidgets.QVBoxLayout(Form)
self.verticalLayout.setObjectName("verticalLayout")
self.stackedWidget = SlidingStackedWidget(Form)
self.stackedWidget.setObjectName("stackedWidget")
self.verticalLayout.addWidget(self.stackedWidget)
self.groupBox = QtWidgets.QGroupBox(Form)
self.groupBox.setObjectName("groupBox")
self.horizontalLayout = QtWidgets.QHBoxLayout(self.groupBox)
self.horizontalLayout.setObjectName("horizontalLayout")
self.spinBoxSpeed = QtWidgets.QSpinBox(self.groupBox)
self.spinBoxSpeed.setMinimum(100)
self.spinBoxSpeed.setMaximum(5000)
self.spinBoxSpeed.setProperty("value", 500)
self.spinBoxSpeed.setObjectName("spinBoxSpeed")
self.horizontalLayout.addWidget(self.spinBoxSpeed)
self.verticalLayout.addWidget(self.groupBox)
self.groupBox_2 = QtWidgets.QGroupBox(Form)
self.groupBox_2.setObjectName("groupBox_2")
self.horizontalLayout_2 = QtWidgets.QHBoxLayout(self.groupBox_2)
self.horizontalLayout_2.setObjectName("horizontalLayout_2")
self.radioButtonHor = QtWidgets.QRadioButton(self.groupBox_2)
self.radioButtonHor.setChecked(True)
self.radioButtonHor.setObjectName("radioButtonHor")
self.horizontalLayout_2.addWidget(self.radioButtonHor)
self.radioButtonVer = QtWidgets.QRadioButton(self.groupBox_2)
self.radioButtonVer.setObjectName("radioButtonVer")
self.horizontalLayout_2.addWidget(self.radioButtonVer)
self.verticalLayout.addWidget(self.groupBox_2)
self.groupBox_3 = QtWidgets.QGroupBox(Form)
self.groupBox_3.setObjectName("groupBox_3")
self.horizontalLayout_3 = QtWidgets.QHBoxLayout(self.groupBox_3)
self.horizontalLayout_3.setObjectName("horizontalLayout_3")
self.comboBoxEasing = QtWidgets.QComboBox(self.groupBox_3)
self.comboBoxEasing.setObjectName("comboBoxEasing")
self.horizontalLayout_3.addWidget(self.comboBoxEasing)
self.verticalLayout.addWidget(self.groupBox_3)
self.groupBox_4 = QtWidgets.QGroupBox(Form)
self.groupBox_4.setObjectName("groupBox_4")
self.horizontalLayout_4 = QtWidgets.QHBoxLayout(self.groupBox_4)
self.horizontalLayout_4.setObjectName("horizontalLayout_4")
self.pushButtonPrev = QtWidgets.QPushButton(self.groupBox_4)
self.pushButtonPrev.setObjectName("pushButtonPrev")
self.horizontalLayout_4.addWidget(self.pushButtonPrev)
self.pushButtonNext = QtWidgets.QPushButton(self.groupBox_4)
self.pushButtonNext.setObjectName("pushButtonNext")
self.horizontalLayout_4.addWidget(self.pushButtonNext)
self.verticalLayout.addWidget(self.groupBox_4)
self.groupBox_5 = QtWidgets.QGroupBox(Form)
self.groupBox_5.setObjectName("groupBox_5")
self.horizontalLayout_5 = QtWidgets.QHBoxLayout(self.groupBox_5)
self.horizontalLayout_5.setObjectName("horizontalLayout_5")
self.pushButtonStart = QtWidgets.QPushButton(self.groupBox_5)
self.pushButtonStart.setObjectName("pushButtonStart")
self.horizontalLayout_5.addWidget(self.pushButtonStart)
self.pushButtonStop = QtWidgets.QPushButton(self.groupBox_5)
self.pushButtonStop.setObjectName("pushButtonStop")
self.horizontalLayout_5.addWidget(self.pushButtonStop)
self.verticalLayout.addWidget(self.groupBox_5)
self.retranslateUi(Form)
QtCore.QMetaObject.connectSlotsByName(Form)
def retranslateUi(self, Form):
_translate = QtCore.QCoreApplication.translate
Form.setWindowTitle(_translate("Form", "图片轮播动画"))
self.groupBox.setTitle(_translate("Form", "动画速度"))
self.groupBox_2.setTitle(_translate("Form", "动画方向(默认是横向)"))
self.radioButtonHor.setText(_translate("Form", "横向"))
self.radioButtonVer.setText(_translate("Form", "纵向"))
self.groupBox_3.setTitle(_translate("Form", "动画曲线类型"))
self.groupBox_4.setTitle(_translate("Form", "翻页"))
self.pushButtonPrev.setText(_translate("Form", "上一页"))
self.pushButtonNext.setText(_translate("Form", "下一页"))
self.groupBox_5.setTitle(_translate("Form", "轮播"))
self.pushButtonStart.setText(_translate("Form", "轮播开始"))
self.pushButtonStop.setText(_translate("Form", "轮播停止"))
from SlidingStackedWidget import SlidingStackedWidget
if __name__ == "__main__":
import sys
app = QtWidgets.QApplication(sys.argv)
Form = QtWidgets.QWidget()
ui = Ui_Form()
ui.setupUi(Form)
Form.show()
sys.exit(app.exec_())

Binary file not shown.