Следующий пример покажет как применить эффект при изменении размера контейнера HBox
используя resizeEffect стиль/эффект
View CodeMXML | |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | <?xml version="1.0" encoding="utf-8"?> <mx:Application name="HBox_resizeEffect_test" xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="middle" backgroundColor="white"> <mx:HDividedBox id="hDividedBox" width="100%" height="100%"> <mx:HBox id="hBox1" backgroundColor="haloGreen" resizeEffect="Resize" width="100%" height="100%" /> <mx:HBox id="hBox2" backgroundColor="haloBlue" resizeEffect="Resize" width="100%" height="100%" /> </mx:HDividedBox> </mx:Application> |
также можно задать resizeEffect при помощи внешнего .CSS или блока
как показано ниже
View CodeMXML | |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 | <?xml version="1.0" encoding="utf-8"?> <mx:Application name="HBox_resizeEffect_test" xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="middle" backgroundColor="white"> <mx:Style> HBox { resizeEffect: ClassReference("mx.effects.Resize"); } </mx:Style> <mx:HDividedBox id="hDividedBox" width="100%" height="100%"> <mx:HBox id="hBox1" backgroundColor="haloGreen" width="100%" height="100%" /> <mx:HBox id="hBox2" backgroundColor="haloBlue" width="100%" height="100%" /> </mx:HDividedBox> </mx:Application> |
и тоже самое при помощи только ActionScript
View CodeMXML | |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 | <?xml version="1.0" encoding="utf-8"?> <mx:Application name="HBox_resizeEffect_test" xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="middle" backgroundColor="white" initialize="init();"> <mx:Script> <![CDATA[ import mx.containers.HBox; import mx.containers.HDividedBox; import mx.effects.Resize; private var hBox1:HBox; private var hBox2:HBox; private var hDividedBox:HDividedBox; private function init():void { hBox1 = new HBox(); hBox1.percentWidth = 100; hBox1.percentHeight = 100; hBox1.setStyle("backgroundColor", "haloGreen"); hBox1.setStyle("resizeEffect", Resize); hBox2 = new HBox(); hBox2.percentWidth = 100; hBox2.percentHeight = 100; hBox2.setStyle("backgroundColor", "haloBlue"); hBox2.setStyle("resizeEffect", Resize); hDividedBox = new HDividedBox(); hDividedBox.percentWidth = 100; hDividedBox.percentHeight = 100; hDividedBox.addChild(hBox1); hDividedBox.addChild(hBox2); addChild(hDividedBox); } ]]> </mx:Script> </mx:Application> |

0 Отзывов на “Как применить эффект при изменении размера HBox (Flex)”
Оставить отзыв