QML Анимация для перехода цвета снизу вверх - PullRequest
Новая
       19

QML Анимация для перехода цвета снизу вверх

1 голос
/ 20 марта 2019

У меня есть страница входа в QML. Когда пользователь вводит код, у меня есть 4 круга белого цвета, и я хотел бы перейти к синему, заполняя круг снизу вверх.

В общем, я хочу анимировать свойство color, чтобы оно переходило из белого в синий, когда «isNumberInserted» имеет значение true, и просто переместить его обратно в белый цвет без каких-либо переходов, когда пользователь очищает PIN (isNumberInserted = false). 

Rectangle{
    anchors.centerIn: parent;
    width: 100; height: width; radius: width/2
    color: isNumberInserted ? "blue" : "white"
}

Есть идеи? Спасибо!

Обновление :: РЕШЕНИЕ: На основании ответа (спасибо!) Это выглядит так: 

Rectangle{
    id: rect
    anchors.centerIn: parent;
    width: 100; height: width; radius: width/2

    property double fillPosition: !isNumberInserted

    Behavior on fillPosition {
        enabled: !isNumberInserted
        NumberAnimation { duration: 500 }
    }

    gradient: Gradient {
        GradientStop { position: 0.0;                       color: "white" }
        GradientStop { position: rect.fillPosition - 0.001; color: "white" }
        GradientStop { position: rect.fillPosition + 0.001; color: "blue" }
        GradientStop { position: 1.0;                       color: "blue" }
    }
}

1 Ответ

3 голосов
/ 20 марта 2019

Вы можете использовать градиент и свойство для назначения градиента-остановки: 

Rectangle {
    id: rect
    anchors.centerIn: parent

    width: 30
    height: 30
    radius: 15
    color: "yellow"

    property double fillPosition : 0.5
    Behavior on fillPosition { NumberAnimation { duration: 500 } }

    gradient: Gradient {
        GradientStop { position: 0.0; color: "lightsteelblue" }
        GradientStop { position: rect.fillPosition - 0.001; color: "lightsteelblue" }
        GradientStop { position: rect.fillPosition + 0.001; color: "blue" }
        GradientStop { position: 1.0; color: "blue" }
    }
}
...