PyQt (PySide) 使用 QML 仿制一个密码框动画

最新推荐文章于 2024-07-30 10:40:55 发布
最新推荐文章于 2024-07-30 10:40:55 发布
阅读量1.3k 收藏 8
点赞数 2
分类专栏： Python GUI 界面开发 文章标签： PyQt PySide QML QML动画 密码框
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Likianta/article/details/105932169
版权

动画效果

来源地址: https://uimovement.com/media/resource_image/image_5213.gif.mp4

下图是我仿制的动画:

在这里插入图片描述

慢动作效果

实现思路

动画的实现

  1. 锁图标由白色变成了黑色. 锁的图标我们可以通过 Image 对象加载. 白色变黑色则通过附加在 Image 上的 ColorOverlay 实现.
  2. 密码由星号变成明文. 为了让变化自然, 我们对星号渐隐, 明文渐入转换.
  3. 白色矩形覆盖填充到整个按钮. 用 QML 来实现是比较简单的, 就是一个属性动画. 我们对白色矩形 (初始时的圆形) 的各个子属性添加属性动画, 指定它末状态的值就能做出来.
  4. 眨眼动画. 这个仔细看不是简单的两张静态图的切换, 我没有找到合适的素材, 所以就用 gif 录制工具把原版的眨眼截取下来了 (如下图所示), 再把 gif 套到一个白色圆形中, 遮掩一下它方正的边缘.

在这里插入图片描述

QML 布局结构

对 QML 的组织采用面向对象的思想. 把每一个组件看作是对象, 组件之间嵌套组合构成了完整的 UI.

Window
    Password
        LockIcon
        PwdText
        EyesBlink

代码及注释

说明

  • 详细的说明以通过注释的形式给出.
  • 代码中的属性和变量命名风格做了自定义, 相关阅读见此 (TODO).
  • 深入了解 QML 对象的使用, 请查阅 Qt 助手工具.

目录结构

demo
|- ui
    |- Main.qml  # 这里是 ui 的主入口.
    |- Password
        |- Main.qml  # 这里是 Password 组件的主入口, 将被加载到 ui/Main.qml 中.
        |            # 下面的 LockIcon.qml, PwdText.qml, EyesBlink.qml 则会被本
        |            # 文件引用.
        |- LockIcon.qml
        |- PwdText.qml
        |- EyesBlink.qml
|- icon
    |- lock-white.png
    |- eyes-blink.gif
|- main.py

代码

// === ui/Main.qml ===
import QtQuick.Window 2.14
import "./Password" as Password

Window {
    color: "#EDEDED"
    visible: true
    width: 1200; height: 600

    Password.Main {
        id: _pwd
        anchors.centerIn: parent
    }
}


// === ui/Password/Main.qml ===
import Qt3D.Animation 2.14  // 动画模块
import QtQuick 2.14

