아래 편집기를 사용하면 자바스크립트 프레임 애니메이션(예제 설명)이 제공됩니다. 편집자님이 꽤 좋다고 생각하셔서 지금 공유하고 모두에게 참고용으로 드리도록 하겠습니다. 편집기를 따라 살펴보겠습니다
앞서 언급했듯이
프레임 애니메이션은 애니메이션 동작을 "연속 키 프레임"으로 분해하는 것입니다. 즉, 타임라인의 각 프레임에 프레임별로 다른 콘텐츠를 그리는 것입니다. 지속적으로 재생되는 애니메이션입니다. 프레임 단위로 그려지기 때문에 프레임 애니메이션은 유연성이 뛰어나 표현하고 싶은 거의 모든 내용을 표현할 수 있습니다. 이 글에서는 자바스크립트 프레임 애니메이션을 자세히 소개합니다
개요
[분류]
프레임 애니메이션에는 gif, CSS3 애니메이션, javascript
git을 포함한 세 가지 일반적인 방법이 있으며 CSS3 애니메이션은 일시 중지를 유연하게 제어할 수 없습니다. 애니메이션 재생 및 프레임 애니메이션은 이보다 더 유연하게 확장될 수 없습니다. 또한, gif 이미지는 애니메이션 완료 이벤트를 포착할 수 없습니다. 따라서 일반적으로 프레임 애니메이션을 구현하려면 자바스크립트를 사용합니다
[원리]
js에서 프레임 애니메이션을 구현하는 방법에는 두 가지가 있습니다
1. 프레임 애니메이션 사진이 여러 개인 경우 이미지 태그를 사용하여 전달할 수 있습니다. 그림. 이미지의 src 속성을 정기적으로 변경합니다(권장하지 않음)
2. 그림에 모든 애니메이션 키 프레임을 그리고 그림을 요소의 배경 이미지로 사용하고 요소의 배경 위치 속성을 정기적으로 변경합니다. (권장)
첫 번째 방법은 여러 HTTP 요청을 사용해야 하므로 일반적으로 두 번째 방법을 사용하는 것이 좋습니다
[예제]
다음은 프레임 애니메이션을 사용한 예입니다
<p id="rabbit" ></p>
<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, position, imageUrl) //요소의 배경 위치를 변경하여 애니메이션 구현
3.changeSrc(ele,imglist)//이미지 요소의 src를 변경하여
4.enterFrame(callback)//각 프레임에서 실행되는 함수 애니메이션은 사용자가 애니메이션의 각 프레임에 대한 콜백을 사용자 정의할 수 있는 것과 같습니다. 5. 반복(회)//회가 비어 있으면 무제한이라는 의미입니다
6. //마지막 애니메이션을 무한 반복합니다. 이는peat()
7.wait(time)/ /각 애니메이션 실행이 완료된 후 대기 시간
8, then(callback)//애니메이션 이후의 콜백 함수 실행이 완료되었습니다
9, start(간격)//애니메이션이 실행을 시작합니다. 간격은 애니메이션 실행 사이의 간격을 나타냅니다
10 , Pause()//애니메이션을 일시 중지합니다
11.start()//재실행합니다. 이전 일시 중지 지점의 애니메이션
12.dispose()//리소스 해제
[호출 방법]
체인 호출 지원, 동사를 사용하여 인터페이스 설명
【코드 디자인】
1. 이미지 프리로딩 -> 애니메이션 실행 -> 애니메이션 종료 등이 태스크 체인으로 이루어집니다. 작업 체인에는 동기 실행과 비동기 예약 실행이라는 두 가지 작업이 포함됩니다
2. 현재 작업 체인의 인덱스를 기록합니다
3. 각 작업이 실행된 후 next 메서드를 호출하여 다음 작업을 실행하고 작업 체인을 업데이트합니다. 동시에 인덱스 값
【인터페이스 정의】
'use strict';
/* 帧动画库类
* @constructor
*/
function FrameAnimation(){}
/* 添加一个同步任务，去预加载图片
* @param imglist 图片数组
*/
FrameAnimation.prototype.loadImage = function(imglist){}
/* 添加一个异步定时任务，通过定时改变图片背景位置，实现帧动画
* @param ele dom对象
* @param positions 背景位置数组
* @param imageUrl 图片URL地址
*/
FrameAnimation.prototype.changePosition = function(ele,positions,imageUrl){}
/* 添加一个异步定时任务，通过定时改变image标签的src属性，实现帧动画
* @param ele dom对象
* @param imglist 图片数组
*/
FrameAnimation.prototype.changeSrc = function(ele,imglist){}
/* 添加一个异步定时任务，自定义动画每帧执行的任务函数
* @param tastFn 自定义每帧执行的任务函数
*/
FrameAnimation.prototype.enterFrame = function(taskFn){}
/* 添加一个同步任务，在上一个任务完成后执行回调函数
* @param callback 回调函数
*/
FrameAnimation.prototype.then = function(callback){}
/* 开始执行任务，异步定时任务执行的间隔
* @param interval
*/
FrameAnimation.prototype.start = function(interval){}
/* 添加一个同步任务，回退到上一个任务，实现重复上一个任务的效果，可以定义重复的次数
* @param times 重复次数
*/
FrameAnimation.prototype.repeat = function(times){}
/* 添加一个同步任务，相当于repeat()，无限循环上一次任务
*
*/
FrameAnimation.prototype.repeatForever = function(){}
/* 设置当前任务执行结束后到下一个任务开始前的等待时间
* @param time 等待时长
*/
FrameAnimation.prototype.wait = function(time){}
/* 暂停当前异步定时任务
*
*/
FrameAnimation.prototype.pause = function(){}
/* 重新执行上一次暂停的异步定时任务
*
*/
FrameAnimation.prototype.restart = function(){}
/* 释放资源
*
*/
FrameAnimation.prototype.dispose = function(){}Image preloadingImage preloading은 상대적으로 독립적인 기능으로, imageloader.js
모듈로 캡슐화할 수 있습니다.'use strict';
/**
* 预加载图片函数
* @param images 加载图片的数组或者对象
* @param callback 全部图片加载完毕后调用的回调函数
* @param timeout 加载超时的时长
*/
function loadImage(images,callback,timeout){
//加载完成图片的计数器
var count = 0;
//全部图片加载成功的标志位
var success = true;
//超时timer的id
var timeoutId = 0;
//是否加载超时的标志位
var isTimeout = false;
//对图片数组(或对象)进行遍历
for(var key in images){
//过滤prototype上的属性
if(!images.hasOwnProperty(key)){
continue;
}
//获得每个图片元素
//期望格式是object:{src:xxx}
var item = images[key];
if(typeof item === 'string'){
item = images[key] = {
src:item
};
}
//如果格式不满足期望，则丢弃此条数据，进行下一次遍历
if(!item || !item.src){
continue;
}
//计数+1
count++;
//设置图片元素的id
item.id = '__img__' + key + getId();
//设置图片元素的img，它是一个Image对象
item.img = window[item.id] = new Image();
doLoad(item);
}
//遍历完成如果计数为0，则直接调用callback
if(!count){
callback(success);
}else if(timeout){
timeoutId = setTimeout(onTimeout,timeout);
}
/**
* 真正进行图片加载的函数
* @param item 图片元素对象
*/
function doLoad(item){
item.status = 'loading';
var img = item.img;
//定义图片加载成功的回调函数
img.onload = function(){
success = success && true;
item.status = 'loaded';
done();
}
//定义图片加载失败的回调函数
img.onerror = function(){
success = false;
item.status = 'error';
done();
}
//发起一个http(s)请求
img.src = item.src;
/**
* 每张图片加载完成的回调函数
*/
function done(){
img.onload = img.onerror = null;
try{
delete window[item.id];
}catch(e){
}
//每张图片加载完成，计数器减1，当所有图片加载完成，且没有超时的情况，清除超时计时器，且执行回调函数
if(!--count && !isTimeout){
clearTimeout(timeoutId);
callback(success);
}
}
}
/**
* 超时函数
*/
function onTimeout(){
isTimeout = true;
callback(false);
}
}
var __id = 0;
function getId(){
return ++__id;
}
module.exports = loadImage;Timeline애니메이션 처리시 setTimeout()을 반복적으로 사용하여 구현하는데 이 간격이 정확하지 않습니다. 다음으로 타임라인 클래스를 구현해 보겠습니다. timeline.js
'use strict';
var DEFAULT_INTERVAL = 1000/60;
//初始化状态
var STATE_INITIAL = 0;
//开始状态
var STATE_START = 1;
//停止状态
var STATE_STOP = 2;
var requestAnimationFrame = (function(){
return window.requestAnimationFrame || window.webkitRequestAnimationFrame|| window.mozRequestAnimationFrame || window.oRequestAnimationFrame || function(callback){
return window.setTimeout(callback,(callback.interval || DEFAULT_INTERVAL));
}
})();
var cancelAnimationFrame = (function(){
return window.cancelAnimationFrame || window.webkitCancelAnimationFrame || window.mozCancelAnimationFrame || window.oCancelAnimationFrame || function(id){
return window.clearTimeout(id);
}
})();
/**
* 时间轴类
* @constructor
*/
function Timeline(){
this.animationHandler = 0;
this.state = STATE_INITIAL;
}
/**
* 时间轴上每一次回调执行的函数
* @param time 从动画开始到当前执行的时间
*/
Timeline.prototype.onenterframe = function(time){
}
/**
* 动画开始
* @param interval 每一次回调的间隔时间
*/
Timeline.prototype.start = function(interval){
if(this.state === STATE_START){
return;
}
this.state = STATE_START;
this.interval = interval || DEFAULT_INTERVAL;
startTimeline(this,+new Date());
}
/**
* 动画停止
*/
Timeline.prototype.stop = function(){
if(this.state !== STATE_START){
return;
}
this.state = STATE_STOP;
//如果动画开始过，则记录动画从开始到现在所经历的时间
if(this.startTime){
this.dur = +new Date() - this.startTime;
}
cancelAnimationFrame(this.animationHandler);
}
/**
* 重新开始动画
*/
Timeline.prototype.restart = function(){
if(this.state === STATE_START){
return;
}
if(!this.dur || !this.interval){
return;
}
this.state = STATE_START;
//无缝连接动画
startTimeline(this,+new Date()-this.dur);
}
/**
* 时间轴动画启动函数
* @param timeline 时间轴的实例
* @param startTime 动画开始时间戳
*/
function startTimeline(timeline,startTime){
//记录上一次回调的时间戳
var lastTick = +new Date();
timeline.startTime = startTime;
nextTick.interval = timeline.interval;
nextTick();
/**
* 每一帧执行的函数
*/
function nextTick(){
var now = +new Date();
timeline.animationHandler = requestAnimationFrame(nextTick);
//如果当前时间与上一次回调的时间戳大于设置的时间间隔，表示这一次可以执行回调函数
if(now - lastTick >= timeline.interval){
timeline.onenterframe(now - startTime);
lastTick = now;
}
}
}
module.exports = Timeline;Animation 클래스 구현다음은 애니메이션 클래스 animation.js
'use strict';
var loadImage = require('./imageloader');
var Timeline = require('./timeline');
//初始化状态
var STATE_INITIAL = 0;
//开始状态
var STATE_START = 1;
//停止状态
var STATE_STOP = 2;
//同步任务
var TASK_SYNC = 0;
//异步任务
var TASK_ASYNC = 1;
/**
* 简单的函数封装，执行callback
* @param callback 执行函数
*/
function next(callback){
callback && callback();
}
/* 帧动画库类
* @constructor
*/
function FrameAnimation(){
this.taskQueue = [];
this.index = 0;
this.timeline = new Timeline();
this.state = STATE_INITIAL;
}
/* 添加一个同步任务，去预加载图片
* @param imglist 图片数组
*/
FrameAnimation.prototype.loadImage = function(imglist){
var taskFn = function(next){
loadImage(imglist.slice(),next);
};
var type = TASK_SYNC;
return this._add(taskFn,type);
}
/* 添加一个异步定时任务，通过定时改变图片背景位置，实现帧动画
* @param ele dom对象
* @param positions 背景位置数组
* @param imageUrl 图片URL地址
*/
FrameAnimation.prototype.changePosition = function(ele,positions,imageUrl){
var len = positions.length;
var taskFn;
var type;
if(len){
var me = this;
taskFn = function(next,time){
if(imageUrl){
ele.style.backgroundImage = 'url(' + imageUrl + ')';
}
//获得当前背景图片位置索引
var index = Math.min(time/me.interval|0,len);
var position = positions[index-1].split(' ');
//改变dom对象的背景图片位置
ele.style.backgroundPosition = position[0] + 'px ' + position[1] + 'px';
if(index === len){
next();
}
}
type = TASK_ASYNC;
}else{
taskFn = next;
type = TASK_SYNC;
}
return this._add(taskFn,type);
}
/* 添加一个异步定时任务，通过定时改变image标签的src属性，实现帧动画
* @param ele dom对象
* @param imglist 图片数组
*/
FrameAnimation.prototype.changeSrc = function(ele,imglist){
var len = imglist.length;
var taskFn;
var type;
if(len){
var me = this;
taskFn = function(next,time){
//获得当前背景图片位置索引
var index = Math.min(time/me.interval|0,len);
//改变image对象的背景图片位置
ele.src = imglist[index-1];
if(index === len){
next();
}
}
type = TASK_ASYNC;
}else{
taskFn = next;
type = TASK_SYNC;
}
return this._add(taskFn,type);
}
/* 添加一个异步定时任务，自定义动画每帧执行的任务函数
* @param tastFn 自定义每帧执行的任务函数
*/
FrameAnimation.prototype.enterFrame = function(taskFn){
return this._add(taskFn,TASK_ASYNC);
}
/* 添加一个同步任务，在上一个任务完成后执行回调函数
* @param callback 回调函数
*/
FrameAnimation.prototype.then = function(callback){
var taskFn = function(next){
callback(this);
next();
};
var type = TASK_SYNC;
return this._add(taskFn,type);
}
/* 开始执行任务，异步定义任务执行的间隔
* @param interval
*/
FrameAnimation.prototype.start = function(interval){
if(this.state === STATE_START){
return this;
}
//如果任务链中没有任务，则返回
if(!this.taskQueue.length){
return this;
}
this.state = STATE_START;
this.interval = interval;
this._runTask();
return this;
}
/* 添加一个同步任务，回退到上一个任务，实现重复上一个任务的效果，可以定义重复的次数
* @param times 重复次数
*/
FrameAnimation.prototype.repeat = function(times){
var me = this;
var taskFn = function(){
if(typeof times === 'undefined'){
//无限回退到上一个任务
me.index--;
me._runTask();
return;
}
if(times){
times--;
//回退
me.index--;
me._runTask();
}else{
//达到重复次数，跳转到下一个任务
var task = me.taskQueue[me.index];
me._next(task);
}
}
var type = TASK_SYNC;
return this._add(taskFn,type);
}
/* 添加一个同步任务，相当于repeat()，无限循环上一次任务
*
*/
FrameAnimation.prototype.repeatForever = function(){
return this.repeat();
}
/* 设置当前任务执行结束后到下一个任务开始前的等待时间
* @param time 等待时长
*/
FrameAnimation.prototype.wait = function(time){
if(this.taskQueue && this.taskQueue.length > 0){
this.taskQueue[this.taskQueue.length - 1].wait = time;
}
return this;
}
/* 暂停当前异步定时任务
*
*/
FrameAnimation.prototype.pause = function(){
if(this.state === STATE_START){
this.state = STATE_STOP;
this.timeline.stop();
return this;
}
return this;
}
/* 重新执行上一次暂停的异步定时任务
*
*/
FrameAnimation.prototype.restart = function(){
if(this.state === STATE_STOP){
this.state = STATE_START;
this.timeline.restart();
return this;
}
return this;
}
/* 释放资源
*
*/
FrameAnimation.prototype.dispose = function(){
if(this.state !== STATE_INITIAL){
this.state = STATE_INITIAL;
this.taskQueue = null;
this.timeline.stop();
this.timeline = null;
return this;
}
return this;
}
/**
* 添加一个任务到任务队列
* @param taskFn 任务方法
* @param type 任务类型
* @private
*/
FrameAnimation.prototype._add = function(taskFn,type){
this.taskQueue.push({
taskFn:taskFn,
type:type
});
return this;
}
/**
* 执行任务
* @private
*/
FrameAnimation.prototype._runTask = function(){
if(!this.taskQueue || this.state !== STATE_START){
return;
}
//任务执行完毕
if(this.index === this.taskQueue.length){
this.dispose();
return;
}
//获得任务链上的当前任务
var task = this.taskQueue[this.index];
if(task.type === TASK_SYNC){
this._syncTask(task);
}else{
this._asyncTask(task);
}
}
/**
* 同步任务
* @param task 执行的任务对象
* @private
*/
FrameAnimation.prototype._syncTask = function(task){
var me = this;
var next = function(){
//切换到下一个任务
me._next(task);
}
var taskFn = task.taskFn;
taskFn(next);
}
/**
* 异步任务
* @param task 执行的任务对象
* @private
*/
FrameAnimation.prototype._asyncTask = function(task){
var me = this;
//定义每一帧执行的回调函数
var enterframe = function(time){
var taskFn = task.taskFn;
var next = function(){
//停止当前任务
me.timeline.stop();
//执行下一个任务
me._next(task);
};
taskFn(next,time);
}
this.timeline.onenterframe = enterframe;
this.timeline.start(this.interval);
}
/**
* 切换到下一个任务，支持如果当前任务需要等待，则延时执行
* @private
*/
FrameAnimation.prototype._next = function(task){
this.index++;
var me = this;
task.wait ? setTimeout(function(){
me._runTask();
},task.wait) : this._runTask();
}
module.exports = function(){
return new FrameAnimation();
}webpack 구성에 대한 전체 코드입니다. 애니메이션 프레임 애니메이션 라이브러리 제작에는 AMD 모듈 사양을 사용하지만 브라우저 수준에서는 지원하지 않기 때문에 모듈 관리를 위해서는 webpack을 사용해야 하며 animation.js, imageloader.js, timeline.js가 필요합니다. 하나의 파일로 패키징되어 있습니다
module.exports = {
entry:{
animation:"./src/animation.js"
},
output:{
path:__dirname + "/build",
filename:"[name].js",
library:"animation",
libraryTarget:"umd",
}
}<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <p id="rabbit" ></p> <script src="../build/animation.js"></script> <script>var imgUrl = 'rabbit-big.png'; var positions = ['0,-854','-174 -852','-349 -852','-524 -852','-698 -852','-873 -848']; var ele = document.getElementById('rabbit'); var animation = window.animation; var repeatAnimation = animation().loadImage([imgUrl]).changePosition(ele,positions,imgUrl).repeatForever(); repeatAnimation.start(80); </script> </body> </html>
더 많은 예시효과를 구현하는 것 외에도 토끼 수레의 프레임 애니메이션을 사용할 수도 있습니다. 토끼의 승리와 토끼의 실패 효과를 얻으세요
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
p{position:absolute;width:102px;height:80px;background-repeat:no-repeat;}
</style>
</head>
<body>
<p id="rabbit1" ></p>
<p id="rabbit2" ></p>
<p id="rabbit3" ></p>
<script type="text/javascript" src="http://sandbox.runjs.cn/uploads/rs/26/ddzmgynp/animation.js"></script>
<script>
var baseUrl = 'http://7xpdkf.com1.z0.glb.clouddn.com/runjs/img/';
var images = ['rabbit-big.png','rabbit-lose.png','rabbit-win.png'];
for(var i = 0; i < images.length; i++){
images[i] = baseUrl + images[i];
}
var rightRunningMap = ["0 -854", "-174 -852", "-349 -852", "-524 -852", "-698 -851", "-873 -848"];
var leftRunningMap = ["0 -373", "-175 -376", "-350 -377", "-524 -377", "-699 -377", "-873 -379"];
var rabbitWinMap = ["0 0", "-198 0", "-401 0", "-609 0", "-816 0", "0 -96", "-208 -97", "-415 -97", "-623 -97", "-831 -97", "0 -203", "-207 -203", "-415 -203", "-623 -203", "-831 -203", "0 -307", "-206 -307", "-414 -307", "-623 -307"];
var rabbitLoseMap = ["0 0", "-163 0", "-327 0", "-491 0", "-655 0", "-819 0", "0 -135", "-166 -135", "-333 -135", "-500 -135", "-668 -135", "-835 -135", "0 -262"];
var animation = window.animation;
function repeat(){
var repeatAnimation = animation().loadImage(images).changePosition(rabbit1, rightRunningMap, images[0]).repeatForever();
repeatAnimation.start(80);
}
function win() {
var winAnimation = animation().loadImage(images).changePosition(rabbit2, rabbitWinMap, images[2]).repeatForever();
winAnimation.start(200);
}
function lose() {
var loseAnimation = animation().loadImage(images).changePosition(rabbit3, rabbitLoseMap, images[1]).repeatForever();
loseAnimation.start(200);
}
repeat();
win();
lose();
</script>
</body>
</html>위 내용은 자바스크립트 프레임 애니메이션을 설명하는 예의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
