009_Raphael动画
1. 元素變換
1.1. 唯一推薦的元素變換方法是transform()方法。它有4個(gè)命令:
- T/t平移
- s縮放
- r按角度旋轉(zhuǎn)
- m變換矩陣
1.2. 旋轉(zhuǎn)和縮放命令的原點(diǎn)坐標(biāo)為可選參數(shù), 默認(rèn)的是該元素的中心點(diǎn)。
1.3. 有一點(diǎn)需要注意, transform方法并不改變?cè)乇旧淼娜魏螤顟B(tài)。無(wú)論你平移多少, transform執(zhí)行后你獲得坐標(biāo)信息仍舊創(chuàng)建元素時(shí)的坐標(biāo), 但是transform的參數(shù)在變化。也就是transform的內(nèi)容你是可以獲得的。無(wú)論你執(zhí)行多少次transform, 它保存著現(xiàn)在狀態(tài)和創(chuàng)建狀態(tài)之間的轉(zhuǎn)換內(nèi)容, 其實(shí)transform就是元素本身的一個(gè)屬性, 而不是去改變?cè)氐钠渌鼘傩浴?/p>
1.4. T是絕對(duì)平移, 而t是相對(duì)平移。絕對(duì), 就是無(wú)論其它什么變換我都不管不顧只會(huì)去執(zhí)行我后面緊跟的參數(shù), 所以T執(zhí)行的是不管你前面轉(zhuǎn)了90度還是沒(méi)轉(zhuǎn), 我都x軸平移100px。而相對(duì), 則是我轉(zhuǎn)了90度, 我的頭部(假設(shè)元素都有一個(gè)頭部)本來(lái)朝右變成了朝下, x軸平移100px, 我們向著x平移100px, 但是實(shí)際是去y軸平移了100px, 因?yàn)槲冶緛?lái)指向x軸的頭部變成了y軸方向。
2. 動(dòng)畫效果
2.1. Raphael的圖形動(dòng)畫效果可以達(dá)到非常平滑的程度, 并且任何屬性都可以, 不論是顏色、透明度、寬度、高度還是其它細(xì)節(jié)。
2.2. Raphael的動(dòng)畫效果方法語(yǔ)法:?Element.animate({動(dòng)畫屬性的鍵值對(duì)}, 動(dòng)畫時(shí)間, 動(dòng)畫類型, 回調(diào)函數(shù));
2.3. 動(dòng)畫類型其實(shí)就是動(dòng)畫過(guò)渡公式, 主要有以下這些類型:
- "linear"(線性)
- "<"或"easeIn"或"ease-in"(由慢到快)
- ">"或"easeOut"或"ease-out"(又快到慢)
- "<>"或"easeInOut"或"ease-in-out"(由慢到快再到慢)
- "backIn"或"back-in"(開(kāi)始時(shí)回彈)
- "backOut"或"back-out"(結(jié)束時(shí)回彈)
- "elastic"(橡皮筋)
- "bounce"(彈跳)
3. 例子
3.1. 代碼
<!DOCTYPE html> <html><head><title>Raphael動(dòng)畫</title><script type="text/javascript" src="raphael.js"></script><style type="text/css">#sample-1, #sample-2, #sample-3, #sample-4 {width: 600px;border: 1px solid #aaa;}</style></head><body><h1>元素變換-按角度旋轉(zhuǎn)</h1><div id="sample-1"></div><script type="text/javascript">var paper1 = Raphael("sample-1", 600, 150);paper1.rect(20, 20, 60, 40).attr({"stroke": "red","fill": "green"});// 以矩形中心點(diǎn)旋轉(zhuǎn)90度paper1.rect(120, 20, 60, 40).attr({"stroke": "red"}).transform("r 90");// 以220,60的點(diǎn)旋轉(zhuǎn)90度paper1.rect(220, 20, 60, 40).attr({"stroke": "red"}).transform("r 90, 220,60");</script><h1>元素變換-縮放</h1><div id="sample-2"></div><script type="text/javascript">var paper2 = Raphael("sample-2", 600, 200);paper2.rect(20, 20, 60, 40).attr({"stroke": "red","fill": "green"});// 矩形縮放1.5倍paper2.rect(120, 20, 60, 40).attr({"stroke": "red"}).transform("s 1.5");// 矩形縮放1.5倍后, 再縮放1.5倍paper2.rect(250, 80, 60, 40).attr({"stroke": "red"}).transform("s 1.5 s 1.5");// 以450,110的點(diǎn), 矩形x邊縮放1.5倍, y邊縮放2倍paper2.rect(400, 80, 60, 40).attr({"stroke": "red"}).transform("s 1.5,2, 450,110");</script><h1>元素變換-平移</h1><div id="sample-3"></div><script type="text/javascript">var paper3 = Raphael("sample-3", 600, 200);paper3.rect(20, 20, 60, 40).attr({"stroke": "red","fill": "green"});var rect31 = paper3.rect(20, 20, 60, 40).attr({"stroke": "red"}).transform("r 90 t 100,0");paper3.text(60, 90, "x: " + rect31.attr('x') + ", y: " + rect31.attr('y') + "\ntransform: " + rect31.transform()).attr({'font-size': 11, 'fill': 'blue' });var rect32 = paper3.rect(20, 20, 60, 40).attr({"stroke": "red"}).transform("r 90 T 100,0");paper3.text(230, 50, "x: " + rect32.attr('x') + ", y: " + rect32.attr('y') + "\ntransform: " + rect32.transform()).attr({'font-size': 11, 'fill': 'blue' });</script><h1>動(dòng)畫效果</h1><div id="sample-4"></div><script type="text/javascript">var paper4 = Raphael("sample-4", 600, 200);var rect4 = paper4.rect(20, 20, 60, 40).attr({"fill": "green"});rect4.animate({ transform: "r 90 t 100,0 s 1.5" }, 5000, "bounce", function(){ console.log("finish"); });</script></body> </html>3.2. 效果圖
總結(jié)
以上是生活随笔為你收集整理的009_Raphael动画的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： 048_Unicode对照表十四
- 下一篇： 060_Unicode字符编码