qml 过渡 动画 转换

过渡：
transitions : list Transition
用于为状态变化添加动画，常与state配套使用，使用from和to来筛选state

  Rectangle {
      id: rect
      width: 100; height: 100
      states: State {
          name: "state1"
          PropertyChanges { target: rect; x: 0 }
      }
      states: State {
          name: "state2"
          PropertyChanges { target: rect; x: 50 }
      }

      transitions: Transition {
      	  from:"state1" to:"state2"
          PropertyAnimation { properties: "x,y"; easing.type: Easing.InOutQuad }
      }
  }

动画：有两种使用方法：
方法一：使用Behavior on x 监听x的变化从而调用动画运行

  Rectangle {
      width: 100; height: 100
      color: "red"
      Behavior on x { PropertyAnimation {} }
      MouseArea { anchors.fill: parent; onClicked: parent.x = 50 }
  }

方法二：通过动画的id，使用start或running启动动画

Rectangle {
      id: theRect
      width: 100; height: 100
      color: "red"
      // this is a standalone animation, it's not running by default
      PropertyAnimation { id: animation;
                          target: theRect;
                          property: "width";
                          to: 30;
                          duration: 500 }
      MouseArea { anchors.fill: parent; onClicked: animation.running = true }
  }

转换：Item自带的属性，
transform : list Transform
常用于复杂的Scale和rotate变换，Transform可以是以下4种

变换时为了更好看，可与动画搭配使用。

Rectangle {
        id:rect
        width: 100; height: 100
        color: "blue"
        rotation:30
        property bool flip
        transform: Rotation { origin.x: 0; origin.y: 100;
            axis.x:1;axis.y:0;axis.z:0; angle:rect.flip?0:360
            Behavior on angle{
                NumberAnimation{
                    duration: 3000
                }
            }
        }
        MouseArea{
            anchors.fill:parent
            onClicked: rect.flip=!rect.flip
        }
        }
    }