Flex中效果组件的封装与使用

最新推荐文章于 2024-01-16 08:58:04 发布
最新推荐文章于 2024-01-16 08:58:04 发布
阅读量283 收藏
点赞数
分类专栏： Flex 文章标签： Flex Flash
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/iteye_14479/article/details/81920638
版权
Flex提供了16 种动画效果类

AnimateProperty:动画属性
Blur ：模糊
Desolve ：溶解
Fade ：凋零
Glow ：发光
Iris ：瞳孔放大缩小
Move ：移动
Pause ：定格
Resize ：改变大小
Rotate ：旋转
SoundEffect ：音效
(WipeLeft, WipeRight, WipeUp, WipeDown) ：擦拭
Zoom ：放大缩小


有13 种不同的方式来触发动画效果：
AddedEffect ：加入容器
creationCompleteEffect ：创建完成
focusInEffect ：获得键盘输入
focusOutEffect ：失去键盘输入
hideEffect ：visable属性设置为false
mouseDownEffect ：鼠标按下
mouseUpEffect ：鼠标按起
moveEffect ：被拖动
resizeEffect ：重新设定大小
removedEffect ：被移除
rollOutEffect ：鼠标移到控件外
rollOverEffect ：鼠标移到控件上
showEffect ：visable属性设置为true


可以使用MXML来设置效果
Java代码

1. <mx:Fade target="{loginWindow}" alphaFrom="1" alphaTo=".5" duration="500" startDelay="200" effectEnd="loginEffectHandler(event)"/>

<mx:Fade target="{loginWindow}" alphaFrom="1" alphaTo=".5" duration="500" startDelay="200" effectEnd="loginEffectHandler(event)"/>


但是如果程序中效果需要代码控制的，即需要as代码编写效果的时候，则这些效果的代码将会很多很杂。比如你需要一个移动和隐藏的效果
Java代码

1. var move:Move = new Move ;
2. move.target = loginWindow ;
3. move.duration = 500 ;
4. move.xFrom = 100 ;
5. move.xTo = 200 ;
6. move.yFrom = 100 ;
7. move.yFrom = 200 ;
8. move.startDelay = 100 ;
9. move.addEventListener(EffectEvent.EFFECT_END,moveEffectHandler) ;
10. move.play() ;
11. var fade:Fade = new Fade ;
12. fade.alphaFrom = 1 ;
13. fade.alphaTo = 1;
14. fade.target= loginWindo ;
15. fade.startDelay = 200 ;
16. fade.duration = 500 ;
17. fade.addEventListener(EffectEvent.EFFECT_END,fadeEffectHandler) ;
18. fade.play() ;

var move:Move = new Move ;
move.target = loginWindow ;
move.duration = 500 ;
move.xFrom = 100 ;
move.xTo = 200 ;
move.yFrom = 100 ;
move.yFrom = 200 ;
move.startDelay = 100 ;
move.addEventListener(EffectEvent.EFFECT_END,moveEffectHandler) ;
move.play() ;
var fade:Fade = new Fade ;
fade.alphaFrom = 1 ;
fade.alphaTo = 1;
fade.target= loginWindo ;
fade.startDelay = 200 ;
fade.duration = 500 ;
fade.addEventListener(EffectEvent.EFFECT_END,fadeEffectHandler) ;
fade.play() ;


考虑到精简代码，我将上诉效果封装到一个类中，代码如下

Java代码

