题记: 当你不再依赖JQuery时,当你已经厌倦了引入js类库实现一些动画效果的方式,当你想实现一个简单而实用的动画框架......下面介 绍下愚人设计的动画框架:支持动画缓动算法函数,如Linear、Cubic、Back、Bounce,支持改变高度,宽度,透明度,边框,外边距的基本 动画,支持动画的回调函数,如开始、暂停、完成的callback等。
Section One
游戏动画,Flash动画里一个比较重要的概念是帧频,即每秒播放多少帧动画,一般动画是30帧/秒,单位为fps(frames per second)。
对于匀速运动来说:如果一个动画的持续时间duration为500ms,帧频frequence为30fps,则总帧数frames为(500/1000)*30 = 15
,即该动画过程有15个“画面”,每走一帧,都计算出一个画面:画面当前位置 = 开始位置 + (当前帧/总帧数)(结束位置-开始位置)
,如果当前帧是最后一帧,则动画结束。其中setTimeout或setInterval每隔(500/15)ms
时间段调用一次函数,即计算一个画面。
来看下线性运动Linear缓动算法函数,t表示当前帧,b表示开始位置,c表示发生偏移的距离值,即当前位置-开始位置,d表示总帧数,符合上面 的推理解释,对于其他的算法函数,道理其实都是一样,只不过在运动过程中的曲线不同,有些呈现抛物线,有些呈现线性指数,对于数学感兴趣的可以研究下这些 算法函数,我也是略知皮毛:
Linear: function (t, b, c, d) { return c * t / d + b; }
清楚了以上问题后,对于js的动画框架设计,就迎刃而解了,废话不多说,来个 demo 先。
Section Two
代码总体结构,具体说明看注释,需注意的问题:1)在私有作用域里定义的变量,要在外部能访问到,需挂在window全局对象下,如window.Anim = Anim;2)动画元素需要设置定位position属性;3)传入的外边距参数需要驼峰式命名,并且当同时设置targetPos(元素目标位置)和外边距时,外边距的值会覆盖targetPos的值,如marginLeft的值会覆盖targetPos.left的值,因为外边距实现动画的原理也是利用元素的left、top值:
(function(window) { /* * 工具对象 * 包含基本的dom操作,event操作 */ var util = {}; util.dom = { // 获取元素计算样式 getPropValue: function(element, propName) { }, // 设置透明度 setOpacity: function(obj, num) { document.all ? obj.filters.alpha.opacity = num : obj.style.opacity = num / 100; } // ...... }; util.event = { // 获取事件对象 getEvent: function(event) { }, // 获取事件源目标 getTarget: function(event) { }, // 注册事件 addEvent: function(element, event, handler) { }, // 删除事件 removeEvent: function(element, event, handler) { }, // 阻止默认行为 preventDefault: function(event) { }, // 阻止事件冒泡 stopPropagation: function(event) { } // ...... }; /* * 动画缓动函数 */ var Tween = { Linear: function (t, b, c, d) { return c * t / d + b; }, Quad: { easeIn: function (t, b, c, d) { return c * (t /= d) * t + b; }, easeOut: function (t, b, c, d) { return -c * (t /= d) * (t - 2) + b; }, easeInOut: function (t, b, c, d) { if ((t /= d / 2) < 1) return c / 2 * t * t + b; return -c / 2 * ((--t) * (t - 2) - 1) + b; } }, // ... }; /* * 核心动画 * @elem 要执行动画的元素 * @options left、top、opacity、width、height、border、marginLeft、marginRight、marginTop、marginBottom */ function Anim(elem, options) { this.elem = elem; this.options = options; // 默认样式属性 this.defaults = { }; } Anim.prototype = { constructor: Anim, // 初始化动画 init: function() { this.isStart = false; this.isStop = false; this.isComplete = false; this.isBack = false; this.start(); }, // 初始化数据 before: function() { }, // 开始动画 start: function() { }, // 动画过程 run: function() { this.before(); // 动画参数匹配 this.match(); // 原路返回 if (this.isBack) { // ... } if (this.isStart) { this.onStart.call(this.elem); // 计算动画 this.count(); } }, // 匹配动画的参数 match: function() { }, // 计算动画 count: function() { }, // 原路返回 back: function() { }, // 停止动画 stop: function() { }, // 重置元素 reset: function() { } }; // 全局使用 if (!window.util) { window.util = util; } if (!window.Anim) { window.Anim = Anim; } if (!window.Tween) { window.Tween = Tween; } })(window);
Last
使用非常简单,初始化参数对象,然后调用构造函数Anim即可:
// 动画参数设置 var options = { duration: 2000, // 动画持续时间 frequence: 30, // 帧频 tweenFunc: Tween.Linear, // 动画缓动函数 targetPos: {left: 400, top: 300}, // 元素目标位置 opacity: 40, // 透明度(可选) width: 80, // 宽度(可选) height: 80, // 高度(可选) // marginTop: 100, // 上边距(可选) border: '2px solid red', // 边框(可选) // 动画开始callback(可选) onStart: function() { // this指向当前动画元素 }, // 动画停止callback(可选) onStop: function() { // this指向当前动画元素 }, // 动画完成callback(可选) onComplete: function() { // this指向当前动画元素 } }; var anim = new Anim(animElem, options);
相关推荐
SceneGraph.js, HTML5 Canvas 和动画框架 SceneGraph.jsSceneGraph.js 是面向HTML5的面向对象对象,它是一个功能强大且非常面向对象的场景图形框架,它是为了简化应用程序和游戏的开发而在HTML5中实现的。...
##简介AnimateEasy.js是一个通过javascript来实现CSS3动画的js微型框架它小巧的同时使用非常方便并且功能强大,如果你在为以下问题烦恼,那么它将是你的不二选择!对编写CSS3动画的大量的冗余编写工作感到不满对CSS3...
它封装JavaScript常用的功能代码,提供一种简便的JavaScript设计模式,优化HTML文档操作、事件处理、动画设计和Ajax交互。 jQuery的核心特性可以总结为:具有独特的链式语法和短小清晰的多功能接口;具有高效灵活的...
本书共分17章,分别介绍了JavaScript的对象编程、JavaScript浏览器对象模型和事件机制、ExtJS的核心类库和组件、ExtJS的事件处理方式、设计进度条、设计工具栏和菜单栏、设计面板、设计表格、设计表单、设计数据表、...
它封装JavaScript常用的功能代码,提供一种简便的JavaScript设计模式,优化HTML文档操作、事件处理、动画设计和Ajax交互。 jQuery的核心特性可以总结为:具有独特的链式语法和短小清晰的多功能接口;具有高效灵活的...
·资源文件素材准备·页面框架设计 2)个人相册展示页面设计与代码实现 ·DIV+CSS整体框架布局设计与实现 ·图片展示设计与实现 ·左右按钮设计与实现 ·运行网页,查看效果 3)相册展示轮播特效设计与JavaScript功能...
课程设计说明 关于引用作品版权说明 第1章 Bootstrap入门 1 Bootstrap简介 1.1 Bootstrap简介 1.2 Bootstrap文件结构和标准模板 操作案例:在页面中使用Bootstrap 2 Bootstrap功能介绍 2.1.Bootstrap构成模块 2.2 ...
注:无后台 全屏响应式创意视差动画效果404页面模板
jQuery的语法设计可以使开发者更加便捷,例如操作文档对象、选择DOM元素、制作动画效果、事件处理、使用Ajax以及其他功能。除此以外,jQuery提供API让开发者编写插件。其模块化的使用方式使开发者可以很轻松的开发出...
React 动画库:如果你在使用 React 框架,可以考虑使用像 React Spring、Framer Motion 等专门为 React 设计的动画库,简化动画开发流程。 CSS 预处理器:使用像 Sass、Less 等 CSS 预处理器可以简化 CSS 编写过程...
本书共分17章,分别介绍了JavaScript的对象编程、JavaScript浏览器对象模型和事件机制、ExtJS的核心类库和组件、ExtJS的事件处理方式、设计进度条、设计工具栏和菜单栏、设计面板、设计表格、设计表单、设计数据表、...
jQuery的语法设计可以使开发者更加便捷,例如操作文档对象、选择DOM元素、制作动画效果、事件处理、使用Ajax以及其他功能。除此以外,jQuery提供API让开发者编写插件。其模块化的使用方式使开发者可以很轻松的开发出...
但它提供的功能要比Prototype.js多,整体设计也比Prototype.js要相对完善,功能更强大,比如增加了动画特效、拖放操作等等。总之,Mootools是一个非常优秀的Javascript框架,更多精髓部分等待你去发掘,希望你也能...
基于Threejs的DIY电脑3D动画网页,主要使用Threejs和WebGL技术实现,通过使用Threejs的WebGLRenderer渲染器,实现对电脑的渲染,通过使用Threejs的Camera相机,实现对电脑的观察,通过blender建模,将各个电脑模型...
jQuery是一个快速、简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库(或JavaScript框架)。jQuery设计的宗旨是“write Less,Do More”,即倡导写更少的代码,做更多的事情。它封装JavaScript...
Sequence.js 自适应CSS动画框架,用于创建独特的滑块,演示文稿,横幅和其他基于步骤的应用程序。 Sequence.js提供了基于步骤的应用程序(如滑块和演示文稿)所需的所有JavaScript功能,使您可以集中精力制作具有...