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

【问题标题】：Way to run animations one after the other一个接一个地运行动画的方法
【发布时间】：2015-07-31 20:58:45
【问题描述】：

如何一个接一个地运行动画？我尝试使用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() }
}

【问题讨论】：

问题是因为在我的代码中我忘记了：onMorphProgressChanged: requestPaint()。感谢您的帮助。

标签： c++ qt canvas qml qtquick2

【解决方案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。

文档也说：

在过渡中定义的动画会自动运行并行，所以可以使用 SequentialAnimation 来封装动画如果这是首选行为，则在转换中。

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

QML SequentialAnimation

【讨论】：