Русскоязычный портал о QML и QtQuick, QmlPortal What the duck

Каталог статей

Главная » Статьи » Обучение QML

QML: Состояния и анимация переходов между ними.
Итак, сделаем пример из статьи "QML компоненты" более динамичным, добавив состояния и переходы между этими состояниями. Мы сделаем, чтобы наш текст, при щелчке по нему, передвигался в нижнюю часть экрана, вращаясь, и становился красным.


QML код:

import QtQuick 1.0

Rectangle {
      id: page
      width: 500; height: 200
      color: "lightgray"

      Text {
          id: helloText
          text: "Hello world!"
          y: 30
          anchors.horizontalCenter: page.horizontalCenter
          font.pointSize: 24; font.bold: true

          MouseArea { id: mouseArea; anchors.fill: parent }

          states: State {
               name: "down"; when: mouseArea.pressed == true
               PropertyChanges { target: helloText; y: 160; rotation: 180; color: "red" }
          }

          transitions: Transition {
               from: ""; to: "down"; reversible: true
               ParallelAnimation {
                     NumberAnimation { properties: "y,rotation"; duration: 500; easing.type:                                           Easing.InOutQuad }
                     ColorAnimation { duration: 500 }
               }
           }
      }

      Grid {
          id: colorPicker
          x: 4; anchors.bottom: page.bottom; anchors.bottomMargin: 4
          rows: 2; columns: 3; spacing: 3

          Cell { cellColor: "red"; onClicked: helloText.color = cellColor }
          Cell { cellColor: "green"; onClicked: helloText.color = cellColor }
          Cell { cellColor: "blue"; onClicked: helloText.color = cellColor }
          Cell { cellColor: "yellow"; onClicked: helloText.color = cellColor }
          Cell { cellColor: "steelblue"; onClicked: helloText.color = cellColor }
          Cell { cellColor: "black"; onClicked: helloText.color = cellColor }
      }
}



Рассмотрим код подробнее:

    states: State {
        name: "down"; when: mouseArea.pressed == true
        PropertyChanges { target: helloText; y: 160; rotation: 180; color: "red" }
    }


Во-первых, мы создаем новое состояние "down" для нашего элемента "text". Это состояние будет активировано, когда пользователь зажмет левую кновку мыши в области MouseArea, и дезактивировано, когда кнопка будет отпущена.

Состояние "down" всключает в себя ряд изменений свойств компонента "text" (некоторые эти свойста были опущены при инициализации компонента и имели значения по умолчанию, принятые в QML). Собственно, мы устанавливаем свойство "y" компонента "text" в 160, "rotation" (вращение) в 180 и "color" (цвет) в red (красный).

     transitions: Transition {
          from: ""; to: "down"; reversible: true
          ParallelAnimation {
              NumberAnimation { properties: "y,rotation"; duration: 500; easing.type: 
                   Easing.InOutQuad }
              ColorAnimation { duration: 500 }
          }
     }


Поскольку мы не хотим, чтобы текст возник внизу немедленно, а переместился плавно, мы добавляем переход (Transition) между нашими двумя состояниями. Свойства "from" и "to" определяют состояния, между которыми будет совержаться переход. В этом случае мы хотим переход от состояния по умолчанию до нашего состояния "down".

Поскольку мы хотим, чтобы тот же самый переход запускался наоборот, изменяясь назад от состояния "down" к состоянию по умолчанию, мы устанавливаем свойство "reversible" в "true". Это эквивалентно описанию этих двух переходов отдельно.

Элемент ParallelAnimation гарантирует, что два типа анимации (NumberAnimation и ColorAnimation) будут выполняться одновременно. Мы могли бы также запускать эти анимации по очереди, друг за другом, используя SequentialAnimation вместо ParallelAnimation.

Исходный код примера:

http://qml.ucoz.com/load/primery_na_qml/primer_k_state_quot_qml_sostojanija_i_animacija_perekhodov_mezhdu_nimi_quot/2-1-0-4





Источник: http://doc.qt.nokia.com/4.7-snapshot/qml-tutorial3.html
Категория: Обучение QML | Добавил: CYAN (11.06.2011) | Автор: CYAN E W
Просмотров: 5736 | Теги: color picker, QtQuick, QML Rectangle, пример QML, QML MouseArea, QML State, QML Transition, QML, QML Text, QML signal | Рейтинг: 5.0/3
Всего комментариев: 0
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]

Категории раздела

Все статьи [0]
Обучение QML [8]
Статьи с базовой информацией о языке QML
Статьи по QML [6]
Статьи по QML
QML для профессионалов [4]
Статьи по QML-темам повышенной сложности
Ссылки на видео [5]
Ссылки на видео с демонстрацией возможностей QML
Ссылки на материалы по QML в интернете [2]
Ссылки на полезные материалы по QML в интернете
Обо всём [1]
Статьи на разные темы, не имеющие отношение к QML и QtQuick

Поиск на сайте

Облако тэгов

kinetic scroll анимация интерфейса кинетик скролл создание интерфейса path view qml видео демонстрация qml QML Component QML Grid Demo QML browser plugin просмотр QML форм QML signal QML Transition базовые типы QML QML Text пример QML экспорт qml из GIMP QML Rectangle color picker QML MouseArea qml export QML State экспорт QML из Photoshop QML QtQuick Web-browser Набор виджетов для QML статьи о QML на русском языке MeegoHarmattan N9/N950 game Sprite Animation GLSL fragment shader Qt Quick 2 Анимация Easing Easing curves Сглаживающие кривые C++ QGraphicsView Q_INVOKABLE Интеграция QML и C++ QML Particle System QtQuick.Particles QML Scene Graph javascript глобальные переменные Qt Mobility QtMultimediaKit map QtMobility.location Debian package Harmattan QtCreator D.U.C.K. H.U.N.T. QML пример

Статистика сайта

Статей: 26
Новостей: 6
Файлов: 10
Форум: 19/46
Коментариев: 6

Посетители

Полезные ресурсы

сайт Российского Qt сообщества The FRUCT program Российская сеть MeeGo пользователей и разработчиков