UDN-企业互联网技术人气社区

板块导航

浏览  : 375
回复  : 3

[mootools] Mootools 1.2教程 同时进行多个形变动画

[复制链接]
张同学爱英语的头像 楼主
发表于 2015-8-21 12:31:45 | 显示全部楼层 |阅读模式
本帖最后由 张同学爱英语 于 2015-8-21 12:33 编辑

      今天我们来学习一下Fx.Elements插件,这是一个基于Fx.Morph的插件。与应用于单个元素不同的是,Fx.Elements可以允许你一次性给多个元素添加动画。

      这在你给多个元素添加有相同选项的形变动画时非常有用。就像我们在第20讲中看到的最后一个例子一样。


      基本用法


      使用Fx.Elements的方法看起来和Fx.Morph差不多。这两者之间的区别在于.start({})方法和.set({})方法。


      为了保证事情简洁,让我们首先建立一个元素数组,以用来传递给Fx.Elements。


      参考代码:


      var fxElementsArray = $$('.myElementClass');


      现在我们就可以把我们的数组传递给Fx.Elements对象了。


      参考代码:
  1. var fxElementsObject = new Fx.Elements(fxElementsArray, {
  2. // Fx选项
  3. link: 'chain',
  4. duration: 1000,
  5. transition: 'sine:in:out',
  6. // Fx事件
  7. onStart: function(){
  8. startInd.highlight('#C3E608');
  9. }
  10. });
复制代码
     和Fx.Morph一样,Fx.Elements扩展了Fx类,可以允许你使用Fx的全部选项和事件。


      .start({})和.set({})方法


      要开始一个Fx.Elements效果,或者使用Fx.Elements设置样式,你可以像使用Fx.Tween和Fx.Morph那样做,不过不是直接把设置直接应用到Fx.Elements对象上,而是通过索引引用对应的元素——第一个元素是0,第二个是1,以此类推。


      参考代码:
  1. // 你可以用.set({...})来设置样式
  2. fxElementsObject .set({
  3. '0': {
  4. 'height': 10,
  5. 'width': 10,
  6. 'background-color': '#333'
  7. },
  8. '1': {
  9. 'width': 10,
  10. 'border': '1px dashed #333'
  11. }
  12. });
  13. // 或者用.start({...})创建渐变动画
  14. fxElementsObject .start({
  15. '0': {
  16. 'height': [50, 200],
  17. 'width': 50,
  18. 'background-color': '#87AEE1'
  19. },
  20. '1': {
  21. 'width': [100, 200],
  22. 'border': '5px dashed #333'
  23. }
  24. });
复制代码
     就像Fx.Morph,你可以为元素的渐变动画设定任何一个开始值和结束值,你也可以只设置一个参数(就像我们上面只给宽度设置了一个值),那么这个元素将会从当前值变化到新参数指定的值。


      这就是关于Fx.Elements的全部内容了。可以看看下面的例子,看看它们是怎么使用的。


      示例代码


      这里我们对两个元素使用了Fx.Elements。在渐变动画中有几个不同的类型可以选择,同时暂停按钮可以让你暂停动画。


      首先,我们来创建我们的元素,我们的可能告知按钮(包括重置(reset)按钮、暂停(pause)按钮和恢复(resume)按钮),还有一些指示器,以便让我们看明白这个过程。


      参考代码:
  1. <div id="start_ind" class="ind">onStart</div>
  2. <div id="cancel_ind" class="ind">onCancel</div>
  3. <div id="complete_ind" class="ind">onComplete</div>
  4. <div id="chain_complete_ind" class="ind">onChainComplete</div>
  5. <span id='buttons'>
  6. <button id="fxstart">Start A</button>
  7. <button id="fxstartB">Start B</button>
  8. <button id="fxset">Reset</button>
  9. <button id="fxpause">Pause</button>
  10. <button id="fxresume">Resume</button>
  11. </span>
  12. <div class="myElementClass">Element 0</div>
  13. <div class="myElementClass">Element 1</div>
