html5中动画总结,前端动画总结

导言

之前一直没有总结一下关于前端学习到的动画该怎么实现,这篇文章帮我自己总结一下。

基本概念

在学习动画之前, 我们得先了解一下关于动画的基本概念.

帧: 帧是动画的最小单位,一帧也就是一张图片,连续的帧就形成动画。

帧数: 帧数就是在 1秒钟时间内传输的图片的多少。通常使用 FPS 表示。据说浏览器 60FPS是最好的。

帧时长: 即每一帧静止画面的停留时间,单位一般是ms(毫秒)。 1000 / 60 = 16.666 ms

实现方式

通过,我们前端实现动画有以下几种方式:

js : 通过定时器( setTimeout , setlterval)来间隔改变元素样式。 或者使用 requestAnimationFrame

css3 : tranistion 和 animation

html5 : 使用 H5 提供的绘图方式 (canvas , webgl, svg)

requestAnimationFrame

requestAnimation可以说是为 动画量身打造的 setTimeout, 不同的是, requestAnimationFrame 是跟着浏览器内建的刷新频率来执行回调函数,这就是浏览器实现动画的最佳效果。

style="position: absolute;width: 100px;height: 100px;background-color: #ccc;left: 0;top: 0;">

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

function reader() {

demo.style.left = parseInt(demo.style.left) + 100 + 'px';// 每一帧向右移动1px

}

var requestID = requestAnimationFrame(function() {

reader();

// 当超过300px 后才停止

if(parseInt(demo.style.left) > 1300) demo.style.left = 0;

requestAnimationFrame(arguments.callee);

})

复制代码

Transition

CSS中的 transition 属性允许块级元素中的属性在指定的时间内平滑的改变,简单看下语法规则:

transition : property duration timing-function delay

复制代码

具体属性值介绍如下:

值

描述

transition-property

规定设置过渡效果的CSS属性的名称。(none/all/property)

transition-duration

规定完成过渡效果需要多少秒或者毫秒

transition-timing-function

规定速度效果的速度曲线

transition-delay

定义过渡效果何时开始。

.demo {

width: 100px;

height: 100px;

background-color: blue;

transition: width 1s ease ;

}

.demo:hover {

width: 300px;

}

复制代码

animation

类似于 transition ,CSS还提供了一个 animation 属性 ,不过区别于 transition , animation 作用于元素本身而不是样式属性, 可以使用关键帧的概念 , 更加强大。

animation : name duration timing-function delay iteration-count direction

复制代码值

描述

animation-name

规定需要绑定到选择器的keyframe 名称

animation-duration

规定完成动画所花费的时间,以秒或毫秒

animation-timing-function

规定动画的速度曲线。

animation-delay

规定在动画开始之前的延迟

animation-iteration-count

规定动画应该播放的次数

animation-direction

规定是否应该轮流反向播放动画。(normal,alternate)

.demo {

width: 100px;

height: 100px;

background-color: red;

position: relative;

animation: mymove 5s infinite;

}

@keyframes mymove {

from {

left: 0px;

}

to {

left: 200px;

}

}

复制代码

关于找一找教程网

本站文章仅代表作者观点，不代表本站立场，所有文章非营利性免费分享。

本站提供了软件编程、网站开发技术、服务器运维、人工智能等等IT技术文章，希望广大程序员努力学习，让我们用科技改变世界。

[前端动画总结]http://www.zyiz.net/tech/detail-143275.html