Rectangle {  // ui/Password/Main.qml 是密码框的主体. 在其内引用其他子组件文件.
    id: _root

    // 设置一个深蓝色的长条状的矩形作为密码框的主体.
    color: "#172336"
    radius: 24
    width: 480; height: 80

    // 声明两个自定义的变量.
    property bool p_active: false  // 是否处于激活状态. 默认为 false. 只有当密码框被点击时才会变成 true.
    property int p_duration: 5000  // 动画的时长. 5000ms 的慢动作是为了便于调试时观察; 正式结果将改为 500ms.

    // 定义激活时的状态. 在这里我们只定义了白色遮罩的激活状态 (也就是末状态). 其他组件 (锁, 密码文字, 眼睛) 则在各自的 qml 文件中定义, 不在这里写.
    states: [
        State {
            when: p_active  // 监听 p_active 变量, 当值为 true 时此状态被激发.
            PropertyChanges {  // 定义末状态的属性和值.
                target: _rect_mask  // 目标对象是白色遮罩的 id.
                anchors.margins: 0  // 边距调为 0.
                width: _root.width; height: _root.height; radius: _root.radius  // 宽, 高, 弧度变为根对象的值.
                x: _root.x; y: _root.y  // 坐标 (左上角顶点的坐标) 也变为根对象的值.
            }
        }
    ]

    // 当 states 列表的任意一个状态被激发时, transitions 就会因此产生动画效果.
    transitions: [
        Transition {
            // 我们定义一个数字类型的属性动画. 因为宽, 高, 弧度等值都是数字类型的.
            NumberAnimation {  
                target: _rect_mask
                duration: p_duration  // 动画时长. 就是我们刚才定义的 5000ms.
                easing.type: Easing.OutQuart  // 为了让动画看起来自然, 我们使用非线性插值器. Easing.OutQuart 的效果是开始时快, 结束时非常缓慢, 适合表现飞入视界并获取焦点的效果.
                properties: "anchors.margins,height,radius,width,x,y"  // 指定白色遮罩对象的这些属性发生变化.
            }
        }
    ]

    // 白色遮罩. 始状态是一个圆形, 位于密码框的右侧.
    Rectangle {
        id: _rect_mask

        // 对齐: 对齐到根对象右侧, 边距为 24px, 与根对象垂直居中.
        anchors.margins: 24
        anchors.right: _root.right
        anchors.verticalCenter: _root.verticalCenter
        
        color: "white"
        width: 48; height: 48; radius: 24  // 注意看这里, 当 width == height 且 radius == 1/2 width 时, 矩形就是一个圆形.

        // 绑定点击区域.
        MouseArea {
            anchors.fill: _rect_mask
            onClicked: {
                p_active = true  // 当白色遮罩被点击时, p_active 变为 true. 这时候我们再去看 states. State 的 when 属性会自动监听到这个变化, 并激发这个状态, 从而引起 transitions 动画生效, 整个动画开始发生.
            }
        }
    }

    // 右侧的眨眼动画. 因为这个 gif 是方形的, 所以和白色遮罩叠在一起, 把方形边缘遮住.
    EyesBlink {
        id: _eye
        
        // 这个对齐值是反复调整出来的. 最终要的效果是: 看起来要比白色遮罩小, 不能把方形边缘漏出来, 还要看起来位于其中心.
        anchors.right: _root.right
        anchors.rightMargin: 34
        anchors.top: _lock.top
        anchors.topMargin: 4
        width: 28; height: 28

        // 把根对象的 p_active 绑定到动画播放属性上. 这样点击时才会播放眨眼动作.
        p_active: _root.p_active
        speed: 4  // 注意 EyesBlink 的动画时长不遵循 p_duration, 而是其 gif 文件的时长除以 speed. speed 默认为 1, 这里被我设置成了 4, 为了看起来更快一点.
    }

    // 锁图标的组件. 这里只覆写了锚点, 尺寸和变量属性. 详见 ui/Password/LockIcon.qml.
    LockIcon {
        id: _lock
        anchors.left: _root.left
        anchors.margins: 24
        anchors.verticalCenter: _root.verticalCenter

        p_active: _root.p_active
        p_duration: _root.p_duration

        obj_Image {
            width: 32; height: 32
        }
    }

    // 密码文字的组件. 这里只覆写了锚点和变量属性. 详见 ui/Password/PwdText.qml.
    PwdText {
        anchors.left: _lock.right
        anchors.leftMargin: 12
        anchors.verticalCenter: _root.verticalCenter

        p_active: _root.p_active
        p_duration: _root.p_duration
    }
}


// === ui/Password/LockIcon.qml ===
import QtGraphicalEffects 1.14  // 用于制作 ColorOverlay
import QtQuick 2.14

Item {
    width: _icon.width; height: _icon.height

    property alias obj_Image: _icon  // 将子对象图标暴露给外部. 从而使父级可以引用 (因为我们想在父级定义它的宽度和高度).
    property bool p_active: false  // 激活状态. 默认为 false. 同样被父级定义, 此属性会被绑定到父级的 p_active 属性上.
    property int p_duration: 0  // 动画时长. 同样被父级定义.

    // 透明背景的锁形图标.
    Image {
        id: _icon
        source: "../../icon/lock-white.png"
    }

    // 由于锁图标是白色的, 我们需要在 p_active = true 状态将它变成黑色, 所以使用 ColorOverlay 实现.
    // ColorOverlay 可以覆盖目标对象的颜色, 并且我们还可以对 ColorOverlay 的 color 属性绑定一个过渡动画.
    ColorOverlay {
        id: _overlay
        source: _icon
        anchors.fill: _icon
        //color: "white"
    }

    // 定义默认状态和激活状态的 ColorOverlay.
    states: [
        State {
            name: "defaultState"
            when: !p_active
            PropertyChanges {
                target: _overlay
                color: "white"
            }
        },
        State {
            name: "activeState"
            when: p_active
            PropertyChanges {
                target: _overlay
                color: "black"
            }
        }
    ]

    // 当状态发生变化时, Transition 会被自动触发, 实现动画过程.
    transitions: [
        Transition {
            ColorAnimation {
                target: _overlay
                duration: p_duration
            }
        }
    ]
}


