senshu/Sozi — Issue #97: Adding effects to SVG objects: scale, alpha, etc.
Author: olivierkes
Created: 2012-01-28 11:09:56+00:00
State: open

One feature I miss in sozi is the possibility to add some basics effects to SVG objects.

This allows to make some more dynamic presentation. Like once for kids, I didn't use texts but a drawing, and as the story unfolded, some elements disappeared, were replaced by others, etc.

I used to hack the first version of Sozi to allow that, and this is what I did:

# In SVG

To each SVG object I want to animate, I add two attributes:

> class="effects"
> effect="startframe time effectType attributes"

Different effects can be seperated by ";".
For example, if I want an object to appear over 300ms after 1 sec spent on the view "rect5795", I would add something attribute like:

> class=effects
> effect=rect5795 1000 alpha 0 1 300

# Now, the javascript part was:

Somewhere at the beginning:

```javascript
this._effects = this._contentLayer.getElementsByClassName("effects");
```

And at the end of the animate function :

```javascript
if(step < SOZI_STEPS_SCALE + SOZI_STEPS_TRANSLATE + SOZI_STEPS_ROTATE ) {
var that = this;
window.setTimeout(function() {
that.animate(initialMatrix, finalMatrix, finalView, step+1, isTransient, zoomIn);
}, SOZI_TIME_STEP);
}
else {
this.doEffects(this._step);
if(isTransient) this.moveToNext();
}
```

And then 2 functions:

```javascript
doEffects: function(step) {
// this checks if any effect needs to be triggered
for(n=0; n 0) {
var that = this;
window.setTimeout(function() {
that.doEffect(object, type, from, to, length, step, 0);
}, delay);
}
else if(type=="display"){
if(from=="1") from="block";
if(from=="0") from="none";
object.style.display=from;
}
else{
value = from - (from - to) * step / SOZI_EFFECT_STEP;
if(step == 0) object.style.display = "block";
if(type=="scale" && step == 0) object.setAttribute("tag", object.getAttribute("width") + " " + object.getAttribute("height"));

if(type=="alpha") {
if(value > 1) value = value / 100; //Probably value has been entered in %
object.style.opacity = value;
}

if(type=="scale") {
object.setAttribute("width", object.getAttribute("tag").split(" ")[0]*value);
object.setAttribute("height", object.getAttribute("tag").split(" ")[1]*value);
}

if(step < SOZI_EFFECT_STEP) {
var that = this;
window.setTimeout(function() {
that.doEffect(object, type, from, to, length, step + 1, 0);
}, length / SOZI_EFFECT_STEP);
}
}
},
```

Would anything similar be possible now ?
I looked at the code, but did not understand much…

Thanks :)