QML实现呼吸动画
时间: 2024-02-16 22:04:26 浏览: 56
基于QML的简单动画
4星 · 用户满意度95%
你可以使用 QML 的动画系统来实现呼吸动画。以下是一个示例代码,可以让一个圆形不断地缩放和放大,从而模拟呼吸的效果:
```
import QtQuick 2.0
Rectangle {
width: 200
height: 200
Circle {
id: circle
x: 100
y: 100
radius: 50
color: "blue"
opacity: 0.5
anchors.centerIn: parent
SequentialAnimation on scale {
loops: Animation.Infinite
PropertyAnimation { to: 1.2; duration: 1000; easing.type: Easing.InOutQuad }
PropertyAnimation { to: 1.0; duration: 1000; easing.type: Easing.InOutQuad }
}
}
}
```
在上面的代码中,我们使用了一个 `Circle` 组件来表示圆形,并通过属性 `scale` 来控制其缩放大小。我们使用 `SequentialAnimation` 组件来串联两个 `PropertyAnimation` 组件,从而实现缩放动画。第一个 `PropertyAnimation` 组件将圆形的缩放比例从 1.0 缩放到 1.2,持续时间为 1000 毫秒,使用了 `Easing.InOutQuad` 缓动函数。第二个 `PropertyAnimation` 组件将圆形的缩放比例从 1.2 恢复到 1.0,持续时间同样为 1000 毫秒,并使用了相同的缓动函数。通过将 `loops` 属性设置为 `Animation.Infinite`,我们使得动画可以无限循环播放,从而实现呼吸的效果。
阅读全文