javascript帧动画(实例讲解)_js帧动画资源-CSDN文库

63 浏览量 2021-01-19 18:59:30 上传评论收藏 154KB PDF 举报

资源推荐

资源详情

资源评论

javascript帧动画帧动画(实例讲解实例讲解)

前面的话前面的话

帧动画就是在“连续的关键帧”中分解动画动作，也就是在时间轴的每帧上逐帧绘制不同的内容，使其连续播放而成的动画。由于是一帧一帧的画，所以

帧动画具有非常大的灵活性，几乎可以表现任何想表现的内容。本文将详细介绍javascript帧动画

概述概述

【分类】

常见的帧动画的方式有三种，包括gif、CSS3 animation和javascript

git和CSS3 animation不能灵活地控制动画的暂停和播放、不能对帧动画做更加灵活地扩展。另外，gif图不能捕捉动画完成的事件。所以，一般地，使用

javascript来实现帧动画

【原理】

js实现帧动画有两种实现方式实现帧动画有两种实现方式

1、如果有多张帧动画图片，可以用一个image标签去承载图片，定时改变image的src属性(不推荐)

2、把所有的动画关键帧都绘制在一张图片里，把图片作为元素的background-image，定时改变元素的background-position属性(推荐)

因为第一种方式需要使用多个HTTP请求，所以一般地推荐使用第二种方式

【实例】

下面是使用帧动画制作的一个实例

<div id="rabbit" ></div>

<button id="btn">暂停运动</button>

<script>

var url = 'rabbit-big.png';

var positions = ['0,-854','-174 -852','-349 -852','-524 -852','-698 -852','-873 -848'];

var ele = document.getElementById('rabbit');

var oTimer = null;

btn.onclick = function(){

if(btn.innerHTML == '开始运动'){

frameAnimation(ele,positions,url);

btn.innerHTML = '暂停运动';

}else{

clearTimeout(oTimer);

btn.innerHTML = '开始运动';

}

}

frameAnimation(ele,positions,url);

function frameAnimation(ele,positions,url){

ele.style.backgroundImage = 'url(' + url + ')';

ele.style.backgroundRepeat = 'no-repeat';

var index = 0;

function run(){

var pos = positions[index].split(' ');

ele.style.backgroundPosition = pos[0] + 'px ' + pos[1] + 'px';

index++;

if(index >= positions.length){

index = 0;

}

oTimer = setTimeout(run,80);

}

run();

}

</script>

通用帧动画通用帧动画

下面来设计一个通用的帧动画库

【需求分析】

　　1、支持图片预加载

　　2、支持两种动画播放方式，及自定义每帧动画

　　3、支持单组动画控制循环次数(可支持无限次)

　　4、支持一组动画完成，进行下一组动画

　　5、支持每个动画完成后有等待时间

　　6、支持动画暂停和继续播放

　　7、支持动画完成后执行回调函数

【编程接口】

1、loadImage(imglist)//预加载图片

2、changePosition(ele,positions,imageUrl)//通过改变元素的background-position实现动画

剩余9页未读，继续阅读

内容反馈

weixin_38553478

粉丝: 7
资源: 923

最新资源

资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！点击此处反馈

feedback-tip