Skip to content
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
Closed

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

olivierkes opened this issue Jan 28, 2012 · 3 comments
Labels

Comments

@olivierkes
Copy link

@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
Copy link
Author

@olivierkes 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

@aumouvantsillage
Copy link
Collaborator

@aumouvantsillage aumouvantsillage 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?

@aumouvantsillage
Copy link
Collaborator

@aumouvantsillage aumouvantsillage 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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

None yet
2 participants
You can’t perform that action at this time.