LinHuijuan's Blog

动画实现

# 动画实现

[TOC]

# 一、JS 实现

# 1.1 setTimeout

# 二、CSS 实现

# 2.1 transition

transition属性可以被指定为一个或多个 CSS 属性的过渡效果，多个属性之间用逗号进行分隔。

div {
    width:100px;
    transition: width 2s;
    -webkit-transition: width 2s; /* Safari */
}
div:hover {width:300px;}
1
2
3
4
5
6

# 2.2 animation

animation 属性用来指定一组或多组动画，每组之间用逗号相隔。

div{
    width:100px;
    height:100px;
    background:red;
    animation:myfirst 5s;
}

@keyframes myfirst{
    from {background:red;}
    to {background:yellow;}
}
1
2
3
4
5
6
7
8
9
10
11

# 三、HTML5 实现

# 3.1 canvas

# 3.2 requestAnimation

  • 浏览器专门为动画提供的API，让 DOM 动画、Canvas 动画、SVG 动画、WebGL 动画等有一个统一的刷新机制。
  • 特性
    • 按帧对网页进行重绘。该方法告诉浏览器希望执行动画并请求浏览器在下一次重绘之前调用回调函数来更新动画。（浏览器重绘频率一般会和显示器的刷新率保持同步。）
    • 由系统来决定回调函数的执行时机，在运行时浏览器会自动优化方法的调用。
function step(timestamp) {
  if (!start) start = timestamp;
  var progress = timestamp - start;
  element.style.left = Math.min(progress / 10, 200) + 'px';
  if (progress < 2000) {
    window.requestAnimationFrame(step);
  }
}

window.requestAnimationFrame(step);
1
2
3
4
5
6
7
8
9
10

canvas