Не работает простая анимация через YAnimator в QML

Question

xintreaJan. 24, 2018, 12:18 p.m.

Не работает простая анимация через YAnimator в QML

Делаю счетчик на экране, который должен показывать произвольное число. Для отрисовки цифр используется картинка в виде вертикальной ленты, на которой нанесены цифры 0-9. Цифры на счетчике должны отображаться с анимацией прокрутки.

Для дальнейшей доработки счетчика (нужно будет сделать специальную анимацию для перехода через 0 и 9, т.е. счетчик должен будет уметь прокрутиться от 2 до 8 как 2-1-0-9-8, а не как 2-3-4-5-6-7-8) мне нужно знать с какой предыдущей цифры и на какую целевую цифру он прокручивается.

Целевая цифра хранится как свойство targetDigit. С ней проблем нет: она задается внешним кодом.

Предыдущая цифра хранится как свойство previousDigit. Она запоминается в конце анимации прокрутки. Но есть проблема: как только я в конец анимации прокрутки вставляю код, который как раз и запоминает предыдущее значение:

previousDigit=targetDigit

... то сразу анимация перестает работать. То есть, числа не «прокручиваются», а просто устанавливаются в нужное значение.

Вот весь код:

Image {
    id: ribbon
    source: "qrc:/resource/pic/digits/timeDigitRibbon.png"

    // Вертикальные смещения в пикселях
    property double hDelta: -478.0 // Смещение картинки по высоте чтобы при значении 0 картинка нуля была в окошке индикатора
    property double hStep: 53.5    // Шаг между изображением цифр

    // Число, на которое должна переключиться лента
    property int targetDigit: 0

    // Предыдущее число, которое показывала лента
    property int previousDigit: 0


    // Анимация от цифры к цифре
    YAnimator {
        id: directAnimation

        target: ribbon;
        from: hDelta+(previousDigit*hStep);
        to:   hDelta+(targetDigit*hStep);
        duration: 100

        onRunningChanged: {
            if(running==true) {
                console.log( "Start animation digit from: "+previousDigit+" to: "+targetDigit+" (YAnimator from:"+from+" to: "+to+")" )
            }

            if(running==false) {
                previousDigit=targetDigit // <----- Это проблемный код
                console.log( "Stop animation. Set previous: "+previousDigit )
            }
        }

        onFromChanged: {
            console.log("From changed: "+from)
        }

        onToChanged: {
            console.log("To changed: "+to)
        }

    }


    onTargetDigitChanged: {
        console.log(" ")
        console.log("Target digit new: "+targetDigit+" , previous: "+previousDigit)

        directAnimation.start()
    }
}

В логе я вижу следующее:

Target digit new: 5 , previous: 4
Start animation digit from: 4 to: 5 (YAnimator from:-264 to: -264)
To changed: -210.5
From changed: -210.5
Stop animation. Set previous: 5
 
Target digit new: 6 , previous: 5
Start animation digit from: 5 to: 6 (YAnimator from:-210.5 to: -210.5)
To changed: -157
From changed: -157
Stop animation. Set previous: 6
 
Target digit new: 7 , previous: 6
Start animation digit from: 6 to: 7 (YAnimator from:-157 to: -157)
To changed: -103.5
From changed: -103.5
Stop animation. Set previous: 7

Обратите внимание на длинные строки (Start animation...). Сами цифры там разные: 5 и 4, 6 и 5, 7 и 6. А вот параметры from и to для YAnimator почему-то одинаковые, несмотря на то, что from зависит от previousDigit, а to зависит от targetDigit, и они должы быть разными:

        from: hDelta+(previousDigit*hStep);
        to:   hDelta+(targetDigit*hStep);

Я грешил на то, что тут как-то некорретно работает property bindings, потому что свойство previousDigit меняется внутри JavaScript:

http://doc.qt.io/qt-5/qtqml-syntax-propertybinding.html#creating-property-bin...

И я попробовал вместо проблемной строки написать:

previousDigit=Qt.binding( function() {return targetDigit; } )

Но это никакого эффекта не дало.

Сейчас мне нужно сделать две вещи:
- научиться запоминать previousDigit. Если текущий способ не подходит, может быть есть какой-то другой.
- научиться запускать анимацию с использованием значений previousDigit и targetDigit. Как видно, текущий способ некорректно выставляет свойства from и to.

We recommend hosting TIMEWEB

Stable hosting, on which the social network EVILEG is located. For projects on Django we recommend VDS hosting.

Не работает простая анимация через YAnimator в QML

We recommend hosting TIMEWEB

Comments