特别参考文章:http://uh.9ria.com/space-28025-do-blog-id-10991.html
http://www.cnblogs.com/yjmyzz/archive/2010/05/20/1740377.html
1 简单方法1:可以通过设置autoCenterTransform为true或false来控制组件是绕中心点旋转还是绕左上角旋转 和翻转 例如
<s:Rotate3D id="rotateEffect" target="{apanel}" autoCenterTransform="true"/>
代码中:{
rotateEffect.angleXFrom=0;
rotateEffect.angleXTo=旋转值; //上下翻转
rotateEffect.play();
}
如果要设置旋转中心为其他任意点:
<s:Rotate3D id="rotateEffect" target="{apanel}" autoCenterTransform="false
" transformX="150" transformY="150"/>
即使用transformX和transformY 设置旋转中心。
同样也可以设置缩放中心:
<s:Scale3D id="scaleEffect" target="{apanel
}" autoCenterTransform="false" transformX="100" transformY="200" />
另外投影中心autoCenterProjection及projectionX,projectionY又是另外一回事。
2 简单方法2:我们知道flex组件 默认的旋转中心点是左上点,同时组件的child也以此为中心点变化,那么把child的中心和父组件的左上角对齐,然后旋转父容器,那么child就成了以自己的中心点旋转的效果:
-------------------------------------------------------------------------------------------
换句话说,被旋转的其实是父容器,child的中心和父容器旋转中心重叠而已,貌似child绕自己的中心旋转了
用这种办法可以任意设置图片的旋转、翻转及缩放的中心。
代码如:
<s:BorderContainer id="containerPnl" toolTip="父容器" width="100" height="100" x="250" y="250">
<s:Panel width="200" height="200" x="-100" y="-100" id="apnl" title="子容器" />
</s:BorderContainer>
然后旋转父容器: containerPnl.rotationX=45 ;
- 大小: 16 KB
- 大小: 19.8 KB
分享到:
相关推荐
总结来说,使用Flex布局和CSS3的变换功能,我们可以创建一个互动的六面体翻转效果。通过理解Flex布局的原理和CSS3变换的用法,我们可以构建出更多创新且富有吸引力的用户界面。在这个例子中,六面体翻转不仅展示了...
在Flex中,可以通过使用Easing函数和Timeline类来创建复杂的动画效果,包括3D翻转。开发者可以指定开始和结束角度,以及翻转的轴向,来实现组件从正面翻转到背面或者反之的效果。为了实现3D效果,可能还需要借助...
在本文中,我们将深入探讨如何使用Flex实现立方体旋转和其他特效,如翻页和开门关门效果。Flex是一种基于ActionScript的框架,常用于构建富互联网应用程序(RIA),它提供了强大的布局管理和动画功能。 首先,我们...
Flex电子相册旋转4是一款基于Adobe Flex技术开发的动态相册应用,主要用于展示图片,具有旋转...通过以上知识点的学习和实践,开发者可以创建出功能完善的Flex电子相册旋转4应用,提供流畅且富有创意的图片浏览体验。
2. **3D转换**:Flex支持通过Transform3D类进行3D变换,包括旋转、缩放和移动。要实现六面体翻转,我们需要对组件应用适当的旋转操作。例如,可以使用rotateX、rotateY和rotateZ方法来分别沿x、y和z轴进行旋转。 3....
在本文中,我们将深入探讨如何使用Adobe Flex技术创建控件翻转动画效果。Flex是一种基于MXML和ActionScript的开源框架,主要用于构建富互联网应用程序(RIA)。它允许开发者设计、构建和部署具有交互性和动态视觉...
6. **预设3D效果**: Flex 4还提供了一些预设的3D效果,比如“翻转”、“旋转”等,可以直接应用于组件,快速实现3D转换效果。 7. **自定义3D组件**: 开发者可以通过继承现有的Spark组件并重写其绘制方法,来创建...
在实现3D翻转效果时,AS 3可能使用了矩阵运算来处理图形变换,包括旋转、缩放和位移。此外,可能还涉及到Stage3D API,这是Flash Player 11引入的一个低级接口,用于加速2D和3D图形渲染。 Flex是基于ActionScript的...
1. **3D变换**:Flex支持CSS3中的3D变换,通过translate3D和rotate3D函数,可以实现元素在三维空间内的移动和旋转,这对于模拟书页翻转至关重要。 2. **遮罩层**:在翻页过程中,遮罩层用于隐藏未翻转的部分,确保...
Coverflow允许用户以3D视角浏览一系列元素,通常是一些图片或者卡片,而这些元素在用户滚动时会翻转、旋转,呈现出富有立体感的动态展示。在Flex这一编程环境中实现Coverflow效果,可以为用户带来更加直观和互动的...
组件内部需要管理多个页面元素,以及它们在翻页过程中的位置和旋转状态。 5. **事件处理**:为了响应用户的触摸或鼠标交互,我们需要监听和处理鼠标滚轮、拖拽等事件,然后根据用户的操作更新页面的翻转状态。 6. ...
"Flex 3D切换效果"是指在Adobe Flex框架下实现的3D转换效果,它使得应用程序的界面元素在用户交互时能够呈现出立体的翻转或旋转效果。这种效果通常用于导航菜单、卡片式布局或者像登录界面中的按钮点击反馈,为用户...
4. **catalog.xml**:此文件可能是用于存储相册或图片墙数据的XML文件,包含每张图片的URL、元信息以及在3D空间中的位置和旋转参数。XML文件提供了一种灵活的方式来动态加载和组织内容。 5. **library.swf**:这是...
在立方体翻转过程中,Transform3D对象用于设置立方体的旋转轴和旋转角度,实现翻转效果。 3. **Matrix3D**: 3D变换矩阵是3D图形学中的核心概念,用于描述几何对象的位置、旋转和缩放。Matrix3D类在Flex 4.5中用于...
这包括旋转、缩放和平移等操作,可以创建出屏幕面板在空间中翻转的效果。 3. **MXML和ActionScript混合编程**:Flex允许开发者使用MXML来声明式地构建UI,同时可以通过ActionScript进行更复杂的逻辑控制。在这个...
在这个特定的示例中,开发者通过Flex 3.5展示了如何实现一个具有旋转和翻转功能的虚拟魔方,让用户在Web环境中体验到类似真实魔方的操作。 Flex 3.5的核心组件包括Flex SDK和Flash Player,它们共同为开发者提供了...
在本文中,我们将深入探讨如何使用Adobe...总的来说,结合Flex和Papervision3D,我们可以创建具有交互性的3D环境,让用户能够自由地从不同角度拖动和查看3D对象。这种技术在游戏、产品展示、模拟等领域有着广泛的应用。
这个组件可能包含两个主要部分:左页和右页,可以通过调整它们的透明度、旋转角度以及位置来模拟翻页的动作。 接下来,我们将利用Flex中的动画库来创建翻页动画。Flex支持ActionScript 3.0,这是一种强大的脚本语言...
在描述中提到的“立方体旋转”是DistortionEffects中的一个典型应用,通过这个功能,开发者可以轻松地实现控件的3D旋转效果,就像一个真实的立方体在屏幕上翻转一样。这种效果可以用于创建导航菜单、旋转展示台等...
总的来说,这个项目展示了如何利用Flex的可视化能力和ASP.NET的服务器端功能,创建一个具有3D动态旋转效果的Web应用。开发者不仅可以学习到如何设计和实现3D界面,还能深入理解客户端与服务器端的通信机制,提升Web...