1. package com.utils.effect
2. {
3. import flash.display.DisplayObject;
4.
5. import mx.effects.Blur;
6. import mx.effects.Fade;
7. import mx.effects.Glow;
8. import mx.effects.Move;
9. import mx.effects.Resize;
10. import mx.effects.Rotate;
11. import mx.events.EffectEvent;
12.
13. public class ApplicationEffect
14. {
15. public function ApplicationEffect()
16. {
17. }
18.
19. public static function setMove(displayObject:Object,xFrom:Number,xTo:Number,yFrom:Number,yTo:Number,dur:int,delay:int,fun:Function,easingFunction:Function=null):void
20. {
21. var move:Move = new Move ;
22. move.target = displayObject ;
23. if(xFrom != -1)
24. move.xFrom = xFrom ;
25. if(xTo != -1)
26. move.xTo = xTo ;
27. if(yFrom != -1)
28. move.yFrom = yFrom ;
29. if(yTo != -1)
30. move.yTo = yTo ;
31. move.duration = dur ;
32. move.startDelay = delay ;
33. if(easingFunction != null)
34. move.easingFunction = easingFunction ;
35. if(fun !=null)
36. move.addEventListener(EffectEvent.EFFECT_END,fun) ;
37. move.play() ;
38.
39. }
40.
41. public static function setResize(displayObject:Object,widthFrom:Number,widthTo:Number,heightFrom:Number,heightTo:Number,dur:int,delay:int,fun:Function,easingFunction:Function=null):void
42. {
43. var resize:Resize = new Resize ;
44. resize.target = displayObject ;
45. if(widthFrom != -1)
46. resize.widthFrom = widthFrom ;
47. if(widthTo != -1)
48. resize.widthTo = widthTo ;
49. if(heightFrom != -1)
50. resize.heightFrom = heightFrom ;
51. if(heightTo != -1)
52. resize.heightTo = heightTo ;
53. resize.duration = dur ;
54. resize.startDelay = delay ;
55. if(easingFunction != null)
56. resize.easingFunction = easingFunction ;
57. if(fun !=null)
58. resize.addEventListener(EffectEvent.EFFECT_END,fun);
59. resize.play();
60. }
61.
62. public static function setFade(displayObject:Object,duration:Number,alphaFrom:Number,alphaTo:Number,delay:Number,fun:Function,easingFunction:Function=null):void
63. {
64. var fade:Fade = new Fade ;
65. fade.target=displayObject;
66. fade.duration=duration;
67. if(alphaFrom != -1)
68. fade.alphaFrom=alphaFrom;
69. if(alphaTo != -1)
70. fade.alphaTo=alphaTo;
71. if(delay != -1)
72. fade.startDelay = delay ;
73. if(easingFunction != null)
74. fade.easingFunction = easingFunction ;
75. if(fun !=null)
76. fade.addEventListener(EffectEvent.EFFECT_END,fun);
77. fade.play();
78. }
79.
80. public static function setBlur(displayObject:Object,duration:Number,blurXFrom:Number,blurXTo:Number,blurYFrom:Number,blurYTo:Number,fun:Function,easingFunction:Function=null):void
81. {
82. var blur:Blur= new Blur ;
83. blur.target=displayObject ;
84. blur.duration=duration ;
85. if(blurXFrom != -1)
86. blur.blurXFrom=blurXFrom ;
87. if(blurXTo != -1)
88. blur.blurXTo=blurXTo ;
89. if(blurYFrom != -1)
90. blur.blurYFrom=blurYFrom ;
91. if(blurYTo != -1)
92. blur.blurYTo=blurYTo ;
93. if(easingFunction != null)
94. blur.easingFunction = easingFunction ;
95. if(fun !=null)
96. blur.addEventListener(EffectEvent.EFFECT_END,fun) ;
97. blur.play();
98. }
99. public static function setRotate(displayObject:Object,angleFrom:Number,angleTo:Number,fun:Function,easingFunction:Function=null):void
100. {
101. var rotate:Rotate = new Rotate;
102. rotate.target=displayObject;
103. if(angleFrom != -1)
104. rotate.angleFrom=angleFrom;
105. if(angleTo != -1)
106. rotate.angleTo=angleTo;
107. if(easingFunction != null)
108. rotate.easingFunction = easingFunction ;
109. if(fun !=null)
110. rotate.addEventListener(EffectEvent.EFFECT_END,fun);
111. rotate.play();
112. }
113.
114. public static function setGlow(displayObject:DisplayObject,color:Number,alphaFrom:Number,alphaTo:Number,blurXFrom:Number,
115. blurXTo:Number,blurYFrom:Number,blurYTo:Number,dur:Number,delay:Number,fun:Function,easingFunction:Function=null):void
116. {
117. var glow:Glow = new Glow ;
118. glow.target = displayObject ;
119. if(color != -1)
120. glow.color = color ;
121. if(alphaFrom != -1)
122. glow.alphaFrom = alphaFrom;
123. if(alphaTo != -1)
124. glow.alphaTo = alphaTo;
125. if(blurXFrom != -1)
126. glow.blurXFrom = blurXFrom;
127. if(blurXTo != -1)
128. glow.blurXTo = blurXTo;
129. if(blurYFrom != -1)
130. glow.blurYFrom = blurYFrom;
131. if(blurYTo != -1)
132. glow.blurYTo = blurYTo ;
133. if(delay != -1)
134. glow.startDelay = delay ;
135. if(easingFunction != null)
136. glow.easingFunction = easingFunction ;
137. if(fun != null)
138. glow.addEventListener(EffectEvent.EFFECT_END,fun) ;
139. glow.play() ;
140. }
141.
142. }
143. }

