009_Raphael动画
1. 元素變換
1.1. 唯一推薦的元素變換方法是transform()方法。它有4個命令:
- T/t平移
- s縮放
- r按角度旋轉
- m變換矩陣
1.2. 旋轉和縮放命令的原點坐標為可選參數, 默認的是該元素的中心點。
1.3. 有一點需要注意, transform方法并不改變元素本身的任何狀態。無論你平移多少, transform執行后你獲得坐標信息仍舊創建元素時的坐標, 但是transform的參數在變化。也就是transform的內容你是可以獲得的。無論你執行多少次transform, 它保存著現在狀態和創建狀態之間的轉換內容, 其實transform就是元素本身的一個屬性, 而不是去改變元素的其它屬性。
1.4. T是絕對平移, 而t是相對平移。絕對, 就是無論其它什么變換我都不管不顧只會去執行我后面緊跟的參數, 所以T執行的是不管你前面轉了90度還是沒轉, 我都x軸平移100px。而相對, 則是我轉了90度, 我的頭部(假設元素都有一個頭部)本來朝右變成了朝下, x軸平移100px, 我們向著x平移100px, 但是實際是去y軸平移了100px, 因為我本來指向x軸的頭部變成了y軸方向。
2. 動畫效果
2.1. Raphael的圖形動畫效果可以達到非常平滑的程度, 并且任何屬性都可以, 不論是顏色、透明度、寬度、高度還是其它細節。
2.2. Raphael的動畫效果方法語法:?Element.animate({動畫屬性的鍵值對}, 動畫時間, 動畫類型, 回調函數);
2.3. 動畫類型其實就是動畫過渡公式, 主要有以下這些類型:
- "linear"(線性)
- "<"或"easeIn"或"ease-in"(由慢到快)
- ">"或"easeOut"或"ease-out"(又快到慢)
- "<>"或"easeInOut"或"ease-in-out"(由慢到快再到慢)
- "backIn"或"back-in"(開始時回彈)
- "backOut"或"back-out"(結束時回彈)
- "elastic"(橡皮筋)
- "bounce"(彈跳)
3. 例子
3.1. 代碼
<!DOCTYPE html> <html><head><title>Raphael動畫</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>元素變換-按角度旋轉</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"});// 以矩形中心點旋轉90度paper1.rect(120, 20, 60, 40).attr({"stroke": "red"}).transform("r 90");// 以220,60的點旋轉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的點, 矩形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>動畫效果</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. 效果圖
總結
以上是生活随笔為你收集整理的009_Raphael动画的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 048_Unicode对照表十四
- 下一篇： 060_Unicode字符编码