纯 JavaScript 动画缓动 [英] Pure JavaScript animation easing

问题描述

几个小时以来，我一直试图找到一个纯 JavaScript 简易实现，但没有找到.那些接近的人没有任何意义.我能找到的只是一堆没有实现的缓动函数.

I've been trying to find a pure JavaScript ease implementation for some hours, but couldn't find any. The ones that came close didn't make any sense. All I could find was bunch of easing functions without implementation.

例如，这样的函数:

function linear(time, begin, change, duration) {
    return change * time / duration + begin;
}

function easeInQuad(t) {
    return t*t
},

function easeOutQuad(t) {
    return t*(2-t)
},

困扰我的一件事是 fps 在哪里发挥作用?它与持续时间直接相关.我没有看到提到它.

One of the things that trouble me is where does fps come in to play? It's directly related to the duration. I've seen no mention of it.

我将如何在以下动画中实现上述缓动功能?

How would I implement the above easing functions in the following animation?

JSFiddle

var box = document.getElementById("box");

var fps		= 60;
var duration	= 2; // seconds
var start	= 0; // pixel
var finish	= window.innerWidth - box.clientWidth;
var distance	= finish - start;
var increment	= distance / (duration * fps);

var position = start;

function move() {
  position += increment;
  if (position >= finish) {
    clearInterval(handler);
    box.style.left = finish + "px";
    return;
  }
  box.style.left = position + "px";
}

var handler = setInterval(move, 1000 / fps);

body {
  background: gainsboro;
}
#box {
  width: 100px;
  height: 100px;
  background: white;
  box-shadow: 1px 1px 1px rgba(0, 0, 0, .2);
  position: absolute;
  left: 0;
}

<div id="box"></div>

推荐答案

您可以使用 time 变量并为每一帧增加它，并使用缓动函数在正确的位置使用您已有的值有.

You could use a time variable and increment it for every frame and use the easing functions for the right position with the values you already have.

• 缓动公式:http://easings.net/
• 描述:什么是缓动函数?

// formula     http://easings.net/
// description https://stackoverflow.com/questions/8316882/what-is-an-easing-function
// x: percent
// t: current time,
// b: beginning value,
// c: change in value,
// d: duration
function easeInOutQuad(x, t, b, c, d) {
    if ((t /= d / 2) < 1) {
        return c / 2 * t * t + b;
    } else {
        return -c / 2 * ((--t) * (t - 2) - 1) + b;
    }
}

function move() {
    //position += increment;
    time += 1 / fps;
    position = easeInOutQuad(time * 100 / duration, time, start, finish, duration);

    if (position >= finish) {
        clearInterval(handler);
        box.style.left = finish + "px";
        return;
    }
    box.style.left = position + "px";
}

var box = document.getElementById("box"),
    fps = 60,
    duration = 2, // seconds
    start = 0, // pixel
    finish = window.innerWidth - box.clientWidth,
    distance = finish - start,
    increment = distance / (duration * fps),
    position = start,
    time = 0,
    handler = setInterval(move, 1000 / fps);

body {
  background: gainsboro;
}
#box {
  width: 100px;
  height: 100px;
  background: white;
  box-shadow: 1px 1px 1px rgba(0, 0, 0, .2);
  position: absolute;
  left: 0;
}

<div id="box"></div>

这篇关于纯 JavaScript 动画缓动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！