Question

如何一个接一个地运行动画？我尝试使用SequentialAnimation，我还试图在id内使用多个状态和NumberAnimation重启，但所有状态都失败了。将持续时间延长到更长的值（例如：1000或2000）也不起作用。我搜索了文档内部，但Canvas没有这样的例子（基于类型）。

参考下面的代码（source），有人可以解释它应该如何实施：

import QtQuick 2.0 

Canvas {    
    id: canvas
    width: 256
    height: 256

    property bool arrowFormState: false
    function toggle() { arrowFormState = !arrowFormState }

    property real angle: 0
    property real morphProgress: 0
    states: State {
        when: arrowFormState
        PropertyChanges { angle: 180; target: canvas }
        PropertyChanges { morphProgress: 1; target: canvas }
    }
    transitions: Transition {
        RotationAnimation {
            property: "angle"
            direction: RotationAnimation.Clockwise
            easing.type: Easing.InOutCubic
            duration: 500
        }
        NumberAnimation {
            property: "morphProgress"
            easing.type: Easing.InOutCubic
            duration: 500
        }
    }

    onAngleChanged: requestPaint()
    onMorphProgressChanged: requestPaint()

    renderTarget: Canvas.FramebufferObject
    renderStrategy: Canvas.Cooperative

    onPaint: {
        var ctx = getContext('2d')
        // The context keeps its state between paint calls, reset the transform
        ctx.resetTransform()

        ctx.fillStyle = 'white'
        ctx.fillRect(0, 0, width, height)

        // Rotate from the center
        ctx.translate(width / 2, height / 2)
        ctx.rotate(angle * Math.PI / 180)
        ctx.translate(-width / 2, -height / 2)

        var left = width * 0.25
        var right = width * 0.75
        var vCenter = height * 0.5
        var vDelta = height / 6

        // Use our cubic-interpolated morphProgress to extract
        // other animation parameter values
        function interpolate(first, second, ratio) {
            return first + (second - first) * ratio;
        };
        var vArrowEndDelta = interpolate(vDelta, vDelta * 1.25, morphProgress)
        var vArrowTipDelta = interpolate(vDelta, 0, morphProgress)
        var arrowEndX = interpolate(left, right - vArrowEndDelta, morphProgress)

        ctx.lineCap = "square"
        ctx.lineWidth = vDelta * 0.4
        ctx.strokeStyle = 'black'
        var lineCapAdjustment = interpolate(0, ctx.lineWidth / 2, morphProgress)

        ctx.beginPath()
        ctx.moveTo(arrowEndX, vCenter - vArrowEndDelta)
        ctx.lineTo(right, vCenter - vArrowTipDelta)
        ctx.moveTo(left + lineCapAdjustment, vCenter)
        ctx.lineTo(right - lineCapAdjustment, vCenter)
        ctx.moveTo(arrowEndX, vCenter + vArrowEndDelta)
        ctx.lineTo(right, vCenter + vArrowTipDelta)
        ctx.stroke()
    }
    Timer { repeat: true; running: true; onTriggered: toggle() }
}

Answer 1

它应该像这样工作：

transitions: Transition {
    SequentialAnimation {
       running: true

       RotationAnimation {
            property: "angle"
            direction: RotationAnimation.Clockwise
            easing.type: Easing.InOutCubic
            duration: 500
        }
        NumberAnimation {
            property: "morphProgress"
            easing.type: Easing.InOutCubic
            duration: 500
        }
    }
}

所以第一个是RotationAnimation，第二个是NumberAnimation。

文档也说：

转换中定义的动画会自动运行 parallel，所以SequentialAnimation可用于封装动画在转换中，如果这是首选行为。

所以它应该适合你。如果没有，请发布您尝试的代码以及哪些代码失败。

QML SequentialAnimation

一个接一个地运行动画的方法

1 个答案: