Хобрук: Ваш путь к мастерству в программировании

Анимированный индикатор выполнения в QML

Мне нужно создать индикатор выполнения, как показано ниже, с помощью элементов управления QML 2: введите здесь описание изображения

    ProgressBar{
    id:progressBar
    width : parent.width * 0.80
    height:parent.height * 0.05
    anchors.bottom:parent.bottom
    anchors.bottomMargin: (parent.height * 0.03)
    anchors.left:parent.left
    anchors.leftMargin: (parent.width * 0.05)
    value : 0.5

    background: Rectangle {
        color: "#e6e6e6"
        radius: 3
    }

    contentItem: Item {        
        Rectangle {
            width: progressBar.visualPosition * parent.width
            height: parent.height
            radius: 2
            color: "#17a81a"

            gradient: Gradient {
                GradientStop {
                    position: 0.0
                    SequentialAnimation on color {
                        loops: Animation.Infinite
                        ColorAnimation { from: "#14148c"; to: "#0E1533"; duration: 5000 }
                        ColorAnimation { from: "#0E1533"; to: "#14148c"; duration: 5000 }
                    }
                }
                GradientStop {
                    position: 1.0
                    SequentialAnimation on color {
                        loops: Animation.Infinite
                        ColorAnimation { from: "#14aaff"; to: "#437284"; duration: 5000 }
                        ColorAnimation { from: "#437284"; to: "#14aaff"; duration: 5000 }
                    }
                }
            }
        }
    }  
}

Я никогда не использовал анимацию в QML, и я пробовал использовать последовательную анимацию, как указано выше, которая анимирует сверху вниз. Но мне нужно, чтобы он анимировал слева направо.

Может ли кто-нибудь помочь мне достичь этого?

qt qml qtquick2 progress-bar qtquickcontrols2
05.11.2017

  • Что вы уже пробовали? Какой-то код? 05.11.2017
  • @folibis я добавил код, пожалуйста, проверьте, и сейчас я пытаюсь использовать последовательную анимацию. 05.11.2017

Ответы:


1

Что касается меня, я думаю, что это плохая идея перезаписать системное поведение элементов управления. В любом случае, вы можете поиграть с анимированным градиентом. Например:

ProgressBar {
    id: control
    anchors.centerIn: parent
    value: 0
    height: 20
    clip: true
    background: Rectangle {
        implicitWidth: 200
        implicitHeight: 6
        border.color: "#999999"
        radius: 5
    }
    contentItem: Item {
        implicitWidth: 200
        implicitHeight: 4

        Rectangle {
            id: bar
            width: control.visualPosition * parent.width
            height: parent.height
            radius: 5
        }

        LinearGradient {
            anchors.fill: bar
            start: Qt.point(0, 0)
            end: Qt.point(bar.width, 0)
            source: bar
            gradient: Gradient {
                GradientStop { position: 0.0; color: "#17a81a" }
                GradientStop { id: grad; position: 0.5; color: Qt.lighter("#17a81a", 2) }
                GradientStop { position: 1.0; color: "#17a81a" }
            }
            PropertyAnimation {
                target: grad
                property: "position"
                from: 0.1
                to: 0.9
                duration: 1000
                running: true
                loops: Animation.Infinite
            }
        }
        LinearGradient {
            anchors.fill: bar
            start: Qt.point(0, 0)
            end: Qt.point(0, bar.height)
            source: bar
            gradient: Gradient {
                GradientStop { position: 0.0; color: Qt.rgba(0,0,0,0) }
                GradientStop { position: 0.5; color: Qt.rgba(1,1,1,0.3) }
                GradientStop { position: 1.0; color: Qt.rgba(0,0,0,0.05) }
            }
        }
    }
    PropertyAnimation {
        target: control
        property: "value"
        from: 0
        to: 1
        duration: 5000
        running: true
        loops: Animation.Infinite
    }
}
05.11.2017
Новые материалы
HMTL - Многозадачное обучение для решения задач НЛП
Достижение результатов SOTA путем передачи знаний между задачами Область обработки естественного языка включает в себя десятки задач, среди которых машинный перевод, распознавание именованных..
Решения DBA Metrix
DBA Metrix Solutions предоставляет удаленного администратора базы данных (DBA), который несет ответственность за внедрение, обслуживание, настройку, восстановление базы данных, а также другие..
Начало работы с Блум
Обзор и Codelab для генерации текста с помощью Bloom Оглавление Что такое Блум? Некоторые предостережения Настройка среды Скачивание предварительно обученного токенизатора и модели..
Создание кнопочного меню с использованием HTML, CSS и JavaScript
Вы будете создавать кнопочное меню, которое имеет состояние наведения, а также позволяет вам выбирать кнопку при нажатии на нее. Финальный проект можно увидеть в этом Codepen . Шаг 1..
Внедрите OAuth в свои веб-приложения для повышения безопасности
OAuth — это широко распространенный стандарт авторизации, который позволяет приложениям получать доступ к ресурсам от имени пользователя, не раскрывая его пароль. Это позволяет пользователям..
Классы в JavaScript
class является образцом java Script Object. Конструкция «class» позволяет определять классы на основе прототипов с чистым, красивым синтаксисом. // define class Human class Human {..
Как свинг-трейдеры могут использовать ИИ для больших выигрышей
По мере того как все больше и больше профессиональных трейдеров и активных розничных трейдеров узнают о возможностях, которые предоставляет искусственный интеллект и машинное обучение для улучшения..