Si tengo

<div id="curve" style="position:relative; height:100px; width:100px; />

¿Cómo puedo hacer que se mueva en una curva? He buscado en google y todo, pero parece que no puede encontrar otro ejemplo de que iba a llamar a dos funciones a la vez. Este es el tipo de código que me gustaría, pero no funciona:

$('#curve').click(function () {
    $(this).animate(
        { 
            top: 400,
            left = $(this).left() + $(this).left()*$(this).left()
        },
        'slow',
        function() { $(this).animate( { left: 600 }, 'fast' ); }
    );
});

Incluso si ese no es el código correcto, creo que animar sólo toma «destinos» de algo para ir a, por lo que un destino dinámico no creo. Lo que estoy buscando para hacer este trabajo?

EDITAR:: definitivamente, voy a recoger ese plugin, pero también me pregunto por qué este fragmento de código no funciona como yo había esperado.

He aquí otro intento de utilizar un bucle for y el retraso método

$('#curve').click(function () {
    for (var i=0; i<400; i++ )
    {
        $(this).delay(1000);
        $(this).css( { top: i, left: i*1.5 } );
    }
});

Excepto que solo instante se va a esa posición, no hay retraso ni nada. así que si se estaba empezando a [0,0],, tan pronto como haga clic en ella se teletransporta a [400,600]. ¿Por qué no el retraso trabajo?

  • Creo que no hay retraso de la función en jQuery, a menos que usted use delay plugin…
  • api.jquery.com/delay
  • asegúrese de que usted está usando la v1.4+ jQuery
  • Yo estoy usando la v1.4.1
  • Trate de $(this).delay(1000).css( { top: i, left: i*1.5 } );
  • Nada diferente.
  • Bueno, supongo que funciona. Así que en lugar de lo que es un bucle, no la he hecho de forma recursiva. ¿Con qué frecuencia se utiliza la recursividad en JS?
  • Ah fresco. Así que era sólo el +’px’ parte =/. Y que bueno es saber con la recursividad. Gracias por toda la ayuda y ejemplos

InformationsquelleAutor Justen | 2010-02-10

