flex大小变化动画_Flex 4的十大变化

flex大小变化动画

本周,Adobe发布了他们的第一个Flex 4正式Beta版,代号为Gumbo。 该版本包括许多重大更改。 此列表提供了流行的RIA框架的最新版本中已更改项目的高级概述。

1.与Adobe Catalyst集成

Flex 4开发工作的主要重点是提供支持和与Adobe Catalyst的集成-Adobe Catalyst是Adobe的新设计器工具,用于在不编写代码的情况下创建丰富的Internet应用程序资产。 Catalyst承诺将改变开发人员和设计人员进行协作的方式,因为它认识到应用程序开发人员和设计人员的工作方式有所不同。 因此,它使每个人都能专注于自己擅长的领域,因为它使每个人都能以他们习惯的传统方式工作。 为了方便Flex和Catalyst之间的集成,已对该列表进行了大多数更改。

在此处了解有关Adobe Catalyst的更多信息。

2. Spark组件架构

每个版本的Flex都包含一个完整的组件库,其中包含构建应用程序所需的所有常见项目,包括数据网格,按钮,布局容器等。在Flex 4中,组件的基础体系结构称为Spark,在Flex 3中称为Halo。支持Catalyst的工作的主要部分是对组件模型进行修改,以实现更高级别的关注点分离。

在新的Spark组件模型中,核心逻辑,外观和布局得到了突破,因此它们彼此独立地进行处理。 Spark组件模型建立在Halo组件模型之上。 基本上,这意味着它是从Halo的核心基类UIComponent扩展而来的,从而允许逐步采用Flex4,并在Flex 4应用程序中使用Flex 3组件。

除了其他更改之外,Flex 4中还更新了效果。效果现在可以为任意对象和类型设置动画,从而在使用时具有更大的灵活性。 Flex 4效果已在新的“ spark.effects”包中实现。 就像新的组件库一样,Flex 4效果已重新实现,而Flex 3效果保留在原处以实现向后兼容。 有关Gumbo Effects的更多信息,请参阅Chet Haase 在Flex 4 Effects上文章或他的博客。

阅读以下白皮书以了解有关Spark架构的更多信息

3. MXML 2009

MXML是基于XML的抽象,建立在ActionScript 3(Flash Player编程语言)的基础上。 MXML用于布置用户界面的视图部分和支持工具,例如IDE,以及现在的Catalyst。 MXML 2009包含许多更新,以支持不同行为(核心,外观和布局)和新组件库的分离。 Flex 4组件已在其自己的程序包(spark.components)中实现,将Flex 3组件保留在原位。 MXML 2009包含一个新的名称空间来支持此功能。

以下应用程序声明示例显示了如何使用名称空间以及定义Spark和Halo组件名称空间:

<s:申请
xmlns:fx =“ http://ns.adobe.com/mxml/2009”
xmlns:s =“ library://ns.adobe.com/flex/spark”
xmlns:mx =“ library://ns.adobe.com/flex/halo”>

因此,可以通过执行以下操作来使用Flex 4按钮:

<s:Button label =“我的Flex 4按钮” />

而且,Flex 3按钮的以下内容:

<mx:Button label =“我的Flex 3按钮” />

请查看MXML 2009规范,以获取有关更改的更多详细信息。

4.改进查看状态

Flex 2将状态的概念引入了Flex框架,该视图中的视图组件更改可以通过简单的状态更改进行管理。 在Flex 4中,视图状态已进行了改进,以简化语法并使其更易于使用。 简化语法的一个示例是新的语言属性includeIn和excludeFrom,可以在组件上设置这些属性以指导它们如何处理状态更改(请参见下文)。

<!-给出状态A,B,C->
<m:州>
<m:州名=“ A” />
<m:州名=“ B” />
<m:州名=“ C” />
</ m:states>

<!-此按钮仅在状态A和B下出现->
<Button label =“ Click Me” includeIn =“ A,B” />

<!-此按钮将在状态A和B中出现->
<Button label =“按钮C” excludeFrom =“ C” />

在此处查看有关“视图状态”更改的更多信息

5. FXG支持

