Typps Special effects

A few things to note : While the above demo allows you to add animations and execute them in sequential order (you can also execute them in parallel), producing a unique animation by combining different effects, it doesn't allow you to set additional properties on individual effects, instead it's using the defaults. This is very much possible as each effect allows you to set :

1. Transition effect
2. Duration
3. From value in % or pixels
4. To value in % or pixels
5. FPS -frames per second
6. Toggle -whether you want the effect to toggle back when it's re-applied
7. A runmode -this determines whether the effect should run simulataneously or in sequence
8. ... few other properties unique to each effect ( best time to make use of the power of intellisense )

Importantly, you can set all this serverside in designview, declaratively in HTML View, and imperative code. Infact, this control is so simple applying effects couldn't be more fun. A sample fragment of declarative code :

<cc1:Effects ID="Effects1" TargetControl="element1" RunMode="AddNextEffect" runat="server">
        <EffectsList>
            <cc1:Blind Duration="0.5" 
                    Transition="LinearTransition" From="100%" To="0%" />
            <cc1:Slide />
            ...add more effects here declaratively if you prefer
        </EffectsList>
    </cc1:Effects>

You can attempt the same thing imperatively in code like this :

Effects1.EffectsList.Add(new Blind { 
                    Transition = TransitionName.LinearTransition, 
                    Duration = 0.5d, 
                    From = Unit.Parse("100%"), 
                    To = Unit.Parse("0%") 
               });
        Effects1.EffectsList.Add(new Slide());
        //add more if you like and create your unique effect. 
        //fyi, you only need one effect in most cases

Take into consideration that an effect may look nice using a certain transition while using the same algorithm with another effect may have a different perception. For more on the properties and usage read the official documentation provided by adobe. This control is a .net wrapper around the First Class Adobe Spry effects library ( an opensource(BSD) js library developed by Adobe).

Reference : Effects coding clientside and About Spry effects

The reason for a .NET wrapper is because since usage can be overwhelming, it's not exactly intuitive the first time around to a novice js developer. To the more experienced it's simply a bore to have to either remember all the settings or keep writing the same boring mundane code to get an effect the way you would desire it. As a .net wrapper, adding the effects from within the VS.NET enviornment is easier and much faster development wise. You simply don't have to write a single line of js code to achieve any of the effects. The js is automatically generated by this control in the form of a json string describing each effect.

While, this control is a standalone control and has no dependencies on other controls within the Typps, the prime motivation for developing it was for usage with mediaframe to allow you to define your effects easily declaratively or in c# code.

A few more important things you want to note quickly is how this control does not output any rendering markup, but rather a minimum, compact json string. The wrapper itself is no more than 3kb in size. It is intuitive and doesn't make you cringe by overwhelming you with options and settings. Viewstate is optional and also minimum. Infact, most of the viewstate you see in the viewsource of this page is what is used up by the listbox.

Clientside events: We also expose all events fired by each animation. You can register a clientside method to this easily by passing your function name or delegate to the respective OnClientEventName property. Eg : if you were interested in registering for onPreEffect notification which will fire when the effect is about to start the element animation, you may attempt the following :

<cc1:Effects ID="Effects1" OnClientPreEffect="onPreEffect".../>

And subsequently add the js event in your own script eg :

<script type="text/javascript">
        function onPreEffect(eff) { 
            //do something here
        }
    </script>

In a similar fashion you can register for various kinds of notifications such as :

1. onPreEffect
2. onStep
3. onPostEffect
4. onCancel
5. onToggle

Above you are registering to each notification individually. You can also register a single observer function that will fire for all notifications above. eg :

<cc1:Effects ID="Effects1" OnClientObserver="onObserver" .. />

Now your clientside function you just registered above :

function onObserver(notificationType, eff) {
            if(notificationType=='onPreEffect') {
                alert('onPreEffect called !');
            } else if(notificationType=='onStep') {
                alert('onStep called !');
            }
        }

Note how your function takes appropriate action based on the notification type. Simple as eating cake. Reference also Adobe's online demo