要素のアニメーション化は、attr() メソッドを使用した要素のアニメーション化と非常に似ています。唯一の違いは、animate() メソッドを含める必要があることです。
アニメーション化()
rect.animate().move(150, 150)
animate() メソッドは 3 つのパラメータを受け入れます。1 つ目は継続時間、2 つ目は遅延、3 つ目は次の場合です。
rect.animate(2000, 1000, 'now').attr({
fill: '#f03' })
あるいは、最初の引数としてオブジェクトを渡し、さらに多くの引数を受け入れることもできます。
rect.animate({
duration: 2000,
delay: 1000,
when: 'now',
swing: true,
times: 5,
wait: 200
}).attr({
fill: '#f03' })
デフォルトでは、継続時間 (duration) は 400、ディレイ (遅延) は 0、時間 (when) は after に設定されます。
when パラメータはアニメーションの開始点を指定します。次の値を指定できます。
- now: この呼び出しの直後にアニメーションを再生します
- 絶対または開始: タイムライン上の絶対時間でアニメーションを実行するようにスケジュールします。
- 相対: 古い開始時間に相対してアニメーションを再生するようにスケジュールします (animate() 呼び出しには役に立ちません)
- last or after: タイムライン上の最後のアニメーションの後にアニメーションを再生します。そうでない場合は、すぐにアニメーションを再生します (「 」を参照)
animate を再度呼び出すことで、複数のアニメーションをチェーンすることができます。
rect.animate().attr({
fill: '#f03' }).animate().dmove(50,50)
アニメーション間に遅延を追加することもできます。
rect.animate().attr({
fill: '#f03' }).delay(200).animate().dmove(50,50)
もちろん、2 番目のアニメーションに遅延を追加することによってもこれを行うことができます。
rect.animate().attr({
fill: '#f03' }).animate({
delay: 200}).dmove(50,50)
SVG.ランナー
animate() メソッドはターゲット要素を返しませんが、SVG のインスタンスを返します。ランナーには、他の要素と同じメソッドと、ランナーを制御するための追加メソッドがあります。
let rect = draw.rect(100, 100)
let runner = rect.animate()
runner.element() // 返回或设置runner绑定到的元素
runner.timeline() // 返回或设置runner计划的时间线
runner.animate() // 用于动画链接。请参见element.animate（）
runner.schedule(timeline, delay, when) // 在timeline上安排runner。如果已设置timeline，则可以跳过
runner.unschedule() // 从timeline中删除runner
runner.loop(times, swing, wait) // 将动画循环“times”次，每次循环之间的时间为“wait”毫秒
runner.queue(runOnceFn, runOnEveryStepFn) // 允许您链接非必要动画的函数
runner.during(fn) // 用于将函数绑定到每个动画步骤
runner.after(fn) // 用于绑定动画完成后执行的函数
runner.time() // 返回或设置runner时间
runner.duration() // 返回runner运行的持续时间
runner.loops() // 让您跳转到runner的特定迭代，例如第4个循环中途的3.5
runner.persist() // 让这位runner永远（真）或在特定时间内坚持在时间线上。通常在执行后删除运行程序以清理内存。
runner.position() // 返回或设置runner的当前位置，忽略等待时间（介于0和1之间）
runner.progress() // 返回或设置runner的当前位置，包括等待时间（介于0和1之间）
runner.step(dt) // 按一定时间步进runner（用于手动步进槽动画）
runner.reset() // 将runner设置回零时间，并使用它设置所有动画
runner.finish() // 使runner逐步进入完成状态
runner.reverse() // 向后执行runner
runner.ease() // 更改动画的缓和程度
runner.active() // 返回或设置runner的活动状态。不执行非活动runner
ランナーは通常、animate を呼び出して作成されます。ただし、要素なしでランナーを作成し、要素を設定することは可能です。
var runner = new SVG.Runner(1000)
runner.move(100, 100)
runner.element(someElement)
// Step animation by 20ms
runner.step(20)
// To animate, we need a timeline on which the runner is run
var timeline = new SVG.Timeline()
timeline.schedule(runner)