// === ui/Password/PwdText.qml ===
import QtQuick 2.14

Text {
    /* 密码文字存在两种状态:
     *     默认状态: 密文显示. 以星号 (*) 显示, 密文的长度是 12 个星号.
     *     激活状态: 明文显示, 这里用 "<this is the real password>" 简单代替.
     * 动画:
     *     密码文字由不透明转为透明, 再由透明转为不透明. 当完全透明的那一刻, 迅
     *     速将密码文字由密文切换为明文.
     *     简单来说就是密文隐去, 随之明文渐现.
     */
    id: _root

    color: "#585DC5"
    font.pixelSize: 24
    opacity: 1  // 不透明度. 数值从 0.0 到 1.0. (1.0 为完全显示.)
    text: "* ".repeat(p_pwdLength)  // 为了让星号之间空隙大一点, 我夹了空格.

    property bool p_active: false  // 激活状态. 默认为 false. 同样被父级定义, 此属性会被绑定到父级的 p_active 属性上.
    property int p_duration: 0  // 动画时长. 同样被父级定义.
    property int p_pwdLength: 12

    // 我们监听 opacity 属性的变化, 当 opacity 变化时, 此信号会被自动触发.
    onOpacityChanged: {
        // 进入一个判断逻辑: 当完全透明且处于 p_active 状态, 则将 text 变成明文.
        if (opacity == 0 && p_active) {
            text = "<this is the real password>"
        }
    }

    states: [
        State {
            name: "showPwdInPlainText"
            when: p_active
            PropertyChanges {
                target: _root
                opacity: 1
            }
        }
    ]

    transitions: [
        Transition {  // 使用序列动画. 前 20% 时间是渐隐动画, 后 80% 时间是渐入动画.
            SequentialAnimation {
                NumberAnimation {
                    duration: p_duration * 0.2
                    easing.type: Easing.OutQuart
                    properties: "opacity"
                    from: 1; to: 0
                }  // 注意这里不要有逗号.
                NumberAnimation {
                    duration: p_duration * 0.8
                    easing.type: Easing.OutQuart
                    properties: "opacity"
                    from: 0; to: 1
                }
            }
        }
    ]
}


// === ui/Password/EyesBlink.qml ===
import QtQuick 2.14

AnimatedImage {  // AnimatedImage 对象专用于加载可动的图像. 详见 Qt 助手 QML > AnimatedImage.
    id: _img
    playing: p_active  // 初始化载入时, gif 动画设为暂停状态.
    source: "../../icon/eyes-blink.gif"
    
    property bool p_active: false  // 激活状态. 默认为 false. 同样被父级定义, 此属性会被绑定到父级的 p_active 属性上.

    // 当 AnimatedImage 播放时, 其 currentFrame 会发生变化, 此信号的内置监听方法 onCurrentFrameChanged 会被自动触发.
    // 我们判断当 currentFrame 播放到最后一帧时, 停止动画, 以免陷入循环播放.
    onCurrentFrameChanged: {
        if (currentFrame == frameCount - 1) {  // 因为 currentFrame 是从 0 开始数的, 所以这里要减一.
            playing = false
            // paused = true
        }
    }
}

最后是 main.py 代码:

# === main.py ===
from PySide2.QtQml import QQmlApplicationEngine
from PySide2.QtWidgets import QApplication

app = QApplication()
engine = QQmlApplicationEngine('./ui/Main.qml')
app.exec_()

源码及附件

源码及图标文件以打包, 下载链接见此: https://lanzous.com/ica5cla

