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

    运行效果如下:

  • 相关阅读:
    JS对象—对象总结(创建、属性、方法)
    总结30个css选择器
    null、undefined、typeof、instanceof
    Hybrid App 原理解析
    promise与async-await
    你不知道的javascript
    Function.prototype.toString 的使用技巧
    Javascript中的valueOf与toString
    HTML5 Page Visibility
    深入理解css3中 nth-child 和 nth-of-type 的区别
  • 原文地址:https://www.cnblogs.com/SaveDictator/p/8137983.html
Copyright © 2011-2022 走看看