該文件太breif。 任何人都可以知道如何在Raphael.js中使用Element.status()? 非常感謝,如果你可以給演示。如何使用Element.status();在Raphael.js
回答
Element.status顯示應用於元素的當前動畫,或者您可以設置特定動畫的狀態。
想象一個介於0和1之間的動畫插值。因此,通過動畫的中途,其值應爲0.5。這適用於任何正在動畫的屬性。 (所以如果動畫中x從0到100中途,狀態將會是0.5,x將會是50,而不會考慮像彈跳一樣應用任何緩動)。所以我們假設不是在屬性之間創建一個很好的平滑插值,而是想讓一個元素以10個離散步驟移動。我們可以每次手動設置動畫的狀態。例。
var raphAnimation = Raphael.animation({ x: 100, y: 100 }, 1000);
rect.status(raphAnimation, 0.5)
var rect = paper.rect(10, 20, 300, 200);
var raphAnimation = Raphael.animation({ x: 100, y: 100 }, 1000);
for(var c = 1; c <= 10; c++) {
(function() {
var step = c
setTimeout(function() {
rect.status(raphAnimation, 0.1 * step)
}, step * 200)
})();
}
注:如果您在重複使用狀態set命令,我認爲它會採取動畫新鮮。所以假設動畫是從0-> 100,並且您將狀態設置爲0.5,那麼它會走到一半。現在假設你做同樣的事情並且再次用0.5來調用它,現在它將是'餘數'的0.5,因爲它現在只有一半的穿越距離。
非常感謝Lan。它看起來與CSS3動畫中的關鍵幀相似。但關鍵幀用於在一個循環中內插多個動畫,而status()用於在一個動畫過程中內插多個步驟。對? –
排序,你不需要設置多個步驟,這只是我的例子。您可以將其設置爲0.5,以查看您的正常動畫將在哪裏完成。或者,也許你可以添加一個滑塊來改變0-1之間的狀態,然後當你拖動滑塊的時候,動畫也會移動到最遠。只是一個可能有意義的想法來解釋它更多。 – Ian
感謝您填寫更多想法。 –
- 1. 如何在Raphael.js
- 2. 如何獲得使用Raphael.js
- 3. Raphael.js如何在Raphael.js中使用CSS文件?
- 4. 如何使用Raphael.js旋轉div?
- 5. 如何使用Raphael.js繪製「無限」線?
- 6. 如何啓動Raphael.js?
- 7. 歐洲地圖使用raphael.js
- 8. 使用Raphael.js進行轉換
- 9. 使用Raphael.js在圖像上繪圖
- 10. 如何用Raphael.js繪製「透明筆畫」
- 11. 如何在raphael.js中縮放路徑
- 12. 如何在raphael.js中執行rotateX?
- 13. 如何使用jQuery將CSS樣式應用於Raphael.js對象?
- 14. 如何獲得與我使用此代碼raphael.js
- 15. 如何捕獲稍後使用的raphael.js對象的標題?
- 16. 如何繪製基於鼠標移動使用Raphael.JS
- 17. 如何使用GPS位置和Raphael.js繪製地圖?
- 18. Raphael.js VSDOC
- 19. 在使用Raphael.js時使用.hover和.click邏輯迷路
- 20. raphael.js傳遞參數使用.data()方法
- 21. 使用Raphael.js轉換SVG路徑
- 22. 使用raphael.js進行內存泄漏
- 23. 使用d3.js與raphael.js一起工作
- 24. 使用Raphael.js高效地繪製文本
- 25. 使用Raphael.js的線條動畫
- 26. 如何在Raphael.js中爲文本應用輪廓
- 27. Raphael.js,如何選擇一個元素?
- 28. raphael.js如何將id添加到路徑
- 29. 如何實現Raphael.js中的Perlin噪聲?
- 30. raphael.js jquery如何分配和訪問id
好吧,告訴我們你到現在爲止所嘗試的,並嘗試給你的問題添加更多的細節。 – Seeker