New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Adding effects to SVG objects: scale, alpha, etc. #97

Closed
olivierkes opened this Issue Jan 28, 2012 · 3 comments

Comments

Projects
None yet
2 participants
@olivierkes

olivierkes commented Jan 28, 2012

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:

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

And at the end of the animate function :

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:

   doEffects: function(step) {
   // this checks if any effect needs to be triggered
       for(n=0; n<this._effects.length; n=n+1){
         if(this._effects[n].hasAttribute("effect")){
        b=this._effects[n].getAttribute("effect").split(";");
        for(k=0; k<b.length;k=k+1){
          a=trim(b[k]).split(" ");
          if(a[0]==this._views[step].getAttribute("id")) {
          //alert(a[0]+" "+a[1]+" "+a[2]+" "+a[3]+" "+a[4]+" "+a[5]);
          this.doEffect(this._effects[n], a[2], a[3], a[4], a[5], 0, a[1]);
          } 
        }
      }
       }
   },

   doEffect: function(object, type, from, to, length, step, delay) {
      // Liste des effets :
    //    * scale id from to duration delay
    //    * alpha id from to duration delay
    //    * display id value(1, 0, block, none)
      if(delay > 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 :)

@olivierkes

This comment has been minimized.

Show comment
Hide comment
@olivierkes

olivierkes Jan 28, 2012

By the way, there's a little demonstration of this at the end of: http://hydromel.ch/sozi/sozi-demo.svg

olivierkes commented Jan 28, 2012

By the way, there's a little demonstration of this at the end of: http://hydromel.ch/sozi/sozi-demo.svg

@senshu

This comment has been minimized.

Show comment
Hide comment
@senshu

senshu Feb 25, 2012

Owner

I guess these effects are still possible.
Or at least I can provide a few extensions to the API to support them.
And of course, API documentation needs to be written.

Have you looked at the proposed hack in this thread: #57 to allow showing/hiding objects?

Owner

senshu commented Feb 25, 2012

I guess these effects are still possible.
Or at least I can provide a few extensions to the API to support them.
And of course, API documentation needs to be written.

Have you looked at the proposed hack in this thread: #57 to allow showing/hiding objects?

@senshu

This comment has been minimized.

Show comment
Hide comment
@senshu

senshu Jun 13, 2015

Owner

As far as I can see, these effects can be achieved using layers. Feel free to reopen this issue if you think it deserves to be considered again.

Owner

senshu commented Jun 13, 2015

As far as I can see, these effects can be achieved using layers. Feel free to reopen this issue if you think it deserves to be considered again.

@senshu senshu closed this Jun 13, 2015

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment