Flex 3- Change Effects Example過渡效果之改變

導讀：

　　When you're displaying a list of items and the underlying data changes (usually as the result of a user gesture), it can be good to feed the change back to the user in a visual way.

　　Data Change Effects enable you to apply animated visual effects to item renderers when the data source changes.

　　The picture below links to a working example (change the country combo box to see the effect)

當你在呈現一個清單的項目的時候，而且每個項目下面都有随時更新的資訊（随着使用者的姿勢而改變）這樣很直覺的就将使用者的互動返還各使用者

資料改變效果是能你能很快的使用動畫效果來呈現ITEMRENDER當資料源發生改變的時候

下面是一個例子

　　

　　

　　

　　Many of us have seen something like this before, in the Flex Store sample application for instance. DCEs just make it easier to implement.

我們大多見過這樣的例子，例如FLEX自帶的FLEX STORE例子裡就有這樣的使用，這裡DCE隻是讓他變得更容易實作而已

　　A few of things to note here: 要注意的幾點

　　1) DCEs listen for collection events, so use an ArrayCollection or XMLListCollection as the source of your dataProvider. DCE監聽集合資訊是以使用AC,XMLLISTCOLLECTION作為資料源

　　2) DCEs don't work if you simply swap one dataprovider source for another, so instead you'll need to add your new items to the existing source as well as remove those you don't want. 如果你隻是簡單的将資料源更換為其他資料源那麼DCE是不工作的，是以你要使用ADD,REMOVE等方法來實作你的資料改變

　　3)You should enable variableRowHeight, as the animation of your itemRenderer may result in the itemRenderer changing size. 應該讓RENDER的可變高度屬性為真，因為動畫可能導緻高度超過原來的高度

　　4) Setting offscreenExtraRowsOrColumns to a small value can often make the animation smoother. 設定一個恰當的值來使得動畫看起來更順暢

　　5) This is all Flex3 beta stuff and so it is subject to change (dataChangeEffect has apparently already been renamed to itemsChangeEffects in the more recent nightly builds - please check for updated info before mailing me - some useful links are at the bottom of this post) 注意這是FB3的功能（别說我沒提醒你哦）

　　6) At the time of writing DCEs are implemented for the List an TileList components (Flex3 beta). 目前DCE隻對LIST 和TILELIST支援此功能

　　7) DCE is certainly not official terminology - I'm just too lazy to type ;] DCE是我們讨論主題的縮寫（大家都看出來了吧）

　　With reference to point 2 (above) and my coffee-example app, I am receiving an XMLList of new items, and need to modify the source of my existing dataProvider (an XMLListCollection). I do this in two stages (the more clever amongst you will be able to do this more succinctly - if so email me the code :)) 至于我的這個應用簡單的講一下，使用XMLLIST接受新的項目，然後更新我的資料源，我用兩步來完成（如果你能更高效的完成這個步驟EMAIL 我）

　　(i) First I compare each new item with all existing items. If there isn't a match then I add the new item to the original dataProvider collection. 首先我将新的項目和現有的項目比較，如果不存在我插入新的項目

　　(ii) Next I compare each item already in the dataProvider (excluding any newly-added items) to the XMLList of new items. If there is no match then I delete the item. 接下來我将老的清單和新的比較發現有不存在的則删除之

【個人感覺這裡其實可以做的更高效，關鍵是對發過來的更新資訊做約定，更新的同時對根新的項目屬性予以明了-譯者注】

　　I also perform a Sort on the collection to prevent items jumbling up over time. If a user selects "all" from the dropdown list and sees an item at position 3 in the first row, that item should always appear at position 3 of the first row whenever they select "all" from the combo (adding/deleting excluded). It should go without saying that all visual effects can enhance or taint the overall user experience, so don't just blindly use them because they're there, and if you do use them, respect the user and work out what they'll most likely expect to see as a result.

　　Read more here:

　　here(Adobe Docs) and here(FlexExamples.com)

　　This entry was posted on Thursday, October 25th, 2007 @ 8:37 am on the category Flex. You can follow any responses to this entry through the RSS 2.0You can leave a response, or trackbackfrom your own site.

本文轉自

http://nwebb.co.uk/blog/?p=132