三、实现局部放大动画效果的实例

最新推荐文章于 2024-08-28 15:29:56 发布

rosymoon

最新推荐文章于 2024-08-28 15:29:56 发布

阅读量414

点赞数

文章标签： qml c++

本文链接：https://blog.youkuaiyun.com/zhulicaozhu/article/details/107042450

版权

这篇博客展示了如何在QML中通过MouseArea、transitions和ParallelAnimation创建一个鼠标悬停时局部放大的动画效果。当鼠标进入红色矩形区域，矩形会逐渐放大到300x300，离开时则会平滑地恢复到原始大小100x100，整个动画过程使用Easing.InOutSine缓动函数，时长为2000毫秒。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

关键词：MouseArea，transitions，ParallelAnimation，NumberAnimation
在mail.qml中添加如下代码：
Rectangle {
width: 400
height: 400

      Rectangle {
          id: coloredRect
          width: 100
          height: 100
          anchors.centerIn: parent

color: "red"

          MouseArea {
              id: mouser
              anchors.fill: parent
              hoverEnabled: true
          }

          states: State {
              name: "state"
              when: mouser.containsMouse

              PropertyChanges {
                  target: coloredRect
                  width: 300
              }
              PropertyChanges {
                  target: coloredRect
                  height: 300
              }