當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

FusionChart完全入门手册8

發布時間：2023/12/10 编程问答 34 豆豆

生活随笔收集整理的這篇文章主要介紹了 FusionChart完全入门手册8 小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

動畫樣式類型

FusionCharts做得最好的事情之一就是圖表動畫序列，這是用戶靜靜樂道的。默認情況下，FusionCharts僅在數據繪制（柱狀圖、餅圖、折線圖等）時候使用動畫。但是FusionCharts V3不限制你的想象力。

使用動畫樣式,你可以為圖表上的每一個對象使用動畫效果。您可以自定義動畫并將它應用到圖表的各種對象。

每個圖表對象有一個動畫支持屬性列表，可以通過動畫樣式設置。在我們通過通話樣式設置屬性之前，讓我們快速看一下動畫樣式屬性。

動畫樣式可以幫助你為對象的下列屬性實現動畫效果:

屬性	描述
_x	幫助給定對象在x位置進行動畫效果
_y	幫助給定對象在y位置進行動畫效果.
_xScale	使用此屬性，您可以為給定的圖表對象制作動畫的X-縮放（水平縮放）
_yScale	像_xScale，在Y-縮放（垂直縮放）
_alpha	幫助實施透明度過渡效果
_rotation	幫助你為餅圖和圓環圖制作圓周運動的動畫

并非所有的參數都可以適用于所有圖表對象。例如，文本字段不能是X -縮放或Y縮放，旋轉效果也不適用于他們。同樣，水平分區線不支持的y和x縮放移。為每個圖表對象動畫的參數名單在圖表規范各自的圖表區域工作.

結合或多個動畫序列多個動畫也可以應用到任何圖表對象。例如，你可以為數據圖選擇y縮放和透明度漸變（組合動畫）或者您可能會首先X縮放，再y縮放（連續動畫）。

現在讓我們看看動畫樣式屬性，以便幫助我們控制功能:

屬性	描述
param	這個屬性幫助你指定圖表對象動畫的屬性例如, _x, _y, _xscale 等
start	動畫的開始值。比如如果你要對數據圖進行透明度效果，這個開始值是0。
Duration	利用這一點，你可以以秒級控制動畫時間
Easing	這個屬性允許你指定動畫進行的類別。有效值是 "elastic"彈性, "bounce"反彈, "regular"定期, "strong"強 or "none"無.

對于動畫風格類型，除了 Easing，所有上述屬性是強制性的

在詳細解釋前，讓我們快速看看一個動畫示例。讓我們在圖表加載完成后嘗試讓畫布使用動畫效果

為此，我們首先需要確定我們的自定義樣式，由于需要同時_xScale和 _yScale同時按比例增加，我們需要定義兩個動畫樣式，把他們應用到畫布對象。樣式定義如下：

在上面的代碼中，我們命名了兩個樣式分別為 MyXScaleAnim和MyYScaleAnim和他們的參數（動畫參數） _xscale和 _yscale。我們設置起始值為0，畫布規模增加到100。（記住FusionCharts的規模總是從1-100），我們還指定了動畫序列的 duration為1。

如果您為一個單一系列圖表運行上面的代碼，你會看到，在數據動畫和渲染之前，畫布規模從0到全尺寸的大小。正是我們需要的！讓我們進入到詳細的屬性.

param 屬性指定應用動畫的圖表對象屬性。正如前面討論的，根據圖表對象不同可以采用以下值之一：

_x
_y
_xScale
_yScale
_alpha
_rotation

我們重申，不是所有圖表對象都支持所有的上述性質。請參考給定的圖表，以獲取為每個圖表對象支持動畫參數列表。

在上面的例子中，我們實現了畫布從0到100的動畫，我們設置動畫起始值為0，因為我們想畫布從0到100縮放。你總是需要為任何動畫設置一個起始值。最終值取決于圖表對象并根據FusionCharts的動畫參數。

例如，你想為分區線實現y位置動畫，從0到最終位置（畫布內）。你需要設置起始位置為0。但既然你不知道分區線的終點位置，FusionCharts會自動設置的。

同樣，如果你想為一個圖表實現分區線動畫效果，它從底到各自的最終位置高 500像素。你需要設置起始位置為500，終點位置由FusionCharts設置。

