zoukankan      html  css  js  c++  java
  • qml----动画入门(三、简单的动画实现 RotationAnimation类)

    上一节中我们说到了Animation的两个子类,分别是对Number和Color处理的类。你以为Animation就这点本事?No,No,No。Animation的子女多着呢,壮丁多就是劳动力呀。看看下面这位---RotationAnimation,一个专门处理rotation和 angle的类。

    这个类和它姊妹们多了一个属性,那就是direction。它可以有多种值,谁是它的世界中心就绕着谁旋转。你问我?哦,我单身,属于陀螺型的

    下面看这个简单的例子

    import QtQuick 2.2
    
    Rectangle{
        id: rootItem
         360
        height: 240
        color: "#EEEEEE"
    
        Rectangle{
            id: rect
             160
            height: 60
            anchors.left: parent.left
            anchors.leftMargin: 20
            anchors.verticalCenter: parent.verticalCenter
            color: "red"
    
            MouseArea{
                anchors.fill: parent
                onClicked: RotationAnimation{
                    target: rect
                    to: 90
                    duration: 1500
                    direction: RotationAnimation.Counterclockwise
                }
            }
        }//red rect is end
    
        Rectangle{
            id: blueRect
             120
            height: 60
            anchors.right: parent.right
            anchors.rightMargin: 40
            anchors.verticalCenter: parent.verticalCenter
            transformOrigin: Item.TopRight
            color: "blue"
    
            MouseArea{
                anchors.fill: parent
                onClicked: animation.start()
            }
    
            RotationAnimation{
                id: animation
                target: blueRect
                to: 60
                duration: 1500
            }
        }
    }

    运行效果如下:

  • 相关阅读:
    基于vite2的react脚手架
    基于react hooks,zarm组件库配置开发h5表单页面
    IDEA远程debug
    test wizdeploy
    使用python完成接口自动化
    测试左移和测试右移
    性能测试监控
    网络基础面试题
    (案例8)java性能定位
    Jmeter分布式测试
  • 原文地址:https://www.cnblogs.com/SaveDictator/p/8137983.html
Copyright © 2011-2022 走看看