KOMPOOS.NL

roteer - javascript animatie

home » javascripts » image-effects » rotate-animatie.html

voorbeeld van een rotatie-animatie

uitleg animatie procedure

Zelf IE wordt nog in de gelegenheid gesteld om deze procedure vlekkeloos uit te voeren, ondanks dat het wel heel erg veel code "consumeert". Als je het niet nodig vindt om oude en gebrekkige versies van IE te ondersteunen kan je alle code die daar aan gerelateerd is eruit halen (alle m11, m12 etc. en alle sinus en cosinus etc.). Plaats alle componenten op de daarvoor aangewezen plaatsen. Stylesheet in de head-sectie; overige code in de body-sectie (javascript zo laag als mogelijk). Het script valideert op de strenge JSLint-norm.

stylesheet roteer animatie


<style type="text/css">
        #roteer_id{
                position:absolute}
        #positie_roteren{
                position:relative;
                margin:40px 0 0 40px;
                height:140px}
</style>

html code animatie


<div id="positie_roteren">
        <div id="roteer_id"><img src="rotate.jpg" alt="roterend plaatje" width="110" height="110"></div>
</div>

javascript rotate animatie


<script>
/*global clearTimeout: false */
/*global document: false */
/*global onload: true */
/*global setTimeout: false */
var rotatie_snelheid = 30;
var het_aantal_graden = 0,
    rotatie_timer,
    radius_a,
    cosinus_a,
    sinus_a,
    m11,
    m12,
    m21,
    m22,
    rotate_animatie_id,
    graden_naar_radius = Math.PI * 2 / 360;
function animatie_roteer() {
    'use strict';
    if (het_aantal_graden === 359) {
        het_aantal_graden = 0;
    }
    het_aantal_graden = het_aantal_graden + 1;
    radius_a = het_aantal_graden * graden_naar_radius;
    cosinus_a = Math.cos(radius_a);
    sinus_a = Math.sin(radius_a);
    m11 = parseFloat(cosinus_a).toFixed(8);
    m12 = parseFloat(-sinus_a).toFixed(8);
    m21 = parseFloat(sinus_a).toFixed(8);
    m22 = parseFloat(cosinus_a).toFixed(8);
    rotate_animatie_id.style.filter = "progid:DXImageTransform.Microsoft.Matrix(M11=" + m11 + ",M12=" + m12 + ",M21=" + m21 + ",M22=" + m22 + ",sizingMethod='auto expand');";
    document.getElementById('roteer_id').style.webkitTransform = 'rotate(' + het_aantal_graden + 'deg) ';
    document.getElementById('roteer_id').style.MozTransform = 'rotate(' + het_aantal_graden + 'deg) ';
    document.getElementById('roteer_id').style.OTransform = 'rotate(' + het_aantal_graden + 'deg) ';
    rotatie_timer = setTimeout(function () {
        animatie_roteer();
    }, rotatie_snelheid);
}
function roteren() {
    'use strict';
    if (document.getElementById) {
        rotate_animatie_id = document.getElementById("roteer_id");
        animatie_roteer();
    }
}
onload = roteren;
</script>