qml制作滑动动画提示信息,渐隐效果来过渡显示信息

         有时候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;
            }
       }
 }

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值