Likianta Me
关注
专栏目录
python安装pyqt5 qml_使用PyQt5中的QML
weixin_32272937的博客
02-10 909
我试图用PyQt5和QML编写一个程序。在QML部分(主窗口)：import QtQuick 2.2import QtQuick.Window 2.1import QtQuick.Controls 1.2import QtQuick.Dialogs 1.1import QtQuick.Layouts 1.0import QtQuick.Controls.Styles 1.4ApplicationW...
qml调用python_pyside2qml如何引用另一个QML文件中的QML文件作为组件？
weixin_39752880的博客
12-16 559
我在同一个文件夹里有3个文件：在表单.py在from __future__ import print_functionimport sys, osfrom PySide2.QtCore import QFile, QObject, QUrlfrom PySide2.QtGui import QGuiApplicationfrom PySide2.QtQuick import QQuickViewi...
PyQt (PySide) 与 QML 互操作 - PyQt, QML ListView, model, QAbstractListModel
Likianta 的博客
04-28 3709
需求描述 我们需要通过 Python 操作 QML 对象, 使 QML 的 ListView 对象动态地加载元素. 实现 初始化 假设目录结构为: demo |- main.py |- MyItem.qml # 用于 view.qml 的列表元素. 注意文件名首字母必须大写, 否则 QML 导入机制不能引用. |- view.qml 最初的代码长这样: // === view.qml === ...
pyside6 描述QML高级特性的 example
邹九的个人博客
07-30 909
上面的example都是显式赋值属性变量的，host属性被赋值到Boy，guests属性被赋值到类的列表（Boy和Girl），还可以使得这种使用方式更加简便，不需要对guests属性显式地初始化，直接将Boy和Girl加入到part类中，隐式的将它们赋值给guests属性，也就是默认加入到guests属性中，没有指定属性的变量都默认看作是guests属性列表中的一个项。qml文件还可以初始化类中的类，也就是类中的变量本身是类，或者类的列表。只需要初始化 boy和girl，这两个都是Person的派生类。
【PySide6】QML 与 Python 交互
MYLK的博客
05-20 423
在QML中直接调用Python定义的类和函数
PyQt5 密码输入框
十三
04-25 9117
大栗子 实现了三种密码输入框的方式： 1.输入的密码不可见； 2.输入的密码可见，但是鼠标点击其他控件后，密码不可见； 3.输入的密码不可见，同时为了更加的安全，屏蔽了鼠标右键、禁用复制、粘贴快捷键、鼠标在密码框中不可移动，不可全选。就类似我们在输入QQ密码的时候一样。 PasswdDialog """ 其实大家从这段代码中我们可以看出，本质上就是QDialog的继承，加上自己...
python qt信号在qml 的使用_Python是否适合QML(Qt-Quick)？
weixin_39797532的博客
12-05 262
在概念层面上，他们一起走好。我写了一个python / qml / js / opengl程序，结合了一切相当不错。那是与Qt4.7和PySide。如果您只是使用QML，则可以将您需要暴露的Qt的数量最小化(尽管如此，一如以往，更多知识将使您更加强大)。基本上，一旦你有一个qdeclarativeview，你的Qt工作是完全不同于信号/插槽处理，这是PySide的一个喜悦。我建议您可以快速使用Py...
pyQt5-QML-examples:使用 PyQt5 为 QML 工作的 Python 后端示例
06-28
PyQt5是Python编程语言的一个库，它提供了一种在Python中使用Qt框架的方法。Qt是一个跨平台的应用程序开发框架，广泛用于创建图形用户界面（GUI）以及非GUI应用程序。PyQt5是Qt与Python结合的桥梁，允许开发者利用...
PySide6 Python+QML例程.zip
09-02
PySide6是Python中的一个库，它为开发者提供了与Qt库的接口，使得Python程序员能够利用Qt的强大功能，包括创建图形用户界面（GUI）和使用QML（Qt Meta Language）。Qt是一个跨平台的C++框架，广泛应用于桌面、移动...
pyqt pyside 随窗口自适应、可缩放、拖动QLabel
最新发布
09-11
于是小才就去搜索学习，许久后，总结加拓展自己实现了一个 随窗口自适应、可缩放、拖动、画框图片的自定义QLabel类（嘲笑请偷偷）。 以上代码是使用的pyside6实现，pyqt和pyside导入的都差不多，如果使用PyQt5的话...
PYQT5_QML_UI:框架现代UI PYQT5 QML
05-26
PYQT5 QML UI Javad的Framework Modern UI PYQT5 QML示例模块 截屏 材料设计 现代设计 融合设计 想象设计 通用设计 如何更新QML资源 更改QML文件。 更新resources.qrc文件 pyrcc5 resources.qrc -o resfile.py...
PyQt + QML 快速开发GUI入门总结
chunlovenan的专栏
06-09 8933
本文转自：http://www.linuxzen.com/pyqt-qml-kuai-su-kai-fa-guizong-jie.html 最近结束一个使用PyQt+QML开发的项目, 在此对一些经验做出总结分享出来. 结合QML确实可以快速的构建出GUI程序, 但是相关资料太少, 特别是中文资料, 而且坑太多, 特别是和后端PyQt结合的时候有很多莫名奇妙的问题. 这篇文章会总
PyQt5系列教程（12）：构建我们自己的密码输入框
m0_37154839的博客
04-25 2861
PyQt5系列教程（12）：构建我们自己的密码输入框学点编程吧IT网络工程师，微信公众号：学点编程吧​关注他9 人赞了该文章上期我们学习了消息对话框（QMessageBox），这次我们自己构建一个对话框。还记得我们第一次学习输入对话框的时候吗?QInputDialog.getText(self, '修改姓名', '请输入姓名：') 当时我就在想，能不能改成密码输入的框呢，改造后的效果如下：我们实现...
PySide2学习总结（七）Qml教程
sinat_37623490的博客
01-25 5267
基础类型 首先由一个简单的示例来进行QML的基础介绍。 在view.qml编辑代码如下： // 导入Qt附带的内置QML类型（如Rectangle，Image，...） import QtQuick 2.0 // 使用Rectangle类型声明根元素，Rectangle类型是在QML中创建应用程序的基本构建块之一 Rectangle { // id用于标识该元素 id: page ...
pyqt6的qml
邹九的个人博客
08-26 298
QML是可替代的方案，也可以用来create用户的界面，和Widgets相比较的话， 是在phone应用开发的时应运而生的，和Qt Quick模块配合使用，能够在手持设备端支持拖拉拽、动画等操作，QML/Quick内的应用多是动态的应用，QML更多用在手持设备，但桌面端也能使用。是包括了内置好的组件，主要是按钮、标签、盒子以及菜单栏等内容，使用Widget开发的界面，目标是不影响用户的体验，也能自行修改相关的组件属性，像颜色这些的。另一类则是Qt Quick，对手持设备或者触摸设备做了优化；
Python开发QT QML程序
jamescat的博客
03-02 2608
我们知道QML是QT的前端界面框架，实际上QML的后端开发，除了C++之外，还可以用python开发，用Python开发，有两个框架，一个是第三方的PyQT5，另一个是QT的官方的PySide2。这里我们用PySide2为例，介绍一下，说明如何搭建python的开发环境，及开发的程序代码： 安装pyside2(Python的安装，不说明了，教程很多) pip install pyside2 Py...
pyqt入手项目8-构建自己的密码输入框
weixin_45536181的博客
04-30 733
提示：这里可以添加本文要记录的大概内容：提示：以下是本篇文章正文内容，下面案例可供参考提示：这里对文章进行总结：例如：以上就是今天要讲的内容，本文仅仅简单介绍了pandas的使用，而pandas提供了大量能使我们快速便捷地处理数据的函数和方法。a-zA-Z↩︎。
PySide2学习总结（十一）QML布局
sinat_37623490的博客
01-30 2095
QML可以直接设置X与Y坐标的值来进行布局，但这种做法不利于布局的调整和代码的维护，因而更推荐采用定位器、布局管理器以及锚布局来完成QML布局。 QML常用的定位器有：Row, Column, Grid以及Flow；常用布局管理器有RowLayout, ColumnLayout, GridLayout，通常结合Anchor(锚布局)使用。 定位器 Row QML 中的 Row 元素会将其子控件都排...
PyQt5 - 设置密码框（lineEdit）
热门推荐
⚡
06-15 1万+
【Qt-Designer】 #===============================设置密码形式 self.lineEdit_2.setEchoMode(QtWidgets.QLineEdit.Password) #===============================设置密码形式 【效果展示】 ...
使用PyQt4和PySide创建输入对话框
本文档介绍了如何使用Python的PyQt4和PySide库创建输入对话框，通过一个名为`wlab`的第三方模块，提供了一个方便的方式来获取用户输入的多种类型数据，包括整数、浮点数和字符串。这个模块允许用户在GUI界面中同时...
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值