Animation

versuch13 · 18. März 2007

Hi, ich habe mir hier eine Version von moo.fx etwas angepasst und gekürzt aus dem Grund dass ich mich in das Thema animieren mit Javascript etwas tiefer einarbeiten möchte. Soweit klappt das auch schon mal ganz gut.

Ok, jetzt möchte ich bei onmouseover über ein Element die Animation starten, und bei onmouseout die Animation zurücklaufen lassen..

Ich habe hier zum besseren Verständnis mal ein kleines Beispiel angefertigt.
Der padding-right Wert soll bei mouseover von 0 auf 100px animiert werden, das
funktioniert auch schon bestens. Bei mouseout, soll dann von 100px auf 0px
zurück animiert werden, das läuft auch schon. Wenn nun allerdings das mouseout
Event einsetzt, wenn sich die Animation erst bei 50px befindet, soll nicht erst
auf 100px gesprungen werden und dann auf 0 runterlaufen, sondern direkt von 50px
auf 0px zurück laufen.

Hier jetzt einfach mal der aktuelle Stand:

gekürzte Form von prototype.js

Javascript:

var Class = {
    create: function() {
        return function() {
            this.init.apply(this, arguments);
        }
    }
};


Object.extend = function(destination, source) {
    for (var property in source) destination[property] = source[property];
    return destination;
};


Function.prototype.bind = function(object) {
    var __method = this;
    return function() {
        return __method.apply(object, arguments);
    }
};


String.prototype.camelize = function(){
    return this.replace(/-\D/gi, function(match){
        return match.charAt(match.length - 1).toUpperCase();
    });
};


String.prototype.trim = function(){
    return this.replace(/^\s+|\s+$/g, '');
}


function $(el) {
    return document.getElementById(el);
}

modifizierte Version von moo.fx

Javascript:

var Effect = new Object();

// Base
Effect.Base = function(){};

Effect.Base.prototype = {
    // standard options setzen und weitere ergänzen
    setOptions: function(options) {
        this.options = {
            duration: 600,
            transition: Effect.sinoidal,
            unit: 'px',
            onComplete: ''
        }
        Object.extend(this.options, options || {});
    },
    
    step: function() {
        var time  = (new Date).getTime();
        if (time >= this.options.duration + this.startTime) {
            this.now = this.to;
            clearInterval (this.timer);
            this.timer = null;
            if (this.options.onComplete) setTimeout(this.options.onComplete.bind(this), 10);
        } else {
            var Tpos = (time - this.startTime) / (this.options.duration);
            this.now = this.options.transition(Tpos) * (this.to-this.from) + this.from;
        }
        this.increase();
    },

    animate: function(from, to) {
        if (this.timer != null) return;
        this.from = from;
        this.to = to;
        this.startTime = (new Date).getTime();
        this.timer = setInterval (this.step.bind(this), 12);
    }
    
}

// Effect.PaddingRight
Effect.PaddingRight = Class.create();
Effect.PaddingRight.prototype = Object.extend(new Effect.Base(), {

    init: function(el, options){
        this.el = $(el);
        this.setOptions(options);
        this.animate(this.options.from, this.options.to);
    },
    // setzen des aktuellen padding wertes
    increase: function(){
        this.el.style.paddingRight = this.now+this.options.unit;
    }

});


// Transition
Effect.sinoidal = function(pos){
    return ((-Math.cos(pos*Math.PI)/2) + 0.5);
    //this transition is from script.aculo.us
}

hier die Datei mit dem Aufruf der Animationen und den zu animierenden Elementen:

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Unbenanntes Dokument</title>
<style type="text/css">
div {
    background:#eee;
    margin:10px 0 0 10px;
    width:500px;
}
</style>
<script type="text/javascript" language="javascript" src="prototype.js"></script>
<script type="text/javascript" language="javascript" src="animation.js"></script>
<script type="text/javascript">
<!--

    window.onload = function() {
        var elements = document.getElementsByTagName('DIV');
        for(var i = 0; i < elements.length; i++) {
            elements[i].onmouseover = function() {
                new Effect.PaddingRight(this.id,{from:0, to:100});
            }
            elements[i].onmouseout = function() {
                new Effect.PaddingRight(this.id,{from:100, to:0});
            }
        }
    }

//-->
</script>
</head>
<body>
    <div id="test1">
        Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt     
        Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt     
        Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt     
        Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt        
    </div>
    <div id="test2">
        Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt     
        Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt     
        Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt     
        Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt        
    </div>
    <div id="test3">
        Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt     
        Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt     
        Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt     
        Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt         
    </div>    
</body>
</html>

So, ich denke mir dass ich irgendwo den aktuellen Stand "this.now" abfragen muss wenn die Animation läuft und neu ausgelöst wird, dann setzt man "this.now" == "this.from".

Allerdings scheitet es leider an der Umsetzung. Ich hänge einfach mal das obige Beispiel an, vielleicht kann sich das ja mal bitte wer ansehen oder hat einen Tip für mich.

Vielen Dank im vorraus.
Gruß

versuch13 · 22. März 2007

So, ich hoffe es ist in Ordnung dass ich den Thread nochmal hochhole. Hat dazu niemand eine Lösung oder nur nen kleinen Ansatz bitte?

Danke. Grüße

Animation

versuch13

Erfahrenes Mitglied

Anhänge

versuch13

Erfahrenes Mitglied

Neue Beiträge