未加星标

前端动画-序列帧动画

字体大小 | |
[前端(javascript) 所属分类 前端(javascript) | 发布者 店小二03 | 时间 2017 | 作者 红领巾 ] 0人收藏点击收藏

前端写动画的情况不是很多,毕竟性能不是很好。一般网页动效,现在基本用css3就完成了。

这里说道说道 用 js脚本完成的动画。

可能很多刚入行的新手觉得写动画很复杂,有抵触心理,确实用脚本可能会涉及到一些逻辑及其设计模式,复杂的程序对技术水平要求比较高。

这里不会深入探究,只做简单引导,希望大家能快速上手写出绚丽吊炸天的动画特效.

废话太多,下面进入正题,本文先讲序列帧动画。

效果预览 源码地址 脚本动画原理

所谓动画,简单讲就是在时间轴上改动元素外貌或者位置。就好比手机拍摄视频,记录下景物的变化。

什么是序列帧

就是一帧一帧的图像文件,如这匹可爱的小马:


前端动画-序列帧动画
序列帧动画

把上面的小马从左到右,从上到下,播放一遍,每次展示一匹马的宽度和高度就成了动画

代码实现

为了提高性能,这里用canvas实现

新建index.html文件 <!DOCTYPE html> <html> <head> <metahttp-equiv="Content-Type"content="text/html; charset=utf-8"> <metaid="viewport"name="viewport"content="width=device-width,height=device-height,initial-scale=1,user-scalable=no"> <title>序列帧动画</title> <styletype="text/css"> * { padding: 0; margin: 0; } </style> </head> <body> <!-- 画布容器 --> <divid="donglegend"></div> <scripttype="text/javascript"> //书写脚本 </script> </body> </html> 分析搭建代码框架

一切从简,面向过程开始

//需要一个主函数 main 作为 程序启动入口 functionmain(){} //需要创建一个canvas画布 functionsetCanvas(){} //需要加载图片 functionloadResource(){} // 加载完图片需要 把图片画到画布 functiondraw(){} // 需要一个主循环函数,就是一个定时器,不断刷新画布 functionloop(){} // 在loop循环函数里调用 show函数(作用一会就知道了) functionshow(){} // 想想还缺少什么,为了方便画图片,可以写一个函数把图片按照区块 划分 functiondivideCoordinate(){} 具体功能函数实现 var _W = window.innerWidth, _H = window.innerHeight, _speed = 1000 / 10, //定时器执行频率 loopTimer = null, //保存定时器id canvasObj = null, //画布 context = null, // 画布环境句柄 imageList = [], // 加载完图片存放地址 animateList = [], // 划分图片区域结果 animateAction = 0, // 序列帧图片第几行 animateCurframe = 0; // 序列帧图片某行第几帧 main(); functionmain(){ setCanvas("donglegend", _W, _H); loadResource({ 'id': 'dongsheng', 'src': 'images/dongsheng.jpg' }); } /** * [setCanvas 创建画布] * @param {[string]} id [元素容器] * @param {[number]} w [画布宽度] * @param {[number]} h [画布高度] */ functionsetCanvas(id, w, h){ var object = document.getElementById(id); object.innerHTML = '<canvas id="' + id + '_canvas" width="' + _W +'" height="'+_H+'">' + '</canvas>'; canvasObj = document.getElementById(id + "_canvas"); context = canvasObj.getContext("2d"); } /** * [loadResource 加载图片] * @param {[object]} item [{id: "xx", src: "xx"}] */ functionloadResource(item){ var image = new Image(); image.onload = function(){ imageList[item.id] = image; animateList = divideCoordinate(image.width, image.height, 2, 4); loop(); } image.src = item.src; } /** * [divideCoordinate 按区域划分序列帧图片] * @param {[type]} w [总宽度] * @param {[type]} h [总高度] * @param {[type]} row [总行数] * @param {[type]} col [总列数] * @return {[type]} [划分结果数组集] */ functiondivideCoordinate(w, h, row, col){ var i, j, cw = w / col, ch = h / row, r = [], c; for (i = 0; i < row; i++) { c = []; for (j = 0; j < col; j++) { c.push({x : cw * j, y : ch * i, width : cw, height : ch}); } r.push(c); } return r; }; /** * [loop 程序主循环,控制页面不断刷新] * @return {[type]} [description] */ functionloop(){ if (loopTimer) { clearInterval(loopTimer); } loopTimer = setInterval(function(){ show(); }, _speed) } /** * [show 清空画布,展示画布] * @return {[type]} [description] */ functionshow(){ context.fillRect(0, 0, _W, _H); draw(context, imageList['dongsheng'], animateList); } /** * [draw 画图片到画布] * @param {[type]} c [画布环境句柄] * @param {[type]} bitmapData [图片资源] * @param {[type]} list [划分区域数组] */ functiondraw(c, bitmapData, list){ if(animateCurframe >= list[animateAction].length-1){ animateCurframe = 0; animateAction++; if(animateAction > list.length-1){ animateAction = 0; } }else{ animateCurframe++; } var p = list[animateAction][animateCurframe]; c.drawImage( bitmapData, p.x, p.y, p.width, p.height, (_W - p.width)/2, (_H - p.height)/3, p.width, p.height ) } 结语

至此,最简单版本的序列帧动画就完成了,可以自己下载源码修改自己想要的效果

旨在理解动画的原理,后续会详细更新 位移动画,比如小球弹跳等等。

本文前端(javascript)相关术语:javascript是什么意思 javascript下载 javascript权威指南 javascript基础教程 javascript 正则表达式 javascript设计模式 javascript高级程序设计 精通javascript javascript教程

主题: 设计模式HTML
分页:12
转载请注明
本文标题:前端动画-序列帧动画
本站链接:http://www.codesec.net/view/532336.html
分享请点击:


1.凡CodeSecTeam转载的文章,均出自其它媒体或其他官网介绍,目的在于传递更多的信息,并不代表本站赞同其观点和其真实性负责;
2.转载的文章仅代表原创作者观点,与本站无关。其原创性以及文中陈述文字和内容未经本站证实,本站对该文以及其中全部或者部分内容、文字的真实性、完整性、及时性,不作出任何保证或承若;
3.如本站转载稿涉及版权等问题,请作者及时联系本站,我们会及时处理。
登录后可拥有收藏文章、关注作者等权限...
技术大类 技术大类 | 前端(javascript) | 评论(0) | 阅读(162)