qt qml仿win10 loading 动画

一直觉得win10 的loading动画很好看,昨天试着用qml实现了一下,效果还可以,可惜没有原生的漂亮自然。高手勿喷,欢迎交流。下面上代码:
import QtQuick 2.5
import QtQuick.Window 2.2

Window {
    visible: true
    width: 640
    height: 320
    id: root
    title: qsTr("win10 loading")
    color : "#1086a2"

    Repeater{
        model: 5
        id: repeater
        Rectangle {
            property real radius1: 60
            property real dx: root.width / 2 //圆心坐标
            property real dy: root.height / 2
            property real cx: radius1 * Math.sin(percent*6.283185307179) + dx //各个圆点的实时坐标
            property real cy: radius1 * Math.cos(percent*6.283185307179) + dy
            property real percent: 1
            id: dot
            width: 15
            height: 15
            radius: 100
            color: "white"
            opacity: 0
            x: cx
            y: cy
            SequentialAnimation on percent {
                PauseAnimation { duration: 200 * index }
                loops: Animation.Infinite
                running: true
                ParallelAnimation {
                    NumberAnimation { target: dot; property: "opacity";from: 0;to: 1; duration: 200}
                    NumberAnimation { duration: 200; from: 1+index*0.05; to: 0.75}
                }

                NumberAnimation { duration: 60; from: 0.75; to: 0.7}
                NumberAnimation { duration: 140; from: 0.7; to: 0.65}
                NumberAnimation { duration: 160; from: 0.65; to: 0.6}

                NumberAnimation { duration: 200; from: 0.6;  to: 0.55}
                NumberAnimation { duration: 200; from: 0.55;  to: 0.5}

                NumberAnimation { duration: 200; from: 0.5;  to: 0.45}
                NumberAnimation { duration: 100; from: 0.45;  to: 0.4}
                NumberAnimation { duration: 50; from: 0.4;  to: 0.35}
                NumberAnimation { duration: 30; from: 0.35;  to: 0.3}
                NumberAnimation { duration: 180; from: 0.3;  to: 0}
                NumberAnimation { duration: 200; from: 1;    to: 0.75}

                NumberAnimation { duration: 60; from: 0.75; to: 0.7}
                NumberAnimation { duration: 140; from: 0.7; to: 0.65}
                NumberAnimation { duration: 160; from: 0.65; to: 0.6}

                NumberAnimation { duration: 200; from: 0.6;  to: 0.55}
                NumberAnimation { duration: 200; from: 0.55;  to: 0.5}
                NumberAnimation { duration: 200; from: 0.5;  to: 0.45}
                NumberAnimation { duration: 100; from: 0.45;  to: 0.4}
                NumberAnimation { duration: 50; from: 0.4;  to: 0.35}
                NumberAnimation { duration: 30; from: 0.35;  to: 0.3}
                NumberAnimation { duration: 180; from: 0.3;  to: 0}
                NumberAnimation { target: dot; duration: 50; property: "opacity"; from: 1; to: 0}

                PauseAnimation { duration: (repeater.count - index - 1) * 200}
            }
        }
        }

}

效果图
效果图

  • 7
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值