Flash Player的核心是绘图引擎。 Adobe通过在Flash Player版本10中引入FXG以及现在对Flex的引入来利用了这一点。 FXG是一种声明性图形格式,可实现工具之间资产的可移植性。 这意味着设计人员将能够在Catalyst或CS4 Illustrator中创建资产,而Flex应用程序开发人员将能够导入资产并使用它们而无需修改它们。

查看FXG规范以了解更多详细信息。

6.蒙皮增强

Spark组件模型中最大的变化是对外观进行了大修,以使它们现在可以控制组件的所有可视方面,并将其逻辑封装在组件核心之外。 因此,这允许独立于基础核心逻辑来修改组件的可视部分。

让我们看一下PanelSkin.mxml外观文件,它是Panel容器的默认外观,例如:

<?xml version =“ 1.0” encoding =“ utf-8”?>
<s:SparkSkin xmlns:fx =“ http://ns.adobe.com/mxml/2009” xmlns:s =“ library://ns.adobe.com/flex/spark” alpha.disabled =“ 0.5”>

<fx:元数据>
<![CDATA [
/ **
* @copy spark.skins.default.ApplicationSkin#hostComponent
* /
[HostComponent(“ spark.components.Panel”)]
]]>
</ fx:Metadata>

<fx:Script>
/ *定义不应着色的皮肤元素。
对于面板,边框和标题背景为皮肤,但内容区域和标题文本没有。 * /
静态私有const排除对象:Array = [“ background”,“ titleField”,“ contentGroup”];

/ **
* @copy spark.skins.SparkSkin#colorizeExclusions
* /
重写public function get colorizeExclusions():Array {返回排除项;}

/ *定义应该由“ contentBackgroundColor”样式着色的内容填充项。 * /
静态私有const contentFill:Array = [“ bgFill”];

/ **
* @inheritDoc
* /
重写public function get contentItems():Array {return contentFill};
</ fx:Script>

<s:州>
<s:州名=“ normal” />
<s:州名=“ disabled” />
</ s:states>

。 。 。 。 。

<s:Rect left =“ 1” right =“ 1” top =“ 31” height =“ 1”>
<s:fill>
<s:SolidColor color =“ 0xC0C0C0” />
</ s:fill>
</ s:Rect>

<!-第5层:文字->
<!-定义PanelSkin类标题栏的外观。 ->
<s:SimpleText id =“ titleField” lineBreak =“ explicit”
left =“ 10” right =“ 4” top =“ 2” height =“ 30”
verticalAlign =“ middle” fontWeight =“ bold”>
</ s:SimpleText>

<s:Group id =“ contentGroup” left =“ 1” right =“ 1” top =“ 32” bottom =“ 1”>
</ s:Group>

</ s:SparkSkin>

由于此外观文件的唯一工作是控制Panel容器的外观,因此设计人员可以在无需编辑组件源代码或不了解组件内部行为的情况下修改组件的外观。 更重要的是,它允许设计人员以自然的方式使用Catalyst。

在此处查看有关将Gumbo组件蒙皮的更多信息。

7.更新的布局模型

那些熟悉Flex开发的人会注意到,Flex 3开发人员使用的大多数容器都不是Gumbo组件库的一部分。 这是因为布局已经解耦,现在可以通过委派进行处理。 由于大多数Flex 3容器只是为了提供不同形式的布局而存在(例如,HBox用于水平布局,VBox用于垂直布局),因此不再需要它们。

以下示例显示了Flex开发人员现在可以定义布局的一种方法。 本示例使用Group类来管理按钮,这是用于管理内容项的新Spark类。 结果是两个按钮并排显示,就像在Flex 3中使用HBox一样。

<s:组宽度=“ 400”,高度=“ 400”>
<s:layout>
<s:Horizo​​ntalLayout paddingLeft =“ 5” paddingTop =“ 5” />
</ s:layout>

<s:按钮标签=“按钮1” />
<s:按钮标签=“按钮2” />
</ s:Group>

Adobe的Ryan Stewart主持了以下技术演讲,回顾了新的布局机制: http : //blog.digitalbackcountry.com/2009/05/flex-4-layouts-on-tech-talk-with-ryan-stewart/

8. Flash Builder 4

