JS运动特效之同时运动实现方法分析

在JavaScript中，同时运动指的是在同一时间内对一个元素的多个属性进行变换，以实现连续的动画效果。同时运动可以使页面动效更加美观，提升用户体验。本文将详细介绍同时运动的实现方法。

基本思路

同时运动的基本思路是通过定时器对元素的不同属性进行不断的增减，达到动画效果。

实现方法

同时运动的实现方法一般有两种：

1. 多个定时器同时运行

在这种方法中，我们可以为元素需要改变的不同属性分别设置定时器，然后让它们分别执行自己的动画效果。

function move(target){
  clearInterval(obj.timer);
  obj.timer = setInterval(function(){
    var speed = (target - obj.offsetLeft) / 10;
    speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
    if(obj.offsetLeft == target){
      clearInterval(obj.timer);
    }else{
      obj.style.left = obj.offsetLeft + speed + 'px';
    }
  }, 30);
}

//同时改变元素的left和top属性
move(500);
move(300);

2. 单个定时器多个属性运动

在这种方法中，我们可以为元素需要运动的不同属性同时进行操作，每次都改变它们的属性值，实现同时运动的效果。

function move(target){
  clearInterval(obj.timer);
  obj.timer = setInterval(function(){
    var speedX = (target.left - obj.offsetLeft) / 10;
    var speedY = (target.top - obj.offsetTop) / 10;
    speedX = speedX > 0 ? Math.ceil(speedX) : Math.floor(speedX);
    speedY = speedY > 0 ? Math.ceil(speedY) : Math.floor(speedY);
    if(obj.offsetLeft == target.left && obj.offsetTop == target.top){
      clearInterval(obj.timer);
    }else{
      obj.style.left = obj.offsetLeft + speedX + 'px';
      obj.style.top = obj.offsetTop + speedY + 'px';
    }
  }, 30);
}

//同时改变元素的left和top属性
move({left: 500, top: 300});

以上两种方法都可以实现同时运动的效果，根据实际情况选择即可。

示例说明

以下是两个使用同时运动实现的示例：

示例一：图片轮播

var index = 0,
    timer;
function move(){
  if(index == 3){
    index = 0;
  }else{
    index++;
  }
  for(var i = 0; i < dots.length; i++){
    dots[i].className = '';
  }
  dots[index].className = 'active';
  var target = -index * 500;
  clearInterval(timer);
  timer = setInterval(function(){
    var speed = (target - slider.offsetLeft) / 10;
    speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
    if(slider.offsetLeft == target){
      clearInterval(timer);
    }else{
      slider.style.left = slider.offsetLeft + speed + 'px';
    }
  }, 30);
}

示例二：模拟时钟

function move(){
  var date = new Date();
  var hour = date.getHours() % 12,
      minute = date.getMinutes(),
      second = date.getSeconds();
  var hourAngle = (hour + minute / 60 + second / 3600) * 30,
      minuteAngle = (minute + second / 60) * 6,
      secondAngle = second * 6;
  hourHand.style.transform = 'rotate(' + hourAngle + 'deg)';
  minuteHand.style.transform = 'rotate(' + minuteAngle + 'deg)';
  secondHand.style.transform = 'rotate(' + secondAngle + 'deg)';
  setTimeout(move, 1000);
}

以上两个示例分别是图片轮播和模拟时钟，在实现的过程中都使用了同时运动的方法，从而达到了更加连续的动画效果。