QT QML初体验随笔之QQuickView(12)

实现硬币（正反面）翻转动画效果

背景

 QT QML初体验随笔之QQuickView(10)

依赖

Flipable元素

基础编码

• 正反面状态控制
• 旋转轴控制
• 旋转角度的动画效果

import QtQuick 2.0

Flipable {
    id: container;

    // 尺寸
    height: back.height;
    width: back.width;

    signal stateInfoStartFlag(bool start);
    // 属性参数
    property bool flipped: true;    // 快速翻动
    onFlippedChanged: {
        stateInfoStartFlag(!flipped);
    }

    property int xAxis: 0;          // x轴
    property int yAxis: 0;          // y轴
    property int angle: 0;          // 旋转角度

    // 状态
    state: "back";

    // 背景
    Rectangle {
        id: background;

        // 锚布局
        anchors.fill: parent;

        // 元素透明度
        opacity: 0.1;

        // 边界样式
        border.width: 2;
        border.color: "#ff808080";
    }

    // 鼠标区域
    MouseArea {

        // 锚布局
        anchors.fill: parent;

        // 点击
        onClicked: {
            container.flipped = !container.flipped;
        }
    }

    // 转换: 角度旋转
    transform: Rotation {
        id: rotation;

        origin{// 轴心
            x: container.width/2;
            y: container.height/2;
        }

        axis{// 轴
            x: container.xAxis;
            y: container.yAxis;
            z: 0;
        }
    }

    // 状态
    states: [
        State {
            name: "back";

            when: container.flipped;    // 触发条件

            PropertyChanges {
                target: rotation
                angle: container.angle;
            }
        }
    ]

    // 转变：动画
    transitions: Transition {

        NumberAnimation {
            target: rotation;
            property: "angle";
            duration: 1000;

            easing.type: Easing.OutBounce;
            easing.amplitude: 0.5;
        }
    }
}

使用编码

• 正反面嵌入item元素
• 配置旋转角度以及旋转轴

import QtQuick 2.0
import "../Base_1"
import "../Base"

CoinContainer_Kingmei {
    id: coinVew;

    // 父类元素约束
    clip: true;

    // 属性
    property alias stateInfo: stateInfoCtrl;

    // 背面
    back: AnimatedImage {
        id: gif;

        anchors.centerIn: parent;

        source: "Image/Childhood.gif";
    }

    // 正面
    front: StateInfoCtrl_Kingmei {
        id: stateInfoCtrl;

        anchors.centerIn: parent;
    }

    // 旋转角度
    angle: 180;

    // 以y轴作为角度旋转轴
    yAxis: 1;
}

正反面效果

反面

正面

总结

• 换一换旋转角度的动画效果，很有意思
• 自动按原路回退状态特别有意思，非我代码控制，可通过翻转的方向进行判定：如果是我代码控制鼠标点击时是应该按一个方向转动。