aboutsummaryrefslogtreecommitdiffstats
path: root/README.md
diff options
context:
space:
mode:
authorUlrich-Matthias Schäfer <ulima.ums@googlemail.com>2016-03-25 00:27:11 +0100
committerUlrich-Matthias Schäfer <ulima.ums@googlemail.com>2016-03-25 00:27:11 +0100
commit4436ca0784a0422facfc0fdfae0febe74d1c1247 (patch)
tree90c16a6840ce9a4435ffe8f47daffb9747d0b068 /README.md
parent3af6480ec315bbbd895e6b77e232661ac113c3ff (diff)
downloadsvg.js-4436ca0784a0422facfc0fdfae0febe74d1c1247.tar.gz
svg.js-4436ca0784a0422facfc0fdfae0febe74d1c1247.zip
Update Readme, still not done
Diffstat (limited to 'README.md')
-rw-r--r--README.md70
1 files changed, 40 insertions, 30 deletions
diff --git a/README.md b/README.md
index caf09be..bdb05b5 100644
--- a/README.md
+++ b/README.md
@@ -2031,8 +2031,32 @@ rect.animate({ ease: '<', delay: '1.5s' }).attr({ fill: '#f03' })
By default `duration` will be set to `1000`, `ease` will be set to `<>`.
+You can chain multiple animations together by calling `animate` again:
+
+```javascript
+rect.animate({ ease: '<', delay: '1.5s' }).attr({ fill: '#f03' }).animate().dmove(50,50)
+```
+
__`returns`: `SVG.FX`__
+### delay()
+Alternatively you can call `delay()` which will set an delay in ms before the next animation in the queue is run
+
+```javascript
+rect.animate({ ease: '<', delay: '1.5s' }).attr({ fill: '#f03' }).delay(500).animate().dmove(50,50)
+```
+
+### queue()
+If you want to call a custom funtion between two chained animations, you simply can queue them up:
+
+```javascript
+rect.animate({ ease: '<', delay: '1.5s' }).attr({ fill: '#f03' }).queue(function(){
+
+ this.target().fill('#000')
+ this.dequeue() // dont forget to call dequeue when the queue should continue running
+
+}).animate().dmove(50,50)
+```
### pause()
Pausing an animations is fairly straightforward:
@@ -2057,32 +2081,33 @@ rect.mouseout(function() { this.play() })
__`returns`: `itself`__
### stop()
-Animations can be stopped in two ways.
+If you just want to stop an animation you can call the `stop()` method which has two optional arguments:
+
+ - jumpToEnd: Sets the values to the end of the animation
+ - clearQueue: Remove all items from queue
-By calling the `stop()` method:
```javascript
rect.animate().move(200, 200)
rect.stop()
+// or e.g.
+rect.stop(true)
```
-Or by invoking another animation:
-```javascript
-rect.animate().move(200, 200)
+Stopping an animation is irreversable.
+
+__`returns`: `itself`__
-rect.animate().center(200, 200)
-```
-By calling `stop()`, the transition is left at its current position. By passing `true` as the first argument to `stop()`, the animation will be fulfilled instantly:
+### finish()
+This method finishes the whole animation chain. All values are set to their corresponding end values and every situation gets fullfilled
```javascript
-rect.animate().move(200, 200)
+rect.animate().move(200, 200).animate().dmove(50,50).size(300,400)
-rect.stop(true)
+rect.finish() // rect at 250,250 with size 300,400
```
-Stopping an animation is irreversable.
-
__`returns`: `itself`__
### during()
@@ -2093,28 +2118,13 @@ var position
, from = 100
, to = 300
-rect.animate(3000).move(100, 100).during(function(pos) {
+rect.animate(3000).move(100, 100).during(function(pos, eased, situation) {
position = from + (to - from) * pos
})
```
Note that `pos` is `0` in the beginning of the animation and `1` at the end of the animation.
-
-To make things easier a morphing function is passed as the second argument. This function accepts a `from` and `to` value as the first and second argument and they can be a number, unit or hex color:
-
-```javascript
-var ellipse = draw.ellipse(100, 100).attr('cx', '20%').fill('#333')
-
-rect.animate(3000).move(100, 100).during(function(pos, morph) {
- // numeric values
- ellipse.size(morph(100, 200), morph(100, 50))
-
- // unit strings
- ellipse.attr('cx', morph('20%', '80%'))
-
- // hex color strings
- ellipse.fill(morph('#333', '#ff0066'))
-})
-```
+The `eased` parameter contains the position after the easing function was applied.
+The last parameter holds the current situation related to that `during` call
__`returns`: `SVG.FX`__