如何简单地用YUI做JavaScript动画


Posted in Javascript onMarch 10, 2007

原文地址:http://www.jackslocum.com/blog/2006/08/24/javascript-animations-with-yahoo-ui-made-easy/

YUI的动画类简直就是一门艺术工作。不像其它的传统的JS库,提供了已经“预设好”的直接可运行的效果,相反,它由开发者做自己喜欢的。在这点,我比较喜欢适当地运行一些动画和变换效果,越多越好。

按照这么地说,也会有个问题。动画API是非常“底层”的工作,而且需要您花时间去弄的,子类的构建函数会又长又??碌摹R虼耍?谏弦环⒉嫉陌姹局? 我把 YAHOO.ext.Element的动画效果尽量简单地调用。其实,在这个网站的大多数效果都是它完成的。

但如果我想做些较复杂的效果,该怎么办?当某个效果完成后,YUI能够以函数的方式提供一个回调(callback).利用Callback你能够将多个效果排队来做出复杂的效果。唯一的问题是,在其函数内,每一步效果的封装好的,这样,代码起来就很复杂可怕了。另外一个问题是,当你同一时内多个元素发生动画效果的话,代码会持续地随着每个元素它拥有的回调函数的增长而增长。不得不说,YahooUI!在这方面,有点难以适用于开发,--尤其日渐常用这类效果。

新版的yui.ext包含了原本yui做动画所需的复杂代码,甚至比你想的要简单。这里是功能列表:

*自动调整动画顺序 --回调函数不再有啦!

* 处理多个元素的动画更方便,--只要设置一下属性。
* 对多个元素的动画效果,自动同步和调整顺序 --只要添加 Actors到一个 Animator 就可以同步。
* 一些常用的预设效果(尽管yui不会引起内存泄漏,但切勿替换、复制script.aculo.us那炫目的效果【 译者frank注:这里是反语,讽刺script.aculo.us会内存泄漏)】
* 允许动画过程中执行任何的函数。
*允许动画过程中调用自动调整的同步函数。

*动画列表(一组的动画效果)可按需预定义和执行

好,让我们看看进入代码部分
以id为example的div新建一个actor对象。第三个参数真告诉它立即开始捕捉动作(否则的话你必须调用startCature()) 如果是false则是一个标准的元素对象,同时执行所有调用。
var exdiv = new YAHOO.ext.Actor('example', null, true);
产生一个从上移动下来的效果:
exdiv.moveIn('top');
播放动画:
exdiv.play();