通常情況下，你可能想指定動畫的x/y位置，畫布的開始/中間/結束位置。例如你想應用y屬性指定分區線從畫布頭到終點的動畫，在你最終指定畫布的y值錢你需要試驗很多y值。這是因為畫布的起始位置是在運行時時動態計算的，它依賴于很多因素，如標題、子標題、圖表間隙、空白等

FusionCharts v3的引入宏幫你擺脫這種麻煩。宏是預先定義的變量在運行時的假設值。例如，$ canvasStartY代表了畫布開始Y位置，并假定在運行時只有一個值。所以，如果你需要你的分區線的Y位置從畫布開始到最終的實際位置上，你需要做的是：/p>

FusionCharts在運行時將自動計算,并且為宏指定值，你會看到動畫從畫布的開始Y位置開始。因此，如果就算你重設圖表大小或者顯示/隱藏標題或者改變空白大小，你也不需要保留畫布y位置的標簽，FusionCharts為你做.

FusionCharts v3 支持下列的動畫樣式宏值:

$chartStartX	圖表開始的x位置。如果你在一個HTML頁面加載圖表它是0。不過，如果你在另一個Flash影片載入圖表，將采取給定的X位置
$chartStartY	圖表開始的y位置。如果你在一個HTML頁面加載圖表它是0。不過，如果你在另一個Flash影片載入圖表，將采取給定的X位置.
$chartWidth	圖表寬度
$chartHeight	圖表高度
$chartEndX	圖表終點X位置。如果你在一個HTML頁面加載圖表，它的值等同于圖表的寬度。
$chartEndY	圖表終點Y位置。如果你在一個HTML頁面加載圖表，它的值等同于圖表的寬度。
$chartCenterX	圖表中間X位置
$chartCenterY	圖表中間Y位置.
$canvasStartX	畫布啟動X位置（從左側）如畫布左邊的坐標
$canvasStartY	畫布啟動Y位置（從上部）如畫布頭的坐標
$canvasWidth	畫布寬
$canvasHeight	畫布高
$canvasEndX	畫布終點X位置如畫布右側的坐標
$canvasEndY	畫布終點Y位置如畫布底的坐標
$canvasCenterX	畫布中間X位置
$canvasCenterY	畫布中間Y位置 Y Position of canvas

宏名稱是大小寫敏感的。因此，你需要確保你提供宏的名字以正確大小寫，$ canvasstarty將不工作，并且將記錄在調試窗口中的錯誤。您需要正確地指定為$ canvasStartY。

使用宏更多例子:

? 創建宏表達式

你也可以加入數字（整數）值預先定義的宏，以抵消動畫時使用宏。例如，如果你想畫布div線Y位置的從10像素開始動畫，你可以使用：:

或者，如果你想從動畫開始位置比畫布低10像素，你可以使用：

目前，FusionCharts的只允許+（加）和 - （減）在宏表達式操作。

Easing 是指逐漸加速或減速過程中的動畫。例如，一個圖表對象可能在動畫開始逐步增加它的速度，但是在到達結束前會放慢速度。還有很多不同的方式來進行加速和減速。這有助于你的動畫看起來更真實。

FusionCharts v3支持以下方法：

方法	描述
Elastic	增加一個彈性影響，在范圍的一端或兩者。該值不受時間影響。
Bounce	增加一個反彈效應在范圍的一端或兩端。數值與duration相關，更大的duration值產生反彈持續時間更長。
Strong	添加較慢的運動在一端或兩端。這種效果是類似的例行緩和，但它更突出
Regular	添加較慢的運動在一端或兩端。此功能使您能夠添加加速他們的影響，放緩的影響，或兩者兼而有之。
None	增加了一個勻速運動從開始到結束沒有影響，減緩或加速。這一轉變也稱為線性過渡。

對于上述任何方法，FusionCharts在過渡期結尾會提供緩沖影響。例如，如果的動畫是y軸縮放從0到100，你會看到，列的動畫在開始很快（增速很快），但在最后一部分的動畫速度很慢.

你可以使用上述任何方法進行動畫樣式定義

轉載于:https://www.cnblogs.com/tippoint/archive/2010/09/03/1816983.html

總結

以上是生活随笔為你收集整理的FusionChart完全入门手册8的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。