Toolkit:effect
From Surebert wiki
Contents |
Overview
The surebert effects engine lets you create simple css effects that can be applied to sb.elements or elements selected using $(). One of the major uses of this is in Toolkit:Element.prototype.cssTransition. Most of the time that is all you will need. It is also used in Toolkit:sb.browser.scrollTo
Properties
sb.effect instances have the following properties
el
The element to which the effect is being applied. This can be a reference using $ or a dynamically created sb.element.
begin
The value to start the effect at. Should be in integer.
change
The amount to change the value. E.g. positive or negative integer value
duration
The time in milliseconds for the effect to last. This is mostly accurate but timing is slightly off in some browsers.
type
The type of transformation. inQuart is default see Toolkit:effect#Tweens for more info
Methods
onChange
The function that run for each iteration. It has reference to all of the "this" properties of the effect in addition to this.value which is the current value based on begin and change
onStop
a function which fires when the effect is complete
onEnd
a function which fires when the effect is stopped
Examples
To create an effect you must include effects.js
javascript code
sb.include('effect.js');
Simple Font Size Animation
After that you can begin to create your own effects and then apply them to elements. This example script makes the font size of element change drastically from 12 to 22 over 20ms.
javascript code
var myDiv = $('#wrapper'); var myEffect = new sb.effect({ el : myDiv, begin : 12, change : 10, tween : 'inQuart', onChange : function(c){ this.el.style.fontSize = this.value+'px'; }, duration : 20, onEnd : function(){ //do something }, onStop : function(){ //do something } }); myEffect.start(); //remember you can stop it at any point with //myEffect.stop();
Tweens
Tweens Math adapted from http://www.synthesisters.com/hypermail/max-msp/Nov05/34305.html
There are a bunch of different tween methods available to sb.effect instances. Each one makes the animation behave differently in its quest between the begin value and the change value.
Please expirement with the different values and post any findings to the talk page.
inCirc
inCubic
inExpo
inOutCirc
inOutCubic
inOutExpo
inOutQuad
inOutQuart
inOutQuint
inOutSine
inQuad
inQuart
This is the defaultt tween method.