复制代码
     我们的CSS代码也很简单


      参考代码:
  1. .ind {
  2. width: 200px;
  3. padding: 10px;
  4. background-color: #87AEE1;
  5. font-weight: bold;
  6. border-bottom: 1px solid white;
  7. }
  8. .myElementClass {
  9. height: 50px;
  10. width: 100px;
  11. background-color: #FFFFCC;
  12. border: 1px solid #FFFFCC;
  13. padding: 20px;
  14. }
  15. #buttons {
  16. margin: 20px 0;
  17. display: block;
  18. }
复制代码
     下面是MooTools代码。


      参考代码:
  1. var startFXElement = function(){
  2. this.start({
  3. '0': {
  4. 'height': [50, 200],
  5. 'width': 50,
  6. 'background-color': '#87AEE1'
  7. },
  8. '1': {
  9. 'width': [100, 200],
  10. 'border': '5px dashed #333'
  11. }
  12. });
  13. }
  14. var startFXElementB = function(){
  15. this.start({
  16. '0': {
  17. 'width': 500,
  18. 'background-color': '#333'
  19. },
  20. '1': {
  21. 'width': 500,
  22. 'border': '10px solid #DC1E6D'
  23. }
  24. });
  25. }
  26. var setFXElement = function(){
  27. this.set({
  28. '0': {
  29. 'height': 50,
  30. 'background-color': '#FFFFCC',
  31. 'width': 100
  32. },
  33. '1': {
  34. 'height': 50,
  35. 'width': 100,
  36. 'border': 'none'
  37. }
  38. });
  39. }
  40. window.addEvent('domready', function() {
  41. var fxElementsArray = $('.myElementClass');
  42. var startInd = $('start_ind');
  43. var cancelInd = $('cancel_ind');
  44. var completeInd = $('complete_ind');
  45. var chainCompleteInd = $('chain_complete_ind');
  46. var fxElementsObject = new Fx.Elements(fxElementsArray, {
  47. //Fx Options
  48. link: 'chain',
  49. duration: 1000,
  50. transition: 'sine:in:out',
  51. //Fx Events
  52. onStart: function(){
  53. startInd.highlight('#C3E608');
  54. },
  55. onCancel: function(){
  56. cancelInd.highlight('#C3E608');
  57. },
  58. onComplete: function(){
  59. completeInd.highlight('#C3E608');
  60. },
  61. onChainComplete: function(){
  62. chainCompleteInd.highlight('#C3E608');
  63. }
  64. });
  65. $('fxstart').addEvent('click', startFXElement.bind(fxElementsObject));
  66. $('fxstartB').addEvent('click', startFXElementB.bind(fxElementsObject));
  67. $('fxset').addEvent('click', setFXElement.bind(fxElementsObject));
  68. $('fxpause').addEvent('click', function(){
  69. fxElementsObject.pause();
  70. });
  71. $('fxresume').addEvent('click', function(){
  72. fxElementsObject.resume();
  73. });
  74. });
复制代码




相关帖子

发表于 2015-8-21 12:31:46 | 显示全部楼层
经常看到”张同学爱英语“发帖,辛苦了
点评 ( 1 ) 收起 / 展开点评

张同学爱英语 2015年08月21日 15:11 详情 回复

哈哈哈 太客气呢

使用道具 举报

回复

张同学爱英语的头像 楼主
发表于 2015-8-21 15:11:41 | 显示全部楼层
中场灵魂 发表于 2015-8-21 12:31
经常看到”张同学爱英语“发帖,辛苦了

哈哈哈 太客气呢
使用道具 举报

回复

发表于 2015-9-19 01:55:26 | 显示全部楼层
jq现在应该算是最火的js框架类了吧?确实很强大extjs基于Yahoo UI的扩展,界面布局和效果方面很给力,但就是有点复杂
使用道具 举报

回复

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

关于我们
联系我们
  • 电话:010-86393388
  • 邮件:udn@yonyou.com
  • 地址:北京市海淀区北清路68号
移动客户端下载
关注我们
  • 微信公众号:yonyouudn
  • 扫描右侧二维码关注我们
  • 专注企业互联网的技术社区
版权所有:用友网络科技股份有限公司82041 京ICP备05007539号-11 京公网网备安1101080209224 Powered by Discuz!
快速回复 返回列表 返回顶部