Javascript动画效果（1）

2023年6月10日下午10:30 • JavaScript

针对“Javascript动画效果（1）”这个主题，以下是完整的攻略详解：

前言

在现代Web开发中，动画已成为吸引用户注意力和改善用户体验的重要组成部分之一。Javascript是Web开发中最常用的脚本语言之一，也可以轻松实现各种动画效果。在这篇文章中，我们将探讨如何利用Javascript实现动画效果。

关于动画效果

在Web开发中，实现动画效果最常见的方法是利用CSS属性进行转化、缩放、旋转和位移。但是，CSS属性在某些情况下存在一些限制，比如我们难以直接控制动画的运动轨迹，而这正是Javascript相比CSS更加强大的地方。

Javascript的动画效果可以具有高度的自定义性、可控性和适应性，从而实现更丰富的动画效果。在继续阅读本文之前，我们需要确保自己已经熟悉了Javascript的基本语法和HTML文档结构。

运动轨迹

动画效果最重要的部分之一就是运动轨迹。我们通过控制物体在不同的位置出现的时间，就可以实现不同的轨迹。下面提供两个简单的例子，分别是以椭圆和圆弧作为运动轨迹。

椭圆运动轨迹

示例代码如下：

var speed = 0.01; //控制速度
var xAxis = 200; //椭圆的长轴长度
var yAxis = 100; //椭圆的短轴长度
var x = 0; //水平位置初值
var y = 0; //垂直位置初值

function draw() {
  var canvas = document.getElementById('myCanvas');
  var ctx = canvas.getContext('2d');
  ctx.clearRect(0, 0, canvas.width, canvas.height);

  var angle = 0.01;
  x = Math.cos(angle) * xAxis;
  y = Math.sin(angle) * yAxis;

  ctx.beginPath();
  ctx.arc(x + canvas.width / 2, y + canvas.height / 2, 10, 0, Math.PI * 2, true);
  ctx.closePath();
  ctx.fill();

  angle += speed;
}

setInterval(draw, 10);

在这个例子中，我们通过不断改变angle的值，以实现物体沿着椭圆运动轨迹移动的效果。

圆弧运动轨迹

示例代码如下：

var t = 0;
var r = 60;
var x = r * Math.cos(t);
var y = r * Math.sin(t);

function draw() {
  var canvas = document.getElementById('myCanvas');
  var ctx = canvas.getContext('2d');
  ctx.clearRect(0, 0, canvas.width, canvas.height);

  ctx.beginPath();
  ctx.arc(canvas.width / 2 + x, canvas.height / 2 + y, 10, 0, Math.PI * 2, true);
  ctx.closePath();
  ctx.fill();

  t += 0.1;
  x = r * Math.cos(t);
  y = r * Math.sin(t);
}

setInterval(draw, 10);

在这个例子中，我们通过使用x = r * cos(t)和y = r * sin(t)来计算物体的位置，从而形成圆弧运动轨迹。

补间动画

补间动画是一种常用的动画效果，它可以让元素从一个状态平滑地过渡到另一个状态。这种动画效果在Javascript中非常流行，也极易实现。下面我们将通过两个实例来向您展示如何在Javascript中实现补间动画。

移动效果

示例代码如下：

function move(element, from, to, duration) {
  var start = new Date().getTime();
  var end = start + duration;
  var current = from;
  var delta = to - from;

  function animate() {
    var time = new Date().getTime();
    if (time <= end) {
      var step = Math.sin(Math.PI / 2 * ((time - start) / duration));
      current = from + delta * step;
      element.style.left = current + "px";
      setTimeout(animate, 20);
    }
    else {
      element.style.left = to + "px";
    }
  }

  animate();
}

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

move(box, 0, 300, 2000);

在这个例子中，我们利用动画的时间函数，即调整当前值的线性变化程度，使得元素呈现出平滑移动的效果。其中，Math.sin(Math.PI / 2 * ((time - start) / duration))就是这里的时间函数，它是通过一个正弦曲线来控制当前值的变化。

缩放效果

示例代码如下：

function scale(element, from, to, duration) {
  var start = new Date().getTime();
  var end = start + duration;
  var current = from;
  var delta = to - from;

  function animate() {
    var time = new Date().getTime();
    if (time <= end) {
      var step = Math.sin(Math.PI / 2 * ((time - start) / duration));
      current = from + delta * step;
      element.style.transform = "scale(" + current + ")";
      setTimeout(animate, 20);
    }
    else {
      element.style.transform = "scale(" + to + ")";
    }
  }

  animate();
}

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

scale(box, 1, 2, 2000);

在这个例子中，我们同样利用动画的时间函数，通过调整缩放因子的值，使得元素呈现出平滑缩放的效果。需要注意的是，transform属性需要使用浏览器前缀才能兼容不同的浏览器。