帧动画的实现原理与实践 |
您所在的位置：网站首页 › 逐帧动画的例子 › 帧动画的实现原理与实践 |
帧动画的实现原理与实践
|
通常所说的帧动画，即逐帧动画。 逐帧动画：是一种常见的动画形式（Frame By Frame），其原理是在“连续的关键帧”中分解动画动作，也就是在时间轴的每帧上逐帧绘制不同的内容，使其连续播放而成动画。 简单来说就是不断切换视觉内图片内容，利用视觉滞留生理来实现连续播放的动画效果。就像我们小时候玩翻页动画一样，把许多帧相似的图片连起来，一张张翻过去，看起来就像是在动。  手翻书动画合适的动画不仅更能吸引人们的眼球，也能让你的应用体验更为流畅，而将动画的效果做到极致，才能让用户感到使用你的应用是一种享受，而不是觉得生硬和枯燥。本文旨在介绍各种前端帧动画效果实现方式方法以及优劣，具体应用中如何实现，还得根据自身的情况进行考量。 前端逐帧动画的实现方案前端中实现逐帧动画，最主要且最常用的有三种实现方式： 1. GIF动画； 2. JavaScript直接实现； 3. CSS3 animation实现； GIF动画第一张会动的图片产自1987年，CompuServe公司。 GIF动图有着显著的优点，比如连续播放、文件小、资源占用少且兼容性很好， 绝大多数网站或多或少都会用到，很是受欢迎。但GIF动画只支持 256 色调色板，会丢失颜色信息，Alpha透明度支持差，导致图像锯齿毛边严重。并且不支持交互，灵活性差。综合了这些优缺点，目前GIF动图常用于制作logo、loading导航条等细节动画。 JavaScriptJavaScript实现动画，可谓是’花样百出‘，先看个示例： 这么一个简单的动画，大概有以下五种实现方式： 将所有图片合成雪碧图，JS修改background-position实现动画效果； (function (ele,positions){ var positions = ['0 0','-300 0','-600 0','-900 0','-1200 0','-1500 0']; var ele = document.getElementById('box'); var index = 0; setInterval(function(){ var pos = positions[index].split(' '); ele.style.backgroundPosition = pos[0] + 'px ' + pos[1] + 'px'; index++; if(index >= positions.length){ index = 0; } }, 500); })(); JS控制图片显示和隐藏实现动画效果；
(function () {
var box = document.getElementById('box');
var images = document.getElementsByTagName('img');
var index = -1;
setInterval(function(){
if( index < 5) {
index ++;
} else {
for(var i=0; i |
【本文地址】