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にすればずっとグルグル出来ます。
・サンプルのパーティクルはおまけ（使い方変わってます）。
/// サンプルの動作動画 ///
・背景にパスのラインがわかりやすいように画像を張っています。
・星が星のマークを移動します。
今まで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
}
}
}