5 Comentarios

  1. 15

    Creo que esta vez, usted tiene que volver a calcular animados de la curva de la parte por parte en js y luego hacerlo moviendo por las pequeñas partes (= que probablemente podría encontrar el plugin O tendrás que hacer todas las matemáticas por sí mismo)

    Editar 2: Previamente se agregó un vínculo fue trasladado=> http://foxparker.wordpress.com/2009/09/22/bezier-curves-and-arcs-in-jquery/. Gracias, Zach.

    Editar 1: esto me intrigó, así que hice un poco de google de investigación – así como yo pensaba: plugin listo para su uso aquí: http://foxparker.wordpress.com/2009/09/22/bezier-curves-and-arcs-in-jquery/

    • Gracias por el enlace. Va a ser muy útil, podría también buscar en mi edición?
    • actualizado enlace: foxparker.wordpress.com/2009/09/22/…
    • Zach, voy a seguir adelante y editar en su respuesta
  2. 16

    La jQuery.ruta del plugin es lo que usted desea:

    Ejemplo: animación a lo largo de un arco

    var arc_params = {
        center: [285,185],  
        radius: 100,    
        start: 30,
        end: 200,
        dir: -1
    };
    
    $("my_elem").animate({path : new $.path.arc(arc_params)});

    Ejemplo: animación a lo largo de una onda sinusoidal

    var SineWave = function() {
        this.css = function(p) {
            var s = Math.sin(p*20);
            var x = 500 - p * 300;
            var y = s * 50 + 150;
            var o = ((s+2)/4+0.1);
            return {top: y + "px", left: x + "px", opacity: o};
        } 
    };
    
    $("my_elem").animate({path : new SineWave});
    • Gracias por el ejemplo de código. +1
    • el jquery.ruta del plugin ya no parece funcionar. Cualquier idea sobre cómo hacer esto?
    • El enlace funciona aún así no estoy seguro de lo que quieres decir.
  3. 11

    Aquí una simple pequeña biblioteca escribí que permite arbitraria cúbicos curvas de Bézier para una trayectoria de animación, e incluso calcula el ángulo de rotación para usted. (La biblioteca no está pulido o documentado, pero que muestra lo fácil que es estar de pie sobre los hombros de SVG DOM incluso cuando usted no tiene SVG elementos en la página.)

    http://phrogz.net/SVG/animation_on_a_curve.html

    ¿Cómo podría animar algo por lo que se sigue una curva?

    Usted puede editar el código y ver la curva/animación cambiar o editar la curva y ver el código de actualización.

    En caso de que mi sitio está abajo, aquí está el código correspondiente para la posteridad:

    function CurveAnimator(from,to,c1,c2){
    this.path = document.createElementNS('http://www.w3.org/2000/svg','path');
    if (!c1) c1 = from;
    if (!c2) c2 = to;
    this.path.setAttribute('d','M'+from.join(',')+'C'+c1.join(',')+' '+c2.join(',')+' '+to.join(','));
    this.updatePath();
    CurveAnimator.lastCreated = this;
    }
    CurveAnimator.prototype.animate = function(duration,callback,delay){
    var curveAnim = this;
    //TODO: Use requestAnimationFrame if a delay isn't passed
    if (!delay) delay = 1/40;
    clearInterval(curveAnim.animTimer);
    var startTime = new Date;
    curveAnim.animTimer = setInterval(function(){
    var elapsed = ((new Date)-startTime)/1000;
    var percent = elapsed/duration;
    if (percent>=1){
    percent = 1;
    clearInterval(curveAnim.animTimer);
    }
    var p1 = curveAnim.pointAt(percent-0.01),
    p2 = curveAnim.pointAt(percent+0.01);
    callback(curveAnim.pointAt(percent),Math.atan2(p2.y-p1.y,p2.x-p1.x)*180/Math.PI);
    },delay*1000);
    };
    CurveAnimator.prototype.stop = function(){
    clearInterval(this.animTimer);
    };
    CurveAnimator.prototype.pointAt = function(percent){
    return this.path.getPointAtLength(this.len*percent);
    };
    CurveAnimator.prototype.updatePath = function(){
    this.len = this.path.getTotalLength();
    };
    CurveAnimator.prototype.setStart = function(x,y){
    var M = this.path.pathSegList.getItem(0);
    M.x = x; M.y = y;
    this.updatePath();
    return this;
    };
    CurveAnimator.prototype.setEnd = function(x,y){
    var C = this.path.pathSegList.getItem(1);
    C.x = x; C.y = y;
    this.updatePath();
    return this;
    };
    CurveAnimator.prototype.setStartDirection = function(x,y){
    var C = this.path.pathSegList.getItem(1);
    C.x1 = x; C.y1 = y;
    this.updatePath();
    return this;
    };
    CurveAnimator.prototype.setEndDirection = function(x,y){
    var C = this.path.pathSegList.getItem(1);
    C.x2 = x; C.y2 = y;
    this.updatePath();
    return this;
    };
    • Estoy confundido: ¿Puede la biblioteca se utiliza para animar a lo largo de una curva definida por bezierCurveTo o ¿es necesario tener un SVG camino?
    • El CurveAnimator constructor como se muestra anteriormente se lleva cuatro puntos y crea un camino simple para usted. Sin embargo, si se establece la .path la propiedad de que el animador SVG camino con una ruta arbitraria (que no tiene que estar en la página), puedes hacer lo que quieras.
  4. 1

    Hay un pequeño script, sólo por la animación que no es en línea recta, llamada pathAnimator

    Es muy muy pequeño y super eficiente. y usted incluso no necesita jQuery 😉

Dejar respuesta

Please enter your comment!
Please enter your name here