SVG.js动画

您所在的位置：网站首页 › draw的读 › SVG.js动画

SVG.js动画

2023-07-04 08:13| 来源: 网络整理| 查看: 265

Easing

可以使用runner的ease（）方法更改动画的缓和程度。所有可用的ease类型包括：

: ease in and out

: ease out

this.timeline().pause() }) 3）play()

取消时间线的连接：

rect.animate().move(200, 200) rect.mouseover(function() { this.timeline().pause() }) rect.mouseout(function() { this.timeline().play() }) 4）reverse()

在翻转的时间线上播放动画：

// will run from 100,100 to rects initial position // 没有参数时表示初始位置 rect.animate(3000).move(100, 100) rect.timeline().reverse() // sets direction to backwards // 动画倒退 rect.timeline().reverse(true) // sets direction to forwards // 动画前进 rect.timeline().reverse(false) 5）stop()

停止时间线并将时间设置回零：

rect.animate().move(200, 200) rect.timeline().stop() 6）speed()

更改时间线的速度。负速度将反转时间轴：

rect.animate().move(200, 200) rect.timeline().speed(2) 7）time()

设置时间线的当前时间：

rect.animate().move(200, 200) rect.timeline().time(100) 8）seek()

按增量查找时间：

rect.animate().move(200, 200) rect.timeline().seek(100) 9）persist()

设置runner在执行后的默认处理方式。通常删除运行程序以清除内存：

rect.animate().move(200, 200) rect.timeline().persist(100) // persist runner for 100ms more than their end time rect.timeline().persist(true) // never delete runners 10）source()

更改时间线的时间源：

rect.animate().move(200, 200) rect.timeline().source(fn) 11）schedule()

在时间线上安排runner：

var timeline = new SVG.Timeline() var runner = new SVG.Runner() runner.move(100, 100) timeline.schedule(runner, 100, 'now') // runner, delay, when - see animate() 12）unschedule()

取消计划/从时间表中删除runner：

var timeline = new SVG.Timeline() var runner = new SVG.Runner() runner.move(100, 100) timeline.schedule(runner, 100, 'now') timeline.unschedule(runner) // same as runner.unschedule() Controllers

可以使用控制器来控制动画，而不是使用ease()方法。SVG.js带有两个内置控制器。SVG.Spring和SVG.PID。

element.animate(new SVG.Spring(settleTime)).move(200, 200) element.animate(new SVG.PID(p, i, d)).move(200, 200)

正如您可能注意到的，指定的是控制器而不是持续时间，因为只有控制器本身知道动画何时完成。

这就是为什么不可能用控制器编排或反转动画的原因。

Orchestrate Animations

要创建包含多个元素的更大的动画，这些元素都绑定到同一时间线，您可以同时使用SVG.timeline和SVG.Runner：

var timeline = new SVG.Timeline() var rect1 = draw.rect(100, 200) var rect2 = draw.rect(200, 100) rect1.timeline(timeline) rect2.timeline(timeline) rect1.animate(300, 0, 'absolute').move(300, 300) // start at time 0 of timeline rect2.animate(400, 200, 'absolute').move(500, 500) // start at time 200 of timeline 视频讲解

视频讲解

【本文地址】

SVG.js动画

SVG.js动画

今日新闻

推荐新闻