原生javascript实现的一个简单动画效果

首先，需要明确什么是动画效果：动画是指将元素从一种状态平滑地转换到另一种状态的过程。在 Web 开发中，我们通常使用动画来提升用户体验，比如当用户鼠标移到一个按钮上时，按钮的背景色逐渐变亮。

原生JavaScript能够自如地控制DOM元素，因此我们可以使用它实现简单的动画效果。具体步骤如下：

1. 设置初始状态和目标状态

首先需要定义元素的初始状态和目标状态。比如，将一个div元素的宽度从100px变成300px，那么初始状态就是width:100px，目标状态就是width:300px。

我们可以通过样式表或者JavaScript来设置元素的初始状态和目标状态。下面是通过JavaScript动态设置初始状态和目标状态的示例代码：

var element = document.getElementById('myElement');
element.style.width = '100px'; // 初始状态
element.style.width = '300px'; // 目标状态

1. 设置动画参数

接下来需要设置动画参数，比如动画的持续时间、缓动函数等。动画的持续时间可以通过CSS的transition属性或者JavaScript的setTimeout/setInterval函数来实现。

下面是通过JavaScript实现缓动动画的示例代码：

function animate(element, property, target, duration, easing) {
  var start = new Date().getTime();
  var end = start + duration;
  var current = parseInt(element.style[property]);
  var distance = target - current;

  function step() {
    var timestamp = new Date().getTime();
    var progress = Math.min((timestamp - start) / duration, 1);
    var value = current + (distance * easing(progress));
    element.style[property] = value + 'px';

    if (progress < 1) {
      requestAnimationFrame(step);
    }
  }

  requestAnimationFrame(step);
}

function easeOutQuad(progress) {
  return -progress * (progress - 2);
}

var element = document.getElementById('myElement');
animate(element, 'width', 300, 1000, easeOutQuad); // 1s缓动动画

在上面的代码中，我们使用了requestAnimationFrame函数来替代setTimeout/setInterval，这样可以获得更好的性能和更准确的动画步长。同时，在step函数中，我们使用缓动函数来控制动画进度，以实现更加自然的过渡效果。

1. 开始动画

最后，我们只需要调用animate函数来开始动画。

var element = document.getElementById('myElement');
animate(element, 'width', 300, 1000, easeOutQuad); // 1s缓动动画

以上是原生JavaScript实现动画效果的具体攻略。下面再给出一个示例说明。

示例1：简单的弹跳动画

<div id="box" style="position: absolute; top: 50%; left: 50%; width: 50px; height: 50px; background-color: red;"></div>

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

function animate(element, property, target, duration, easing) {
  var start = new Date().getTime();
  var end = start + duration;
  var current = parseInt(element.style[property]);
  var distance = target - current;

  function step() {
    var timestamp = new Date().getTime();
    var progress = Math.min((timestamp - start) / duration, 1);
    var value = current + (distance * easing(progress));
    element.style[property] = value + 'px';

    if (progress < 1) {
      requestAnimationFrame(step);
    }
  }

  requestAnimationFrame(step);
}

function easeOutQuad(progress) {
  return -progress * (progress - 2);
}

// 初始状态
box.style.top = '-50px';

// 弹跳动画
animate(box, 'top', 50, 1000, easeOutQuad);

在上面的代码中，我们实现了一个简单的弹跳动画效果。首先将box元素的初始状态设置为top:-50px，然后将目标状态设置为top:50px。最后通过animate函数和easeOutQuad缓动函数完成动画效果。

示例2：旋转动画

<div id="box" style="position: absolute; top: 50%; left: 50%; width: 50px; height: 50px; background-color: red;"></div>

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

function animate(element, property, target, duration, easing) {
  var start = new Date().getTime();
  var end = start + duration;
  var current = parseInt(element.style[property]);
  var distance = target - current;

  function step() {
    var timestamp = new Date().getTime();
    var progress = Math.min((timestamp - start) / duration, 1);
    var value = current + (distance * easing(progress));
    element.style[property] = value + 'px';

    if (progress < 1) {
      requestAnimationFrame(step);
    }
  }

  requestAnimationFrame(step);
}

function easeOutQuad(progress) {
  return -progress * (progress - 2);
}

// 初始状态
box.style.transform = 'rotate(0deg)';

// 旋转动画
animate(box, 'transform', 'rotate(360deg)', 1000, easeOutQuad);

在上面的代码中，我们实现了一个旋转动画效果。首先将box元素的初始状态设置为rotate(0deg)，然后将目标状态设置为rotate(360deg)。最后通过animate函数和easeOutQuad缓动函数完成动画效果。