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

正反面效果

反面



正面

总结

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