查看完整版本: [-- zhengtianzuo系列-Qml翻转效果 --]

QTCN开发网 -> Qt代码秀 -> zhengtianzuo系列-Qml翻转效果 [打印本页] 登录 -> 注册 -> 回复主题 -> 发表主题

zhengtianzuo 2017-10-28 17:08

zhengtianzuo系列-Qml翻转效果

使用Flipable, 根据状态改变进行翻转动画

```
    Flipable{
        id: flip
        width: 300
        height: 300
        anchors.centerIn: parent

        property bool flipped: false

        front:Image{
            anchors.fill: parent
            source: "qrc:/images/1.jpg"
        }

        back:Image{
            anchors.fill: parent
            source: "qrc:/images/2.jpg"
        }

        transform: Rotation{
            id: rotation
            origin.x: flip.width / 2
            origin.y: flip.height / 2
            axis.x: rx.checked
            axis.y: ry.checked
            axis.z: rz.checked
            angle: 0
        }

        states:State{
            PropertyChanges {
                target: rotation
                angle:180
            }
            when:flip.flipped
        }

        transitions: Transition{
            NumberAnimation{
                target:rotation
                properties: "angle"
                duration:1000
            }
        }
    }
```



需要完整代码请访问 QtQuickExamples


查看完整版本: [-- zhengtianzuo系列-Qml翻转效果 --] [-- top --]



Powered by phpwind v8.7 Code ©2003-2011 phpwind
Gzip disabled