理ろぐ

Qt Quick2で追加されたPathInterpolatorエレメントと組み合わせて実装します。

今までQMLのPathはいまいち使いどころがわからない機能でしたが多少は使い道が増えたかも？

PathInterpolatorエレメントのpathプロパティに設定したパスの情報にそってx, y, rotationを変化させることができます。
progressプロパティの値を0→1へ変化させて任意の位置を取得できます。

/// ポイント ///
・パスの作成には以下のエレメントを使用します。
　PathLine
　PathQuad
　PathCubic
　PathArc
　PathCurve
　PathSvg
・PathSvgエレメントを使用すると任意の図形にできます。
　その場合、「W3C SVG Path Data」にしたがって記述します。
・Svgデータを手で書くと大変なのでInkscapeなど使用すると便利です。
・PathInterpolatorエレメントのx, yを動かしたいエレメントのx, yにバインドして、progressプロパティをNumberAnimationエレメントで変化させる流れ。
　loopsプロパティをAnimation.Infiniteにすればずっとグルグル出来ます。
・サンプルのパーティクルはおまけ（使い方変わってます）。



/// サンプルの動作動画 ///
・背景にパスのラインがわかりやすいように画像を張っています。
・星が星のマークを移動します。



/// Inkscapeを使用する場合 ///
必要な図形を1筆書きのパスで作成します。
で、保存したファイルをテキストファイルで開いて画像のあたりをコピーして使用します。
こんな感じのところがあるはずなので、Pathタグの中のd=のあたりをコピーします。

<g
   inkscape:groupmode="layer"
   id="layer3"
   inkscape:label="レイヤー#1">
  <path
     id="path3765-7"
     style="fill:none;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
     d="m 58.005825,104.73938 c -25.050059,0 -45.357144, ＜略＞" />
</g>

/// サンプル ///

import QtQuick 2.0
import QtQuick.Particles 2.0

Rectangle {
    width: 400
    height: 400

    //背景の星の絵
    Image{
        x: 15
        y: 15
        width: 365.4  //406
        height: 378     //420
        smooth: true
        source: "star-bg.png"
    }

    //パス上の座標を提供する
    PathInterpolator {
        id: motionPath

        path: Path {
            startX: 0; startY: 0
            PathSvg { path: "M 330.94157,297.86776 210.59323,270.51469 119.83312,354.14791 108.65775,231.23727 1.0714288,170.76336 114.513,122.15348 138.78111,1.1453256 220.06722,94.013396 342.65207,79.700166 279.44808,185.70567 z" }
        }

        NumberAnimation on progress {
            loops: Animation.Infinite
            from: 0
            to: 1
            duration: 5000
        }
    }

    //パスにそって移動する星
    Image {
        id: _star
        width: 50; height: 50
        source: "star.png"

        //パスの座標にバインドする
        x: motionPath.x
        y: motionPath.y
        //パスに沿った向きにもできる
//        rotation: motionPath.angle

        //くるくる回す
        NumberAnimation on rotation {
            loops: Animation.Infinite
            from: 0
            to: 360
            duration: 2000
            easing.type: Easing.InOutQuad
        }
    }

    //パーティクル
    ParticleSystem {
        id: particles
        anchors.fill: _star

        ImageParticle {
            id: bubble
            anchors.fill: parent
            source: "star-s.png"
            opacity: 0.25
        }

        Wander {
            xVariance: 25;
            pace: 25;
        }

        Emitter {
            startTime: 15000

            emitRate: 2
            lifeSpan: 15000

            acceleration: PointDirection{ x: 0; xVariation: 2; yVariation: 2 }

            size: 24
            sizeVariation: 16
        }
    }
}