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
            }
        }
    }

    运行效果如下:

  • 相关阅读:
    华为设备SNMP配置
    Linux CP直接覆盖快速操作
    CentOS7快速安装PHP7.0指南
    Linux SSH免密码登录配置
    this的指向
    分页的模块layui
    multer中间件
    ajax实现图片上传
    MVC模式、加密、jsonwebtoken
    mongoose与express
  • 原文地址:https://www.cnblogs.com/SaveDictator/p/8137983.html
Copyright © 2011-2022 走看看