可控制旋转的图像路径动画-优快云博客

本文链接：https://blog.youkuaiyun.com/lqscoke/article/details/1653799

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<HTML><HEAD><TITLE>网页特效|Linkweb.cn/Js|---可以控制旋转的图像</TITLE>
<META http-equiv=Content-Type content="text/html; charset=gb2312">
<META content="MSHTML 6.00.3790.2795" name=GENERATOR></HEAD>
<BODY>
<SCRIPT type=text/javascript>
function Path() {
    this.concat = int_concat;
    this.add = int_add;
    this.rotate = int_rot;

    function int_concat(p) {
        return new PathList(new Array(this, p));
    }

    function int_add(p) {
        return new PathAdd(this, p);
    }

    function int_rot(xc,yc,v) {
        return new RotatePath(this, xc, yc, v);
    }
}

// The following object is used for the concat
function PathList(inPathList) {
    // All path objects must have these 5 methods
    this.x  = 0;    // Retrieves the current x value
    this.y  = 0;
    this.step = int_step;            // Move to next step
    this.reset = int_reset;            // Resets the current position

    // The rest may vary from different path objects

    this.pathList = inPathList;
    this.currentPath = 0;

    function int_step() {
        if (this.currentPath >= this.pathList.length) return false;
        if (this.pathList[this.currentPath].step()) {
            this.x = this.pathList[this.currentPath].x;
            this.y = this.pathList[this.currentPath].y;
        }
        else {
            this.currentPath++;
            if (this.currentPath >= this.pathList.length) return false;
            this.x = this.pathList[this.currentPath].x;
            this.y = this.pathList[this.currentPath].y;
        }
        return true;
    }

    function int_reset() {
        this.currentPath = 0;
        for (var i=0; i<this.pathList.length; i++)
            this.pathList[i].reset();
        this.x = this.pathList[this.currentPath].x;
        this.y = this.pathList[this.currentPath].y;
    }
}

// The following object is used for adding two paths
function PathAdd(p1,p2) {
    // All path objects must have these 5 methods
    this.x  = 0;    // Retrieves the current x value
    this.y  = 0;
    this.step = int_step;            // Move to next step
    this.reset = int_reset;            // Resets the current position

    // The rest may vary from different path objects

    this._p1 = p1;
    this._p2 = p2;

    function int_step() {
        var c1 = this._p1.step();
        var c2 = this._p2.step();

        this.x = this._p1.x + this._p2.x;
        this.y = this._p1.y + this._p2.y;

        return (c1 || c2);
    }

    function int_reset() {
        this._p1.reset();
        this._p2.reset();

        this.x = this._p1.x + this._p2.x;
        this.y = this._p1.y + this._p1.y;
    }
}

function RotatePath(p,xc,yc,v) {
    this.x  = 0;    // Retrieves the current x value
    this.y  = 0;
    this.step = int_step;            // Move to next step
    this.reset = int_reset;            // Resets the current position

    // The rest may vary from different path objects

    this._p = p;
    this._xc = xc;
    this._yc = yc;
    this._v = v;

    function int_step() {
        var c = this._p.step();

        var pol = toPol(this._p.x - this._xc, this._p.y - this._yc);
        var rec = toRec(pol.r, pol.v + toRad(this._v));

        this.x = rec.x + this._xc;
        this.y = rec.y + this._yc;

        return c;
    }

    function int_reset() {
        this._p.reset();
        var pol = toPol(this._p.x - this._xc, this._p.y - this._yc);
        var rec = toRec(pol.r, pol.v + toRad(this._v));

        this.x = rec.x - this._xc;
        this.y = rec.y - this._yc;
    }

    function toPol(x,y) {
        var o = new Object();
        o.r = Math.sqrt(x*x + y*y);
        if (x == 0)
            o.v = Math.PI / 2;
        else
            o.v = Math.atan(y/x);
        if (x < 0)
            o.v = o.v + Math.PI;
        return o;
    }

    function toRec(r,v) {
        var o = new Object();
        o.x = r * Math.cos(v);
        o.y = r * Math.sin(v);
        return o;
    }

    function toRad(deg) {
        return deg*Math.PI/180;
    }
}

PathAdd.prototype    = new Path;
PathList.prototype   = new Path;
RotatePath.prototype = new Path;
</SCRIPT>

<SCRIPT type=text/javascript>
function CirclePath(x, y, _xr, _yr, fromV, toV, n) {
    // All path objects must have these 5 methods
    this.x  = 0;    // Retrieves the current x value
    this.y  = 0;
    this.step = int_step;            // Move to next step
    this.reset = int_reset;

    // The rest may vary from different path objects

    this.steps = n;            // NN work around. NN can't handle local variables!!!
    this.stepsLeft = n;
    this.xp = x;
    this.yp = y;
    this.v = -toRad(fromV);
    this.startV = this.v;
    this.endV = -toRad(toV);
    this.xr = _xr;
    this.yr = _yr;

    this.x = getX(this.xp,this.xr,this.v);
    this.y = getY(this.yp,this.yr,this.v);

    function toRad(deg) {
        return deg*Math.PI/180;
    }

    function getX(xp, xr, v) {
//        alert("xp: " + xp + " xr: " + xr + " v: " + v);
        return xp + xr*Math.cos(v);
    }

    function getY(yp, yr, v) {
        return yp + yr*Math.sin(v);
    }

// Initate steps
    if (this.steps > 0)
        this.deltaV = (this.endV - this.startV)/n;    // work around netscape bug. Netscape couldn't handle this
    else {                                    // as a local variable
        this.deltaV = 0;
        this.x = getX(this.xp,this.xr,this.endV);
        this.y = getY(this.yp,this.yr,this.endV);
    }

    function int_step() {
        if (this.stepsLeft > 0) {
            this.v += this.deltaV;
            this.x = getX(this.xp,this.xr,this.v);
            this.y = getY(this.yp,this.yr,this.v);

            this.stepsLeft--;
            return true;
        }
        return false;
    }

    function int_reset() {
        if (this.steps < 1) {
            this.x = getX(this.xp,this.xr,this.endV);
            this.y = getY(this.yp,this.yr,this.endV);
        }
        else {
            this.v = this.startV;
            this.x = getX(this.xp,this.xr,this.v);
            this.y = getY(this.yp,this.yr,this.v);
            this.stepsLeft = this.steps;
        }
    }
}

CirclePath.prototype = new Path;
</SCRIPT>

<SCRIPT type=text/javascript>
function StraightPath(fromX, fromY, toX, toY, n) {
    // All path objects must have these 5 methods
    this.x  = fromX;    // Retrieves the current x value
    this.y  = fromY;
    this.step = int_step;            // Move to next step
                                    // Returns true if the step was succesfull
                                    // Returns false when the path has been done
    this.reset = int_reset;
    // The rest may vary from different path objects

    this.startX = fromX;
    this.startY = fromY;
    this.endX = toX;
    this.endY = toY;

// Initiate steps
     this.steps = n;
     this.totalSteps = n;
     if (this.totalSteps < 1) {    // No Amimation!
         this.x = this.endX;
         this.y = this.endY;
         this.deltaX = 0;    // NN work around
         this.deltaY = 0;
     }
    else {
         this.deltaX = (this.endX - this.startX) / this.totalSteps;
        this.deltaY = (this.endY - this.startY) / this.totalSteps;
    }

    function int_step() {
        if (this.steps >= 0) {
            this.steps--;
            this.x += this.deltaX;
            this.y += this.deltaY;
        }
        return (this.steps >= 0 );
    }

    function int_reset() {
        if (this.totalSteps < 1) {
            this.steps = 0;
            this.x = this.endX;
            this.y = this.endY;
        }
        else {
            this.steps = this.totalSteps;
            this.x = this.startX;
            this.y = this.startY;
        }
    }
}

StraightPath.prototype = new Path;
</SCRIPT>

<SCRIPT type=text/javascript>
var animIndex = 0;
var animArray = new Array();

function Animator(id, p, period) {
    this.play = int_play;
    this.pause = int_pause;
    this.stop = int_stop;
    this.onanimationdone;
    this.elstyle = null;
    this.path = p;
    this.msec = period;
    this.id = id;

    this.index = animIndex;
    animArray[this.index] = this;
    this.thisString = "animArray[" + this.index + "]";
    animIndex++;

    function int_play() {
        if (this.elstyle == null) {
//            this.elstyle = (document.all != null) ? document.all[this.id].style : document.layers[this.id];
            if (document.all)    // IE4
                this.elstyle = document.all[this.id].style;
            else if (document.getElementById)    // NGLayout
                this.elstyle = document.getElementById(this.id).style;
            else if (document.layers)    // nn4.x
                this.elstyle = document.layers[this.id]
            else
                return;
        }
        if (this.path.step()) {
            this.elstyle.left = this.path.x;
            this.elstyle.top  = this.path.y;
            animArray[this.index].timer = setTimeout(this.thisString + ".play()", this.msec);
        }
        else if (this.onanimationdone != null) {
            if (typeof(this.onanimationdone) == "string")
                eval(this.onanimationdone);
            else if (typeof(this.onanimationdone) == "function")
                this.onanimationdone();
        }
    }

    function int_pause() {
        clearTimeout(animArray[this.index].timer);
    }

    function int_stop() {
        clearTimeout(animArray[this.index].timer);
        this.path.reset();
    }
}
</SCRIPT>
<INPUT onclick=a.play() type=button value=开始> <INPUT onclick=a.pause() type=button value=暂停> <INPUT onclick=a.stop() type=button value=停止>
<DIV id=dot
style="LEFT: 100px; WIDTH: 100px; POSITION: absolute; TOP: 150px; HEIGHT: 100px"><IMG
height=55 alt="" src="网页特效Linkweb_cn-Js---可以控制旋转的图像_files/flag.gif" width=85
border=0></DIV>
<SCRIPT type=text/javascript>

</SCRIPT>
</BODY></HTML>