转载请注明出处: http://qiudeqing.com/animation/2015/06/11/css-vs-javascript-animation.html

原文链接:https://developers.google.com/web/fundamentals/look-and-feel/animations/css-vs-javascript?hl=en

简介

通常有CSS和JavaScript两种方法来实现动画. 选择那种方案实现由项目和所需要实现的效果决定.

简而言之:

大部分基础动画都可以用CSS或者JavaScript实现, 但是需要的时间和精力不同.CSS VS JavaScript Performance也不同. 以下是一些参考法则:

Animate with CSS

最方便实现动画的方法是CSS.

下面的CSS会把元素向X和Y方向移动100px.

.box {
  transform: translate(0, 0);
  transition: transform 500ms;
}

.box.move {
  transform: translate(100px, 100px);
}

demo如下:

前面的例子中使用JavaScript控制状态, 为元素设置类, 由CSS来完成动画. 如果需要监测动画完成.可以注册对应监听器:

var box = document.querySelector('.box');
box.addEventListener('transitionend', onTransitionEnd, false);

function onTransitionEnd() {}

除了transition之外还可以使用animation实现动画, 这样可以提供更强的控制能力.

可以使用animation实现一个多属性变化的无线重复动画:

html {
  background: #f2f2f2;
}

.box {
  animation-name: movingBox;
  animation-duration: 1300ms;
  animation-iteration-count: infinite;
  animation-direction: alternate;

  width: 100px;
  height: 100px;
  background: #fff;
  box-shadow: 0 10xp 20px rgba(0,0,0,0.5);
}

@keyframes movingBox {
  0% {
    transform: translate(0, 0);
    opacity: 0.3;
  }

  25% {
    opacity: 0.9;
  }

  50% {
    transform: translate(100px, 100px);
    opacity: 0.2;
  }

  100% {
    transform: translate(30px, 30px);
    opacity: 0.8;
  }
}

demo如下

JavaScript实现动画

JavaScript实现动画比CSS复杂, 但是为开发人员提供了更强的控制能力, 通常的方式是使用requestAnimationFrame, 然后在每一帧上设置需要的属性.

注意:

你可能在其他地方看见使用setInterval或者setTimeout实现动画. 这样的动画不能与屏幕刷新频率同步, 很容易出现跳帧和卡顿. 应该始终避免使用这种方法, 始终使用requestAnimationFrame.

下面的JavaScript代码实现前面的动画

function Box() {

  var animationStartTime = 0;
  var animationDuration = 500;
  var target = document.querySelector('.box');

  this.startAnimation = function () {
    animationStartTime = Date.now();
    requestAnimationFrame(update);
  };

  function update() {
    var currentTime = Date.now();
    var positionInAnimation = (currentTime - animationStartTime) / animationDuration;

    var xPosition = positionInAnimation * 100;
    var yPosition = positionInAnimation * 100;

    target.style.transform = 'translate(' + xPosition + 'px,' + yPosition + 'px)';

    if (positionInAnimation <= 1) {
      requestAnimationFrame(update);
    }
  }
}

var box = new Box();
box.startAnimation();

demo如下:

随着功能的增加上面的代码会变得复杂并且难以管理，通常来说选择一个成熟的js动画库能带来很多好处。例如jQuery的animate()函数，或者TweenMax这样的专门动画库。

使用JavaScript动画的好处是你可以完全控制元素的样式，并且可以随时暂停，停止，倒退。

参考资料