Flex特效与图表-优快云博客

本文链接：https://blog.youkuaiyun.com/wangwan/article/details/2688034

<mx:AnimateProperty>可实现拉伸效果

<mx:Blur>模糊效果

<mx:Dissolve>实现淡出淡入效果,与<mx:Fade>相似

<mx:Glow>外发光效果

<mx:Iris>以矩形方式出现或消失

<mx:Move>移动效果

<mx:Parallel>多种效果叠加

<mx:Pause>停止 mx.effects.easing.Bounce.easeOut可产生弹动效果

<mx:Resize>改变大小

<mx:Rotate>旋转角度

<mx:SoundEffect>声音效果

<mx:WipeDown>从上往下消失或出现

<mx:WipeLeft>从右往左消失或出现

<mx:WipeRight>从左往右消失或出现

<mx:WipeUp>从下往上消失或出现

<mx:Zoom>放大或缩小

</mx:Transition>不同state切换时的过渡效果

Charts(统计)

<mx:AreaChart>是一种以面积作为表示方式

<mx:AxisRenderer>是一种轴图,股票交易常以这种方式表示

<mx:BarChart>是柱状图

<mx:BubbleChart>气泡图

<mx:CandlestickChart>一种比较有趣的图,”涨”跟”跌”的颜色会不一样

<mx:CategoryAxis>跟AxisRenderer很像

<mx:ColumnChart>跟<mx:BarChart>很像

<mx:DateTimeAxis>以日期为轴的折线图

<mx:GridLines>多条线图

<mx:HLOCChart>跟AxisRenderer很像

<mx:Legend>图例,离散的点

<mx:LinearAxis>Axis系列

<mx:LineChart>折线图

<mx:LogAxis>Axis系列

<mx:PieChart>饼图

<mx:PlotChart>跟Legend很像

已知的一些图像处理，主要是得到颜色过滤矩阵，不完整，大家一起来补充。

//颜色转换数组，所有的0都是可调值

public var colorArray:Array = [1,0,0,0,0,0,1,0,0,0,0,0,1,0,0,0,0,0,0,0,0,0,1,0];

1.处理图像为灰度：

//取值范围0~3

colorArray[0] = (1-0)*0.3086+0;

colorArray[1] = (1-0)*0.6094;

colorArray[2] = (1-0)*0.0820;

colorArray[5] = (1-0)*0.3086;

colorArray[6] = (1-0)*0.6094+0;

colorArray[7] = (1-0)*0.0820;

colorArray[10] = (1-0)*0.3086;

colorArray[11] = (1-0)*0.6094;

colorArray[12] = (1-0)*0.0820+0;

colorArray[18] = 1;

image.filters = [new ColorMatrixFilter(colorArray)];

2.亮度调节：

var brightness:Number;//取值范围0~5

colorArray[0] = brightness;

colorArray[6] = brightness;

colorArray[12] = brightness;

colorArray[18] = 1;

img.filters = [new ColorMatrixFilter(colorArray)];

3.饱和度调节：

var saturation:Number;//取值范围0~3

colorArray[0] = (1-saturation)*0.3086+saturation;

colorArray[1] = (1-saturation)*0.6094;

colorArray[2] = (1-saturation)*0.0820;

colorArray[5] = (1-saturation)*0.3086;

colorArray[6] = (1-saturation)*0.6094+saturation;

colorArray[7] = (1-saturation)*0.0820;

colorArray[10] = (1-saturation)*0.3086;

colorArray[11] = (1-saturation)*0.6094;

colorArray[12] = (1-saturation)*0.0820+saturation;

colorArray[18] = 1;

img.filters = [new ColorMatrixFilter(colorArray)];

4.对比度调节：

var contrast:Number;//取值范围0~1

var a:Number = contrast*11;

var b:Number = 63.5-(contrast*698.5);

colorArray[0] = a;

colorArray[4] = b;

colorArray[6] = a;

colorArray[9] = b;

colorArray[12] = a;

colorArray[14] = b;

colorArray[18] = 1;

img.filters = [new ColorMatrixFilter(colorArray)];

5.水平翻转：

var planeBitmapData:BitmapData = new BitmapData( img.width, img.height );

var planeMatrix : Matrix = new Matrix(-1, 0, 0, 1, img.contentWidth, 0 );

