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