另外一个范例:
这是范例的目的是在导航上(Jack's Blog)做交换效果
注意: Animators 可以支持一个或以上的元素的排序和同步动画
创建一个animator,包含两个Actor (this.minbar and this.dockbar),然后开始捕捉他们的动作。
var anim = new YAHOO.ext.Animator(this.minbar, this.dockbar); 
anim.startCapture();
开始动画:
this.dockbar.setX(-this.dockedWidth); 
this.dockbar.setWidth(this.dockedWidth); 
this.dockbar.setVisible(true);
beginSync() 告诉 animator 组合每个actions的动作,同时播放这些动画。
anim.beginSync(); 
this.minbar.move('left', this.minbar.getWidth()+this.margin, true, .35); 
this.dockbar.move('right', this.dockedWidth+this.margin, true, .4, null, YAHOO.util.Easing.easeOut); 
anim.endSync();
播放完成后执行这个 callback.
anim.play(this.fireDocked);

更多复杂的例子
Click here to see what it does. Sorry, this depended on an old blog layout and no longer works. I won't go step by step but notice how the code flows like a normal javascript app? You would never know that there are over 10 different asynchronous animations being sequenced. Notice the async calls too - those are calling out to my navbar and telling it to dock or undock, which also performs more animations. The Animator here waits for those animations to complete before continuing. Dont' mind my code spacing, I am big fan of spacing code into logical blocks!2
var animator = new YAHOO.ext.Animator();
var cursor = new YAHOO.ext.Actor('cursor-img', animator);  
var resize = new YAHOO.ext.Actor('resize-img', animator); 
var click = new YAHOO.ext.Actor('click-img', animator);  
var splitter = new YAHOO.ext.Actor('splitter', animator);   
animator.startCapture();  
animator.addAsyncCall(Blog.navbar.undockDelegate, 1);  
cursor.show();  
cursor.moveTo(500,400);  
cursor.moveTo(20, getEl('navbar').getY()+10, true, .75); 
click.clearOpacity(); 
click.show();  
click.alignTo(cursor, 'tl', [-4, -4]); 
animator.pause(.5);  
click.hide(true, .7);    
animator.addAsyncCall(Blog.navbar.dockDelegate, 1);    
cursor.alignTo('splitter', 'tr', [0, +100], true, 1); 
resize.alignTo('splitter', 'tr', [-12, +100]);
animator.beginSync(); 
cursor.hide();  
resize.show();  
animator.endSync();  
splitter.highlight('#EEEEFF', '#C3DAF9', .3); 
splitter.highlight('#EEEEFF', '#C3DAF9', .3); 
animator.pause(2);
resize.hide(); 
cursor.show(); 
cursor.moveTo(-100, -100, true);   
animator.stopCapture();  
animator.play();
如果你喜欢做动画,那你一定会爱上yui,特别是现在做动画更容易了。
注意: 这些功能同样包含在 YAHOO.ext.UpdateManager里面. 这是一个使用YAHOO.util.Connect 来AJAX更新元素的简单API ,基于事件驱动使得YAHOO.util.Connect 代码更简洁。 最好的是,你亲自去看看内部的代码因为我现在实在太累了-不能再写BLOGL了!
Javascript 相关文章推荐
javascript parseInt 大改造
Sep 27 Javascript
JS正则表达式获取分组内容的方法详解
Nov 15 Javascript
浅谈javascript 迭代方法
Jan 21 Javascript
14款经典网页图片和文字特效的jQuery插件-前端开发必备
Aug 25 Javascript
总结JavaScript中布尔操作符||与&&的使用技巧
Nov 17 Javascript
vue实现全选、反选功能
Nov 17 Javascript
Vue按需加载的具体实现
Dec 02 Javascript
使用wxapp-img-loader自定义组件实现微信小程序图片预加载功能
Oct 18 Javascript
iview在vue-cli3如何按需加载的方法
Oct 31 Javascript
Jquery和CSS实现选择框重置按钮功能
Nov 08 jQuery
推荐15个最好用的JavaScript代码压缩工具
Feb 13 Javascript
node.js express框架实现文件上传与下载功能实例详解
Oct 15 Javascript
可缩放Reloaded-一个针对可缩放元素的复用组件
Mar 10 #Javascript
为Yahoo! UI Extensions Grid增加内置的可编辑器
Mar 10 #Javascript
Gird事件机制初级读本
Mar 10 #Javascript
Gird组件 Part-3:范例RSSFeed Viewer
Mar 10 #Javascript
对YUI扩展的Gird组件 Part-2
Mar 10 #Javascript
对YUI扩展的Gird组件 Part-1
Mar 10 #Javascript
学习YUI.Ext第七日-View&JSONView Part Two-一个画室网站的案例
Mar 10 #Javascript
You might like
Laravel框架中实现使用阿里云ACE缓存服务
2015/02/10 PHP
Smarty简单生成表单元素的方法示例
2016/05/23 PHP
学习ExtJS border布局
2009/10/08 Javascript
Jquery 弹出层插件实现代码
2009/10/24 Javascript
JavaScript判断窗口是否最小化的代码(跨浏览器)
2010/08/01 Javascript
js简单实现HTML标签Select联动带跳转
2013/10/23 Javascript
js 立即调用的函数表达式如何写
2014/01/12 Javascript
jquery.hotkeys监听键盘按下事件keydown插件
2014/05/11 Javascript
javascript日期计算实例分析
2015/06/29 Javascript
jQuery带进度条全屏图片轮播特效代码分享
2020/06/28 Javascript
JS动态添加选项案例分析
2016/10/17 Javascript
浅析vue数据绑定
2017/01/17 Javascript
浅谈jQuery的bind和unbind事件(绑定和解绑事件)
2017/03/02 Javascript
基于js文件加载优化(详解)
2018/01/03 Javascript
Vue-Router2.X多种路由实现方式总结
2018/02/09 Javascript
js实现无刷新监听URL的变化示例代码详解
2020/06/03 Javascript
Python实例分享:快速查找出被挂马的文件
2014/06/08 Python
修改Python的pyxmpp2中的主循环使其提高性能
2015/04/24 Python
Python设置Socket代理及实现远程摄像头控制的例子
2015/11/13 Python
解决Python 命令行执行脚本时,提示导入的包找不到的问题
2019/01/19 Python
tensorflow通过模型文件,使用tensorboard查看其模型图Graph方式
2020/01/23 Python
Python如何测试stdout输出
2020/08/10 Python
Django静态文件加载失败解决方案
2020/08/26 Python
CSS3 优势以及网页设计师如何使用CSS3技术
2009/07/29 HTML / CSS
纯CSS3实现圆角效果(含IE兼容解决方法)
2014/05/07 HTML / CSS
芬兰汽车配件商店:Autonvaraosat24
2017/01/30 全球购物
娇韵诗加拿大官网:Clarins加拿大
2017/11/20 全球购物
JavaScript实现前端网页版倒计时
2021/03/24 Javascript
个人优缺点自我评价
2014/01/27 职场文书
毕业典礼演讲稿
2014/05/13 职场文书
2014领导干部学习焦裕禄同志先进事迹思想汇报
2014/09/19 职场文书
党的群众路线教育实践活动个人剖析材料
2014/10/07 职场文书
个人纪律作风整改措施思想汇报
2014/10/12 职场文书
2015年元旦标语大全
2014/12/09 职场文书
2015年房地产个人工作总结
2015/05/26 职场文书
小学班主任工作随笔
2015/08/15 职场文书