.动画曲线

Question

First take a look:

The cat needs to move to the x in a curve . (see the arrow)

When the cat hits the x, it should stay 10 seconds, and after that the cat should go back to o, again in a curve, and repeat.

I tried it with this code:

function curve() {
    $('#cat').delay(10000).animate({top: '-=20',left: '-=20'}, 500, function() {
        $('#cat').delay(10000).animate({top: '+=20', left: '+=20'}, 500, function() {
            curve();
        });
    });
}

curve();

But the cat is moving like this:

Is there a way to get the cat to move in this kind of curve?

Answer 1

http://tympanus.net/codrops/2010/05/07/stunning-circular-motion-effect/

Found this by googling "jquery radial motion"

Answer 2

You can use easing to achieve that, by doing a compound movement :

function curve () {
    $('#cat').delay(10000).animate({top: "+=20px", left: "+=20px"}, {
      duration: 500, 
      specialEasing: {top: 'easeOutQuad', left: 'easeInQuad'}, 
      complete: function () { 
        $('#cat').animate({top: "-=20px", left: "+=20px"}, {
          duration: 500, 
          specialEasing: {top: 'easeInQuad', left: 'easeOutQuad'},
          complete: function() {
            // repeat the other way around.
          }});
      }
    });
}

It works since jQuery 1.4, according to jQuery docs and the easings mentionned require jQuery UI (but only the Effect Core module). Each .animate() call accounts for a quarter of a full circle path, and the reverse easeInQuad vs. easeOutQuad makes the path looks like a circular path instead of straight to the new position.

Answer 3

A modern answer for 2021. You don't have to use jQuery for this. But I'm assuming you want to. You can use a trendy npm library like popmotion (600k downloads per week) in conjunction with jQuery like so:

// poo.el.animate({top: footerTop - horsePooHeight})

// your imports may vary - I'm using Angular, popmotion focuses more on Vue and React
import { cubicBezier } from 'popmotion'
declare const popmotion: any
const {tween, easing} = popmotion

const fling = cubicBezier(0, .42, 0, 1)
tween({from: 100, to: 200, duration: 400, ease: fling}).start((v) => $(el).css('top', v))
tween({from: 100, to: 300, duration: 400, ease: easing.linear}).start((v) => $(el).css('left', v))

Where el is a jQuery element.

Good news. Its got a whole world more power in terms of easing, allowing curves. Bad news is its a little more complicated but if you can understand the above code you will be fine.

PS I'm not saying popmotion should be used with jQuery. I'm just saying it can be.

PPS Never forget that JESUS loves you :D

PPPS jQuery is fine for simpler animations, but the lack of interest in questions like this and the lack of updated on jQuery animation libs prove that jQuery on its own is dead for more complex animations.