动画触发

最新推荐文章于 2023-02-10 18:10:58 发布

TemetNosce

最新推荐文章于 2023-02-10 18:10:58 发布

阅读量395

点赞数 1

分类专栏： QML 状态-过渡-动画

本文链接：https://blog.csdn.net/TemetNosce/article/details/69788440

版权

QML 状态-过渡-动画专栏收录该内容

10 篇文章 0 订阅

订阅专栏

单独使用

  Rectangle {
      id: flashingblob
      width: 75; height: 75
      color: "blue"
      opacity: 1.0

      MouseArea {
          anchors.fill: parent
          onClicked: {
              animateColor.start()//开始动画
              animateOpacity.start()
          }
      }

      PropertyAnimation {
     id: animateColor; 
     properties: "color"; 
     to: "green"; 
     duration: 100
      }

      NumberAnimation {
          id: animateOpacity
          target: flashingblob
          properties: "opacity"
          from: 0.99
          to: 1.0
          loops: Animation.Infinite
          easing {type: Easing.OutBack; overshoot: 500}
     }
  }

Animation on 属性

这种方式不需要在设定target 和 property 属性了。
running如果不设置false，则在Item加载完成后动画会立即执行。

import QtQuick 2.0

Rectangle {
    id: rect
    width: 100; height: 100
    color: "red"

    PropertyAnimation on x { to: 100 }
    PropertyAnimation on y { to: 100 }
}

Behavior on 属性

使用一个Behavior为一个属性改变指定一个默认的动画
from和to属性是不需要定义的。

Rectangle {
    width: 75; height: 75; radius: width
    id: ball
    color: "salmon"

    Behavior on x {//第一种写法
        NumberAnimation {
            id: bouncebehavior
            easing {
                type: Easing.OutElastic
                amplitude: 1.0
                period: 0.5
            }
        }
    }
    Behavior on y {//第二种写法
        animation: bouncebehavior
    }
    Behavior {//第三种写法
        ColorAnimation { target: ball; duration: 100 }//需要指定target。
    }
}

在信号处理器中触发动画

import QtQuick 2.4  

Rectangle {  
    id: rect  
    width: 100; height: 100  
    color: "red"  

    MouseArea {  
        anchors.fill: parent  
        //点击事件触发动画事件，不需要设置running属性，当信号触发时动画就启动了
        onClicked: PropertyAnimation{target: rect; properties: "x, y"; to: 50; duration: 500}  
    }  
}

使用过渡

过渡需要配合State状态使用

Rectangle {
    width: 75; height: 75
    id: button
    state: "RELEASED"

    MouseArea {
        anchors.fill: parent
        onPressed: button.state = "PRESSED"
        onReleased: button.state = "RELEASED"
    }

    states: [
        State {
            name: "PRESSED"
            PropertyChanges { target: button; color: "lightblue"}
        },
        State {
            name: "RELEASED"
            PropertyChanges { target: button; color: "lightsteelblue"}
        }
    ]

    transitions: [
        Transition {
            from: "PRESSED"
            to: "RELEASED"
            ColorAnimation { target: button; duration: 100}
        },
        Transition {
            from: "RELEASED"
            to: "PRESSED"
            ColorAnimation { target: button; duration: 100}
        }
    ]
}

在 SequentialAnimation(顺序动画) 或者 ParallelAnimation(并行动画)中

Rectangle {
    id: banner
    width: 150; height: 100; border.color: "black"

    Column {
        anchors.centerIn: parent
        Text {
            id: code
            text: "Code less."
            opacity: 0.01
        }
        Text {
            id: create
            text: "Create more."
            opacity: 0.01
        }
        Text {
            id: deploy
            text: "Deploy everywhere."
            opacity: 0.01
        }
    }

    MouseArea {
        anchors.fill: parent
        onPressed: playbanner.start()
    }

    SequentialAnimation {
        id: playbanner
        running: false
        NumberAnimation { target: code; property: "opacity"; to: 1.0; duration: 200}
        NumberAnimation { target: create; property: "opacity"; to: 1.0; duration: 200}
        NumberAnimation { target: deploy; property: "opacity"; to: 1.0; duration: 200}
    }
}