跑马灯实现

QML > 跑马灯文字跑马灯 SequentialAnimation PropertyAnimation

发布时间 : 2020-08-29 20:12

字数:131 阅读 :

评论:

需求:
效果预览：
代码:
结束

需求:

Gif暂停与播放

效果预览：

在线预览

代码:

import QtQuick 2.0

Rectangle {
    width: 600
    height: 200
    color: "steelblue"

    property int textWidth: 0
    Rectangle{
        id:itemScroll
        width:237
        height:26
        x:200
        y:80
        color: "red"
        clip: true
        Text{
            id:txtInfo
            font.pixelSize: 26
            opacity: 0.7
            text: "进入环岛图标，右侧通行地区的逆时针环岛"
            onWidthChanged: {
                if(width>237){
                    textWidth=txtInfo.width
                    x=0;
                    animScroll.running=true;
                }
                else{
                    animScroll.running=false;x=(((237-width)/2))
                }
            }
        }
        SequentialAnimation{
            id: animScroll
            loops: Animation.Infinite
            PropertyAnimation{ target: txtInfo; property: "x"; from: 0; to: -(textWidth); duration: (textWidth)*10; }
            PropertyAnimation{ target: txtInfo; property: "x"; from: 237; to: 0; duration: (237)*10; }
            onStopped: {
                txtInfo.x = 0
            }
        }
    }
}

结束

转载请注明来源，欢迎对文章中的引用来源进行考证，欢迎指出任何有错误或不够清晰的表达。可以在下面评论区评论，也可以邮件至 2291184112@qq.com