QML开发——Animator元素动画

目录

Animator动画优点

效果动图

AnimatorRect.qml

main.qml

---

Animator动画优点

Animator需要QtQuick 2.2以上版本才能支持，在UI界面线程阻塞的情况下仍然能够通过场景图形系统的渲染线程来工作，所以视觉体验更佳！

效果动图

AnimatorRect.qml

import QtQuick 2.7  //至少需要2.2以上的版本才能支持

Rectangle{
    width: 100
    height: 100
    color: "green"
    XAnimator on x{ //水平方向移动的动画
        from: 10
        to: 100
        duration: 10000
        loops: Animation.Infinite
    }
    YAnimator on y{ //垂直方向移动的动画
        from: 10
        to: 100
        duration: 10000
        loops: Animation.Infinite
    }
    ScaleAnimator on scale{ //改变元素尺寸因子,产生于元素尺寸缩放动画
        from: 0.1
        to: 1
        duration: 10000
        loops: Animation.Infinite
    }
    RotationAnimation on rotation{  //改变元素角度,产生旋转效果动画
        from: 0
        to: 360
        duration: 10000
        loops: Animation.Infinite
    }
    OpacityAnimator on opacity{ //改变元素透明度,产生显隐效果
        from: 0
        to: 1
        duration: 10000
        loops: Animation.Infinite
    }
}

main.qml

import QtQuick 2.12
import QtQuick.Window 2.12

Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("Animator元素")
    MouseArea{
        id: mouseArea
        anchors.fill: parent
    }
    AnimatorRect{}
}