如何简单地用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 相关文章推荐
贴一个在Mozilla中常用的Javascript代码
Jan 09 Javascript
爱恋千雪-US-AscII加密解密工具(网页加密)下载
Jun 06 Javascript
js页面滚动时层智能浮动定位实现(jQuery/MooTools)
Aug 23 Javascript
在Iframe中获取父窗口中表单的值(示例代码)
Nov 22 Javascript
js仿百度切换皮肤功能(html+css)
Jul 10 Javascript
AngularJS+Bootstrap实现多文件上传与管理
Nov 08 Javascript
vue2.0获取自定义属性的值
Mar 28 Javascript
javascript编程开发中取色器及封装$函数用法示例
Aug 09 Javascript
微信小程序发送短信验证码完整实例
Jan 07 Javascript
浅谈webpack devtool里的7种SourceMap模式
Jan 14 Javascript
微信小程序弹窗禁止页面滚动的实现代码
Dec 30 Javascript
Vue3如何理解ref toRef和toRefs的区别
Feb 18 Vue.js
可缩放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
memcached 和 mysql 主从环境下php开发代码详解
2010/05/16 PHP
PHP实现的62进制转10进制,10进制转62进制函数示例
2019/06/06 PHP
jquery模拟SELECT下拉框取值效果
2013/10/23 Javascript
js调用后台、后台调用前台等方法总结
2014/04/17 Javascript
jquery隔行换色效果实现方法
2015/01/15 Javascript
JavaScript数组前面插入元素的方法
2015/04/06 Javascript
详解JavaScript中void语句的使用
2015/06/04 Javascript
浅谈JavaScript中setInterval和setTimeout的使用问题
2015/08/01 Javascript
js面向对象的写法
2016/02/19 Javascript
浅谈Javascript中的12种DOM节点类型
2016/08/19 Javascript
详解数组Array.sort()排序的方法
2020/05/09 Javascript
nodejs入门教程二:创建一个简单应用示例
2017/04/24 NodeJs
js canvas实现擦除效果示例代码
2017/04/26 Javascript
mui上拉加载更多下拉刷新数据的封装过程
2017/11/03 Javascript
Vue2.5 结合 Element UI 之 Table 和 Pagination 组件实现分页功能
2018/01/26 Javascript
js中自定义react数据验证组件实例详解
2018/10/19 Javascript
vue中实现高德定位功能
2019/12/03 Javascript
JS实现音乐钢琴特效
2020/01/06 Javascript
python 七种邮件内容发送方法实例
2014/04/22 Python
Python实例之wxpython中Frame使用方法
2014/06/09 Python
Linux环境下MySQL-python安装过程分享
2015/02/02 Python
Python UnboundLocalError和NameError错误根源案例解析
2018/10/31 Python
Python数据集切分实例
2018/12/08 Python
Python Django简单实现session登录注销过程详解
2019/08/06 Python
python网络爬虫 CrawlSpider使用详解
2019/09/27 Python
BeautifulSoup中find和find_all的使用详解
2020/12/07 Python
css3实现一款模仿iphone样式的注册表单
2013/03/20 HTML / CSS
CSS3制作炫酷的下拉菜单及弹起式选单的实例分享
2016/05/17 HTML / CSS
西班牙灯具网上商店:Lampara.es
2018/06/05 全球购物
zooplus德国:便宜地订购动物用品、动物饲料、动物食品
2020/05/06 全球购物
国际政治个人自荐信范文
2013/11/26 职场文书
个人社会实践自我鉴定
2014/03/24 职场文书
婚前财产公证书
2014/04/10 职场文书
使用goaccess分析nginx日志的详细方法
2021/07/09 Servers
修改并编译golang源码的操作步骤
2021/07/25 Golang
python元组打包和解包过程详解
2021/08/02 Python