planeBitmapData.draw( img, planeMatrix );

var planeBitmap:Bitmap = new Bitmap(planeBitmapData);

img.source = planeBitmap;

6.垂直翻转：

var apeakBitmapData:BitmapData = new BitmapData( img.width, img.height );

var apeakMatrix : Matrix = new Matrix(1, 0, 0, -1, 0, img.contentHeight );

var apeakBitmap:Bitmap = new Bitmap(apeakBitmapData);

apeakBitmapData.draw( img, apeakMatrix );

img.source = apeakBitmap;

7.浮雕效果：

img.filters = [new ConvolutionFilter(3,3,[-10,-1,0,-1,1,1,0,1,10])];

8、图片移上去图片边缘发亮的效果

<mx:Glow id="rollOutEffect" blurXTo="0" blurYTo="0"

alphaFrom="0.6" alphaTo="0" color="0xFFFFF"/>

<mx:Glow id="rollOverEffect" blurXTo="10" blurYTo="10"

alphaFrom="0" alphaTo="0.6" color="0xFFFFF"/>

[上面显示的是青色]

用代码写的却是纯白。

private function get rollOverEffect():Effect {

var effect:Glow = new Glow();

effect.blurXTo = effect.blurYTo = 10;

effect.alphaFrom = 0;

effect.alphaTo = 0.6;

effect.color = 0xFFFFFF;

return effect;

}

/**

* The roll out effect played on the item.

private function get rollOutEffect():Effect {

var effect:Glow = new Glow();

effect.blurXTo = effect.blurYTo = 0;

effect.alphaFrom = 0.6;

effect.alphaTo = 0;

effect.color = 0xFFFFFF;

return effect;

}

8、并行移动、旋转、放大

<mx:transitions> //定义一个过渡标签

<mx:Transition fromState="*" toState="*"> //设置过渡状态由*转向* '*'代表任何一个状态意思就是说在整个页面中任何一个状态的转换都会经过我们定义的这个过渡

<mx:Sequence targets="{[panel1,panel2,panel3]}"> //效果是并列执行的在此处就是移动+旋转+放大

<mx:Move duration="400"/>

<mx:Rotate angleFrom="0" angleTo="360" filter="move" />

<mx:Resize duration="400"/>

</mx:Sequence>

</mx:Transition>

</mx:transitions>

9、移上去图片发亮

<?xml version="1.0" encoding="utf-8"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" viewSourceURL="srcview/index.html">

<mx:Script>

<![CDATA[

/**

* Create The Functions and the colortransform

private var myColorTransform:ColorTransform;

/**

* The MouseOver function

private function onImageMouseOver():void

{

//on the mouseOver we want it to glow,

//you can play around with the offset and see which one you

//like the best

myColorTransform = new ColorTransform(1,1,1,1,54,54,54);

//now we set the colorTransform that we created to the

//image

myFxImage.transform.colorTransform = myColorTransform;

}

/**

* Create the mouseOut

private function onImageMouseOut():void

{

//what we want to do is reset everything back and the

//easiest way to do that is just to create a blank

//colorTransform and set it to the image

myColorTransform = new ColorTransform();

//we leave the default values which should return

//the image back to the original

myFxImage.transform.colorTransform = myColorTransform;

}

]]>

</mx:Script>

<!--In This Tutorial I will be showing you how to use the color

transform class to give an image a glow effect when the user

mouses over it-->

<mx:Image id="myFxImage" source="@Embed('img/Fx.png')" width="300" height="300"

mouseOver="onImageMouseOver()" mouseOut="onImageMouseOut()"/>

</mx:Application>

10、通过ACTIONSCRIPT给FLEX中的组件添加特效.

mx:Script>

<![CDATA[

import mx.effects.easing.*;

private function init():void {

img.setStyle("showEffect", rotate);

img.setStyle("hideEffect", fade);

}

]]>

</mx:Script>

<mx:Fade id="fade" />

<mx:Rotate id="rotate"

angleFrom="-180"

angleTo="0"

easingFunction="Elastic.easeInOut"

duration="2000" />

<mx:Image id="img"

source="@Embed('assets/flashplayer_icon.jpg')"

width="100"

height="100" />

我常用的特效