Flash Builder 4(以前称为Flex Builder)是面向应用程序开发人员的基于Eclipse的IDE的最新版本。 新版本附带少量更新,包括:条件调试断点,更多重构工具和FlexUnit 4支持。 与往常一样,它包括MXML,ActionScript 3,CSS编辑器,可视化设计器以及Flex性能和内存分析器(仅专业版中的分析器)。

此外,最新版本还包含高级数据管理功能,可简化以数据为中心的应用程序的开发。 这包括客户端数据管理功能,这些功能可处理CRUD操作并滚动服务上的大集合。

在此处获取有关IDE的更多信息

9.编译器性能

大多数开发Flex 3应用程序的人遇到的一个主要痛点是糟糕的编译器性能。 因此,Gumbo的已发布目标之一是提高Flex 4中的编译器性能。目前,该工作尚未发布任何官方基准。 但是,Adobe的彼得·多诺万(Peter Donovan)确实发布了有关他早期工作的一些说明,指出他相信,如果不进行重大重组,则可以实现25%的改进。 他还说,要实现3-4倍的改进,就需要重新设计。 当然,每个开发企业Flex应用程序的人都希望在Flex 4于2009年底交付时解决此问题。

有关更多信息,请参见Peter Donovan的注释

10.新的文字功能

基于Flash的应用程序(基于Flex和基于非Flex的应用程序)的主要优势在于有效处理文本的能力。 在Flash Player 10中,Adobe引入了一个新的文本引擎来支持丰富的Internet应用程序(多语言,打印,键盘快捷键等)的需求。 Gumbo包括一些新的文本类(RichText,SimpleText等),以在Flex框架中提供更强大的文本支持。 此外,Adobe正在开发其新的文本布局框架,以使所有ActionScript 3开发人员都能利用Flash Player文本引擎的功能。 在以下网址了解有关文本布局框架的更多信息: http : //labs.adobe.com/technologies/textlayout/

如您所见,Flex 4代表着流行的RIA平台又迈出了一大步。 有关Flex 4 SDK更改的更多信息,请参阅Matt Chotin的文章, Flex 4 SDK beta中的新增功能。

作者简介

Jon Rose是位于科罗拉多州博尔德市的Gorilla Logic,Inc.的企业软件顾问和Flex实践总监。 他是企业软件社区InfoQ.com的编辑和撰稿人。 他是DrunkOnSoftware.com的共同主持人,该公司为喜欢酒和小东西的人提供了视频广播 。 他曾与私营部门和政府的大小客户合作。 他对解决问题的热爱驱使他开发高质量的软件。 您可以在以下网址阅读他的博客: http//ectropic.com。

翻译自: https://www.infoq.com/articles/top-10-flex4-changes/?topicPageSponsorship=c1246725-b0a7-43a6-9ef9-68102c8d48e1

flex大小变化动画

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
CSS是一种用于网页设计的样式表语言,它可以控制网页的布局、字体、颜色、大小、背景、边框、动画等方面。下面是一些常用的CSS属性和动画特效: 1. 属性 - background-color:设置元素的背景色。 - color:设置元素的文字颜色。 - font-size:设置元素的文字大小。 - border:设置元素的边框。 - padding:设置元素的内边距。 - margin:设置元素的外边距。 - display:设置元素的显示方式,如block、inline、inline-block等。 - position:设置元素的定位方式,如relative、absolute等。 - z-index:设置元素的堆叠顺序。 - transform:设置元素的变换效果,如旋转、缩放、平移等。 2. 动画特效 - transition:设置元素的过渡效果,如颜色、大小、位置等属性的变化过渡。 - animation:设置元素的动画效果,如旋转、移动、闪烁等。 - keyframes:定义动画的关键帧,即动画从哪个状态到哪个状态。 例如,实现旋转照片墙可以使用以下CSS代码: ```css .photo-wall { display: flex; flex-wrap: wrap; justify-content: center; } .photo { width: 200px; height: 200px; margin: 10px; border: 1px solid #ccc; transition: transform .5s ease-in-out; } .photo:hover { transform: rotateY(180deg); } ``` 其中,.photo-wall是照片墙的容器,.photo是每张照片的样式,当鼠标悬停在照片上时,会触发transform属性的变化,从而实现照片的旋转效果。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值