package com.utils.effect
{
import flash.display.DisplayObject;

import mx.effects.Blur;
import mx.effects.Fade;
import mx.effects.Glow;
import mx.effects.Move;
import mx.effects.Resize;
import mx.effects.Rotate;
import mx.events.EffectEvent;

public class ApplicationEffect
{
public function ApplicationEffect()
{
}

public static function setMove(displayObject:Object,xFrom:Number,xTo:Number,yFrom:Number,yTo:Number,dur:int,delay:int,fun:Function,easingFunction:Function=null):void
{
var move:Move = new Move ;
move.target = displayObject ;
if(xFrom != -1)
move.xFrom = xFrom ;
if(xTo != -1)
move.xTo = xTo ;
if(yFrom != -1)
move.yFrom = yFrom ;
if(yTo != -1)
move.yTo = yTo ;
move.duration = dur ;
move.startDelay = delay ;
if(easingFunction != null)
move.easingFunction = easingFunction ;
if(fun !=null)
move.addEventListener(EffectEvent.EFFECT_END,fun) ;
move.play() ;

}

public static function setResize(displayObject:Object,widthFrom:Number,widthTo:Number,heightFrom:Number,heightTo:Number,dur:int,delay:int,fun:Function,easingFunction:Function=null):void
{
var resize:Resize = new Resize ;
resize.target = displayObject ;
if(widthFrom != -1)
resize.widthFrom = widthFrom ;
if(widthTo != -1)
resize.widthTo = widthTo ;
if(heightFrom != -1)
resize.heightFrom = heightFrom ;
if(heightTo != -1)
resize.heightTo = heightTo ;
resize.duration = dur ;
resize.startDelay = delay ;
if(easingFunction != null)
resize.easingFunction = easingFunction ;
if(fun !=null)
resize.addEventListener(EffectEvent.EFFECT_END,fun);
resize.play();
}

public static function setFade(displayObject:Object,duration:Number,alphaFrom:Number,alphaTo:Number,delay:Number,fun:Function,easingFunction:Function=null):void
{
var fade:Fade = new Fade ;
fade.target=displayObject;
fade.duration=duration;
if(alphaFrom != -1)
fade.alphaFrom=alphaFrom;
if(alphaTo != -1)
fade.alphaTo=alphaTo;
if(delay != -1)
fade.startDelay = delay ;
if(easingFunction != null)
fade.easingFunction = easingFunction ;
if(fun !=null)
fade.addEventListener(EffectEvent.EFFECT_END,fun);
fade.play();
}

public static function setBlur(displayObject:Object,duration:Number,blurXFrom:Number,blurXTo:Number,blurYFrom:Number,blurYTo:Number,fun:Function,easingFunction:Function=null):void
{
var blur:Blur= new Blur ;
blur.target=displayObject ;
blur.duration=duration ;
if(blurXFrom != -1)
blur.blurXFrom=blurXFrom ;
if(blurXTo != -1)
blur.blurXTo=blurXTo ;
if(blurYFrom != -1)
blur.blurYFrom=blurYFrom ;
if(blurYTo != -1)
blur.blurYTo=blurYTo ;
if(easingFunction != null)
blur.easingFunction = easingFunction ;
if(fun !=null)
blur.addEventListener(EffectEvent.EFFECT_END,fun) ;
blur.play();
}
public static function setRotate(displayObject:Object,angleFrom:Number,angleTo:Number,fun:Function,easingFunction:Function=null):void
{
var rotate:Rotate = new Rotate;
rotate.target=displayObject;
if(angleFrom != -1)
rotate.angleFrom=angleFrom;
if(angleTo != -1)
rotate.angleTo=angleTo;
if(easingFunction != null)
rotate.easingFunction = easingFunction ;
if(fun !=null)
rotate.addEventListener(EffectEvent.EFFECT_END,fun);
rotate.play();
}

public static function setGlow(displayObject:DisplayObject,color:Number,alphaFrom:Number,alphaTo:Number,blurXFrom:Number,
blurXTo:Number,blurYFrom:Number,blurYTo:Number,dur:Number,delay:Number,fun:Function,easingFunction:Function=null):void
{
var glow:Glow = new Glow ;
glow.target = displayObject ;
if(color != -1)
glow.color = color ;
if(alphaFrom != -1)
glow.alphaFrom = alphaFrom;
if(alphaTo != -1)
glow.alphaTo = alphaTo;
if(blurXFrom != -1)
glow.blurXFrom = blurXFrom;
if(blurXTo != -1)
glow.blurXTo = blurXTo;
if(blurYFrom != -1)
glow.blurYFrom = blurYFrom;
if(blurYTo != -1)
glow.blurYTo = blurYTo ;
if(delay != -1)
glow.startDelay = delay ;
if(easingFunction != null)
glow.easingFunction = easingFunction ;
if(fun != null)
glow.addEventListener(EffectEvent.EFFECT_END,fun) ;
glow.play() ;
}

}
}


