※ [本文转录自 Web_Design 看板] 作者: TonyQ (沉默是金) 看板: Web_Design 标题: [心得]从 js 到 jQuery 之六：五光四色的特效世界 时间: Tue Aug 12 11:45:59 2008 本章一开始 , 我们先来看看一个小弟精心准备的小小demo吧. http://tonyq.org/jqtalk/jq6_effectDemo.html ──────────────────────────────── 呵 , 一个小小的demo , 带下我们今天的主题 , 与其说是特效 , 其实指的是 animation , 动态效果. 其实说到这一章 , 算是会让我比较热血沸腾 , 担心会写到失控的一章 , 当初学 javascript 很大的一个因素是因为这个 ,从第一篇到第五篇, 我们不断的强调 js 的用途主要在於修改页面上的属性 , 而用得最淋漓尽 致的应用 , 就在动态效果. ＠demo页的code好像有一点复杂 , 而且好像没看到 jQuery呢？ 我之所以要特地在最前面放一个传统js写出来的demo页 , 主要是想强调 的是 jQuery 并不能平白生出各种效果 , 也是透过一些搭配来产生这些效果. 比方说在 #18dWSoRf (web_design) 一文中我就用js展示能做到opacity fade 跟color fade的模拟代码 , 当然并没有把所有情境考虑进去 , 但是只要把握 本章我们提的工具 , 你就不会迷失在各种令人目眩神迷的特效里面. js底下没有新把戏 , 只是看你有没有想到而已 . 这章算是传统 js 跟 jQuery差距比较小的一章 , 因为观念是 jQuery无法简化 的 , 只有学习才能真的把非常复杂的事情简化. 当然如果你不是立志要当一个开发效果的coder , 而只是想套用别人的效果 , 本章可以让你对於套用这些效果的「副作用」更了解一些. ＠demo 是怎麽做的？ 我以demo中有用到的一些技巧先行介绍 , 首先各位读者应该有发现 , 他是一个行为一个行为依序进行的 , 在这里我们是透过计时器来处理 . 虽然说计时器是被我包装成我比较习惯使用的模样 , 不过我还是得介绍原型. 传统 js 提供两种计时器 , 其不仅仅是能够提供我们计算时间而已 , 同时他也是属於非同步（Asynchronous）运算的 , 对 multi-thread有了解的版友们可以把它想像成另一个thread. ＠计时器 这两个分别为 Timeout / Interval , 分别有对应的使用跟移除的function, 为 window.setTimeout(expr,time) window.setInterval(expr,time) window.clearTimeout(id) window.clearInterval(id) 先谈谈用法 , expr 可以是javascript的字串 , 像是 "alert('hi');" 它会用eval的方式来呼叫,也可以是函数 , 像是 function(){alert('hi'); 而time则是距离下一次执行的间隔时间（以ms为单位 , 1秒=1000ms） 不管是timeout或interval , 他们第一次都会是在计时器时间到时执行, 但 timeout 跟 interal最大的差异就是 , 前者呼叫时只会执行一次, 後者则是每隔指定时间就会呼叫expr这个函数,直到你把它clear掉. 每次当你呼叫 setTimeout或 setInterval时 , 他都会回传一个数字 , 那个数字就是所谓的timerId , 用来识别多个timer中是哪一个, 你需要透过timerId来clear掉对应的 Timeout 或 Interval. ＠timer这麽猛 , 那我可以什麽都用timeout做非同步处理吗? 由於多一个计时器本身就是不小的成本 , 建议是仅在必要时使用. ＠计时器的时间准确吗？ 他本身难免还是会有一些误差 , 不过我个人经验是在100～200ms左右而已 , 需要较高精确度时 , 时间区间要设小一点 , 然後透过纪录date的时间差来算 目前差距时间,这样会更准确一点. ＠还有其他的东西吗？ 目前扣掉最基本的 show/hide , 你可能会比较想知道怎麽把元素指到指定的 位置,基本上我们也是透过css中的 position:absolute 搭配 left/top移动到 指定的位置 . 当然这样另一个问题就来了 , 我们常会有一个画面上的标地物. 比方说以tip效果而言 , mouseover後显示资料在对应的物品旁边, 我会需要这个事件对象的座标 , 一般在传统js我们会用 offsetLeft跟 offsetTop , 不过这两个dom元件的属性在ie跟fx解读下不同 , 前者会解读成自己跟父元素的left-top差距 , 後者则是在页面上得left-top , 所以在ie底下要取得 正确的 offsetLeft 要跑一个for loop 往父元素加总. 这其实一直都是许多人所碰到的钉子,因为这也是个常见的需求. 以 jQuery而言 ,用原为 dimension plug-in 的 offset(), 它现已被整合进1.2.6 jQuery Core , 可用来取得left跟top , 就不需要自行维护写function找左 上 , 宽高则可透过 css取. 传统作法在这里我先引用别人的文章来做说明 , 实际代码可见底下连结. http://0rz.tw/c74xz function GetTopLeft(elm) ＠我注意到你的图形是跑圆形的 , 圆形的轨迹怎麽来的？ 如果各位读者有看source的话 , 应该会看到我是用 ( rCosΘ , rSinθ) 的方案 , 并且让半径r 成比例缩小来达到螺旋状的效果 , 对於三角函数还有印象的朋友, 可以看底下这个简单的示意图, 回想圆投影的公式,当然这不是这里的重点 , 就不多做着墨. . - . . r ／｜. . . . ／θ｜ . . ￣￣ . . . ` 我想表达的是对一个平面物来讲 , 他就是只有 x,y座标 , 你必须去计算他每个时间点的每个位置才能做出一连串的轨迹, 这过程中你偶尔会需要一些数学的辅助 , 像是线性递增的等加级数就是常 用的技巧之一, 相对的 , 算法的优劣也就是决定效果出来好不好的关键 . 我们继续分享一些操作上得基本技巧 , 当你想把一个位置从 0,0 慢慢移动到 50,15 时, 假设设定移动15次时走到 , 那你每次就要走 ((50-0)/15, (15-0)/15) 的长度 , 就可以在次数到达时 , 走到目的地 . 当然如果你想扭扭腰之类的 , 就得去计算各个折点 , 或者仰赖简谐运动公式. （这边都还在高中物理/高中数学的范畴 , 想想高中真是学了一堆鬼东西..) 至於立体轨迹 , 可能需要去找一下怎麽把 x,y,z投影到x,y平面的公式. 想把移动轨迹做水平扭曲或垂直扭曲的话 , 旋转矩阵 会是个好帮手. 好啦 , 我知道不少位读者现在心理正在哀号这些是什麽鬼东西 , 我只是想提醒大家 , 学习可以简化问题的难度... 有付出去学习就会有对应的收获 .. 如果做不到 , 就是要多花时间学 , 而不是说对方就像神一样平白变魔术 , 仰赖jQuery协助我们做到许多 特效时 , 也可以顺便思考它是怎麽做的 , 笔者是一直对於没把离散跟线代给学好 , 觉得有些遗憾 , 当然本身不是数学相关科系出身 , 所以知道的也不是很多, 对於常常有人在讨论数学到底有没有用的议题 , 我想学习对於简化事情都是有正面帮助的. 无趣的碎碎念与闲话谈的够多了 , 让我们进下一个部份吧. ＠副作用？ 像我红色点的轨迹纪录中是用多个div 当纪录点 , 这在本来就很庞大的 网页的话就可能会造成负担 , 当然像这种额外插几个元素进去处理 在各plug-in都是很常见的作法 . 有时候可能一来是需要考虑运算的复杂度 , 二来是要考虑到多个元件 会不会有互相干扰的状况 , 这些都是需要列入考虑的 . 在底下两个前提下 , js能透过计算作不少事情. 1.不绘图: 虽然js可以做到类似点阵绘图的效果 , 可是效能很差 ,而且又不能存成图片 , 基本上是接近废物 , 2.不需要对图片做特别处理（扭曲翻转 ） 但是相对的 js 只要一多 , 对浏览器来讲负担就很重 , 使用者应该有经验就是逛网页逛一逛突然间记忆体用量暴增 , 那通常都是 js 跟 图片过多且没有好好的释放掉所导致的 , 这点在 map 类的网页特别常见 , firefox以前有一只叫leak Monitor的 plug-in可以观察哪些资料没被释放掉 , 不过後来一直看到各网站都有, 就乾脆关掉了...有兴趣者可参考下方连结. https://addons.mozilla.org/zh-TW/firefox/addon/2490 虽然由一个推广 js的人来讲很奇怪 , 不过请不要觉得 javascript 是万灵药, 很多事情不是不存在 ,只是还没遇上（泪目）, 在要考虑到 js solution时 , 记得把对应的 loding风险列入评估. 基本上我会建议不会再用到的物件可以用 [delete]这个关键字顺手删掉, 虽然把需要用到的东西顺手delete掉的情况也是偶尔会发生 . (摊手) 关於js coding上得一些减轻负担或增加体验的经验 , 有机会再跟大家分享 . ＠关於 js 我们谈的够多了 , 来点 jQuery吧 基本上在特效这点 jQuery可说没什麽特别好帮忙的 .（才怪!） 它只是帮你处理许多做动态效果所需要的跨平台支援 , 跟提供了数种基本实用的基本动态实做效果而已嘛...^^ 接下来就来看看两种最常见的特效 fadeIn跟 slideDown 吧 像是fadeIn/fadeOut/fadeTo (采透明度方案的) , 还有 slideDown / slideUp 这类花俏的弹出弹入 , 几乎是各家都不会少的. 简单demo就好 :) http://tonyq.org/jqtalk/jq6_jqEffectsDemo.html ＠我可以简单的做到其他的效果吗? 这里要特别介绍的是 animate( ) 这个方法 , 他可以让你提供多个参数, 包括 param duration (经过时间,也可填'fast','slow','normal') easing（缓和方式,目前预设是'inear' 线性法 ,另有 'swing'可选) 还有callback 指的是在animate动作结束後要呼叫的方法. 我想应该看到这里还有很多人跟我一样不晓得这能干麻吧? 他的概念其实很简单 , 你结果想要达到什麽 , 就写在 param 里面 , 过程想要什麽效果 , 就交给 easing决定 . 比方说我现在想从现在的 , 宽度变400px ,高度变200px. 并且希望他在 1.5秒内完成 , 就这样写 $("#helloButton").click( function(){ $("#anNode").animate( { width: "400px", height: "200px" } , 1500 ); } ); 简单示例 http://tonyq.org/jqtalk/jq6_jqAnimateDemo.html 不过比较遗憾的是 animate目前只支援可成为单一数字化的栏位, 比方说border宽度 , height , width , left, top 之类的 像color跟background color 目前都得透过 plug-in做到 . 关於color的相关的mailing 问题 http://www.mail-archive.com/[email protected]/msg17329.html 扩充 animate color的 plug-in http://plugins.jquery.com/project/color 目前试用过 , 至少backgroundColor没问题 (background不行就是了:P) 加上颜色变换之後的简单demo http://tonyq.org/jqtalk/jq6_jqAnimateColorDemo.html ＠还有什麽好东西？ 新版目前还支援 queue的效果 , 可以让你依序执行多个 function , 用这东西写的话我本来的code就不用写那麽长了...:P 直接看doc上得demo页 , 把多个效果组合在一起 . http://docs.jquery.com/Effects/queue ＠体验时间 由於这整章几乎都在体验时间...这次就先不介绍了 :P （另外是这章的撰写时间破历史新高 , 害我打破一天一篇的计画..） --- 这篇看起来好像写了很多 , 其实又好像什麽都没写 ,真的是学了越多忘了越多 .XD 顺便祝贺一下 , 家里网路终於在请假半天的代价下搞定了 , 希望晚上回来能有比较正常的网路频宽可以用 ,逛个ptt打个字都要0.5秒 delay 还要写长文真是太折磨我了些... 如果有错字或者缺字就是频宽害的（牵托ing...) 总之 , 第六篇希望给大家有一点惊艳的感觉 , 下一篇我们要回头讲新增/删除网页元素 , 一样会很有趣的 . :) -- What do you want to have ? / What do you have? 从书本中，你可以发现我的各种兴趣。 从ＣＤ中，你可以了解我所喜欢的偶像明星。 或许从文字你很难以了解一个人，但从物品可以。 My PPolis , My past. http://ppolis.tw/user/Tony --- 重新修整一些我觉得极度不通畅的文句 , 跟放上我忘记放的两个sample link. 另摘於下 http://tonyq.org/jqtalk/jq6_jqAnimateDemo.html http://tonyq.org/jqtalk/jq6_jqAnimatecolorDemo.html /*加入color plug-in*/ --

※ 发信站: 批踢踢实业坊(ptt.cc) ◆ From: 220.132.59.247 ※ 编辑: TonyQ 来自: 220.128.219.202 (08/12 13:58) -- What do you want to have ? / What do you have? 从书本中，你可以发现我的各种兴趣。 从ＣＤ中，你可以了解我所喜欢的偶像明星。 或许从文字你很难以了解一个人，但从物品可以。 My PPolis , My past. http://ppolis.tw/user/Tony --

※ 发信站: 批踢踢实业坊(ptt.cc) ◆ From: 220.128.219.202 ※ 编辑: TonyQ 来自: 61.224.239.208 (12/16 00:00)