動畫樣式類型

?

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

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

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

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

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

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

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

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

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

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

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

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

<styles>
????? <definition>
??????????? <style name='MyXScaleAnim' type='ANIMATION' duration='1' start='0' param="_xscale" />
????????????<style name='MyYScaleAnim' type='ANIMATION' duration='1' start='0' param="_yscale" />
????? </definition>
????? ... More XML Here ....
</styles>

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

<styles>
?????... More XML Here ....
????? <application>
<apply toObject='Canvas' styles='MyXScaleAnim,MyYScaleAnim' />
????? </application>
</styles>

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

? param 屬性

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

• _x
• _y
• _xScale
• _yScale
• _alpha
• _rotation

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

? 設(shè)置動畫的對象的起始位置

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

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

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

? 起始值的宏

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

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

<style name='DivYAnim' type='ANIMATION' duration='1' start='$canvasStartY' param="_y" />

FusionCharts在運行時將自動計算,并且為宏指定值，你會看到動畫從畫布的開始Y位置開始。因此，如果就算你重設(shè)圖表大小或者顯示/隱藏標(biāo)題或者改變空白大小，你也不需要保留畫布y位置的標(biāo)簽，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位置（從左側(cè)）如畫布左邊的坐標(biāo)
$canvasStartY	畫布啟動Y位置（從上部）如畫布頭的坐標(biāo)
$canvasWidth	畫布寬
$canvasHeight	畫布高
$canvasEndX	畫布終點X位置如畫布右側(cè)的坐標(biāo)
$canvasEndY	畫布終點Y位置如畫布底的坐標(biāo)
$canvasCenterX	畫布中間X位置
$canvasCenterY	畫布中間Y位置 Y Position of canvas

?

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

使用宏更多例子:

<style name='LabelsAnim' type='ANIMATION' duration='1' start='$canvasCenterX' param="_x" />
<style name='YValuesAnim' type='ANIMATION' duration='1' start='$canvasCenterY' param="_y" />

? 創(chuàng)建宏表達(dá)式

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

<style name='DivYAnim' type='ANIMATION' duration='1' start='$canvasStartY-10' param="_y" />

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

<style name='DivYAnim' type='ANIMATION' duration='1' start='$canvasStartY+10' param="_y" />

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

? 指定動畫類別

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

?

FusionCharts v3支持以下方法：

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

?

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

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

轉(zhuǎn)載于:https://www.cnblogs.com/tippoint/archive/2010/09/03/1816983.html

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。