这样，使用效果会非常方便，使用方法如下

Java代码

1. ApplicationEffect.setMove(loginWindow,0,100,0,100,500,200,moveEffectHandler,null) ;

ApplicationEffect.setMove(loginWindow,0,100,0,100,500,200,moveEffectHandler,null) ;
iteye_14479
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
uniapp使用SCSS混入 封装flex布局 从此一行搞定flex
weixin_46448762的博客
03-24 976
将上面的scss文件导入到app.vue中。最后就可以直接在全局的样式中使用了。首先定义demo.scss。
【css】公共样式之flex
qq_45406325的博客
07-17 414
flex作为最经典最方便的一种布局方式，不受宽高限制，使用场景也会很多，回顾下flex属性设置，发现父子元素属性设置至少3个，而且display不可继承，这就导致每次用flex都要写很多重复代码，在公共样式里封装flex，通过类名方式可以高效快捷调用
通用布局flex封装
最新发布
有一种信仰叫海阔天空
01-16 464
比较通用的布局进行了封装、可以直接复制创建文件引用即可。
(前端)将Flex布局中常见的属性封装成单独的文件，在项目中使用比较方便
分享学习编程中的遇到的问题,总结平时的笔记
03-06 612
Flex布局现在比较常用，就个人经历来说，之前在做小程序的时，接触一个比较的好做法。现在想将它记录下来，避免以后忘记了。需要用的时候直接复制粘贴就行了。 代码如下 .flex-row { display: flex; flex-direction: row; } .flex-column { display: flex; flex-direction: column; } .j-c { justify-content: center; } .j-s-b { justify-content: s
flex布局 css封装
m0_60053251的博客
11-05 443
在公共文件中引入 @import './flex'; 前提是必须安装预编译 <style lang="less"> div{ box-sizing: border-box; } .jtl{ width: 20px; height: 15px; } .pic{ width: 100%; height: 100%; } /* 弹性布局 */ .flex { display: -webkit-box; display: -moz-box; display.
自己封装的Flex文件上传组件FileInput
03-18
在本例中，`FileInput.swc`是自封装组件的库文件，开发者可以将其导入到Flex项目中，直接使用封装好的FileInput组件，无需关心内部实现细节。 要使用这个组件，首先需要在Flex工程中引入SWC库，然后在MXML或AS3代码...
flex拓展组件autoComplete开源代码
05-11
通过查看源码，你可以学习到如何封装和扩展Flex组件，以及如何处理数据绑定、事件监听和用户交互。这对于提高Flex开发技能和理解组件工作原理非常有帮助。 在实际开发中，`autoComplete`组件不仅可以提升用户体验，...
对flex栅格系统封装
08-10
标题“对flex栅格系统封装”表明我们将探讨如何将Flexbox特性整合到一个可复用的组件或库中，这样在实际开发中可以快速构建页面结构。这个封装可能包括对列（Columns）、行（Rows）、断点（Breakpoints）以及响应式...
vue 计数器组件封装
03-16
5. **使用组件**：在其他 Vue 组件或父组件中，通过 `import` 导入并使用封装好的 `WmmInput` 组件，并通过 `v-model` 双向绑定数值，以及传递 `step` 和 `disabled` 属性。 ```html import WmmInput ...
Flex 分页控件组件
06-14
标题"Flex分页控件组件"暗示了这个压缩包可能包含一个预封装好的分页组件，可能是一个自定义的Flex组件或者一个第三方库，比如mx.controls.Paginator类。这个组件通常会提供基本的分页功能，如页码显示、跳转至指定...
flex封装实现画布功能
04-10
来公司第一个考核demo，用actionScrpt封装一个组件，根据提供的属性画出矩形的长、宽、背景颜色等。 //定义属性 private var _zx:Number=20;//图形左上方x轴的值 private var _zy:Number=20;//图形左上方Y轴的值 private var _zwidth:Number=60;//图形的宽度 private var _zheigth:Number=60;//图形的高度 private var _bgColor:uint=0x79eef8;//图形的背景颜色 private var _r:uint=1;//图形圆角度 private var _boderColor:uint=0xf339f1;//图形边框颜色 private var _boderWidth:Number=1;//图形边框大小 private var _flag:Boolean=false;//图形是否被点击 private var _shape:Shape;//状态图形的容器 //构造方法 public function DrawDo() { super(); } /** * * 重写方法，创建子组件 * * */ override protected function createChildren():void { super.createChildren(); shape=new Shape(); shape.graphics.beginFill(bgColor); shape.graphics.lineStyle(boderWidth,boderColor); shape.graphics.drawRoundRect(zx,zy,zwidth,zheigth,r); shape.graphics.endFill(); addChild(shape); }
Flex样式生成工具
09-30
Flex样式生成工具
flex 重写组件
08-26
flex 重写组件
封装flex布局（Less）
旭哥的博客
06-04 2037
使用less封装flex布局，总结flex知识。
封装flex布局---及flex简易解析--最简单入门上手flex布局
weixin_44524243的博客
04-21 593
flex简介 布局的传统解决方案，基于盒状模型，依赖 display 属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。 2009年，W3C 提出了一种新的方案----Flex 布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。 Flex布局为“弹性布局”。 任何一个容器都可以设置为flex布局，设置了flex属性的容器，其子成员元素都自动成为flex成员。 容器默认存在两根
css日积月累系列---简易的flex布局使用sass和less 封装版
zhxh0376的专栏
08-02 577
sass 和less 的基础用法， 封装针对基础样式，flex 布局为核心驱动
公共样式封装(基于flex布局)
HZR_497的博客
12-09 1091
html, body{ height:100%; //overflow-y:auto; //position:relative; } #root{ height:100%; position:relative; } *{ margin:0; padding:0; border:0; font-family:-apple-system,BlinkMacSystemFont,HelveticaNeue,...
flex弹性盒封装
weixin_43531187的博客
08-07 204
.flex{ display: flex; } .flex-row{ flex-direction:row } .flex-column{ flex-direction:column } .flex1{ flex: 1; } .flex-space-between{ justify-content: space-between; } .flex-space-around{ justify-content: space-around; } .flex-content-start{ justify
flex 的封装和简化
weixin_39009993的博客
03-16 713
.COL{ display:flex; flex-direction:column; height:100vh; width:100vw; } .flex{ display:flex; } .col{ display:flex; flex-direction:column; } .Content{ flex:1; overflow:auto; } .absolute{ ...
vue封装一个flex组件
06-02
好的，以下是一个简单的 Vue Flex 组件的封装示例： ```vue ['flex', flexDirection, justifyContent, alignItems]"> <slot></slot> export default { name: 'Flex', props: { direction: { type: ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值