• 2655阅读
  • 0回复

zhengtianzuo系列-Qml翻转效果 [复制链接]

上一主题 下一主题
离线zhengtianzuo
 

只看楼主 倒序阅读 楼主  发表于: 2017-10-28
使用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
博客地址: https://blog.csdn.net/zhengtianzuo06
Github: https://github.com/zhengtianzuo
个人产品: https://github.com/zhengtianzuo/Silk
产品网站: http://www.camelstudio.cn
快速回复
限100 字节
 
上一个 下一个