有时候qt中的弹窗提示有点烦,要点来点去的,于是就去网上搜索了一下能不能用什么动画来过渡一下类似滑动窗口之类的,如下所示,自己修改了一下添加到了项目中,主要就是下面部分的代码了。
/**********************************************************
file name: MyAnimaltion.qml
Dsecription: 动画窗口,用于提示一些信息
Author:WXH
***********************************************************/
import QtQuick 2.0
import QtGraphicalEffects 1.0
Rectangle {
id: root
width: 300
height: 40
color: "#b0c4de"
border.color: "red"
border.width: 1
/*添加渐变*/
gradient: Gradient {
GradientStop { position: 0.0; color: "lightsteelblue" }
GradientStop { position: 1.0; color: "black" }
}
//界面显示切换响应函数
onVisibleChanged:
{
if(visible)
timer.start();
}
/******************************************************************************
Function: setInfo(info)
Description: 设置动画的提示文本
Input: info-文本内容
Output: 无
******************************************************************************/
function setInfo(info)
{
target_text.text=info;
}
/******************************************************************************
Function: setPosition(x,y)
Description: 设置动画的位置
Input: x-x方向,y-y方向
Output: 无
******************************************************************************/
function setPosition(x,y)
{
root.x=x;
root.y=y;
}
/******************************************************************************
Function: setWidth(width)
Description:设置动画宽度
Input: width-宽度
Output: 无
******************************************************************************/
function setWidth(width)
{
root.width=width;
}
/*提示文本框*/
Text {
id: target_text
height: root.height
width:root.width
horizontalAlignment: Text.Center
verticalAlignment: Text.Center
antialiasing: true
style: Text.Outline
font.pixelSize: 22
color: "white"
font.family: "微软雅黑"
text: "提示信息"
}
//动画效果,用于制作收缩的画面
NumberAnimation {
id: animIn
running: false
target: root;
property: "x";
from:root.width;
to:-root.width;
duration: 700;
easing.type: Easing.InOutExpo;
//Easing.InOutQuad; Easing.InOutCubic
//loops: Animation.Infinite //Easing.InOutQuart;
}
//动画效果,用于制作展开的画面
NumberAnimation {
id: animiOut
running: false
target: root;
property: "x";
from:-root.width;
to: root.width;
duration: 700;
easing.type: Easing.InOutExpo;
//Easing.InOutQuad; Easing.InOutCubic
//loops: Animation.Infinite //Easing.InOutQuart;
}
//连接组件,设置靶向目标为动画收缩
Connections {
target: animIn
onStopped: {
//完成一次动画后隐藏该窗口
root.visible=!root.visible;
}
}
//连接组件,设置靶向目标为动画展开
Connections {
target: animiOut
onStopped: {
}
}
//设置定时器,用于定时动画的收缩和收放
Timer{
//定时器中的成员变量控制动画展开一次和收缩一次。
property bool is_first: true
id: timer
interval: 1000 //间隔时间
repeat: true //不重复
triggeredOnStart: true //在启动时立即触发
onTriggered:{
//展开后收缩并停止计时器
if(!is_first)
{
animIn.running=true;
is_first=true;
timer.stop();
}
//第一次展开
else
{
animiOut.running=true;
is_first=false;
}
}
}
}
//main.qml
//导入你myanimaltion所在的文件夹,我这里放在Mycontrols下,同级目录可不导入
import "../MyControls"
import QtQuick 2.12
import QtQuick.Controls 2.12
import QtQuick.Layouts 1.12
Rectangle {
id: setupRobot_Tool_Recolib
width: 790
height: 395
border.color: "black"
border.width: 1
/*添加动画效果类*/
MyAnimaltion{
id:my_animal
visible: false
z:parent.z+2
}
//..调用显示
MyButton{
id:saveAs_file
text: qsTr("动画显示")
onClicked: {
if(!my_animal.visible)
{
//设置动画属性并弹出
my_animal.setInfo("文件保存成功");
my_animal.setPosition(0,200);
my_animal.visible=true;
}
}
}