非代码设计,exml直接操作
设计模式下选中对象,之后[源码],会直接定位到该对象在exml源码中的位置
width.down = "100%" 表示当按钮按下的时候宽度为 100%,其他情况下宽度90%
horizontalCenter="0" verticalCenter="0" 表示让图片以中心放大
实现按钮的点击缩放效果
TypeScript入门教程 https://ts.xcatliu.com/engineering/lint.html
昨天朋友建议我在游戏引擎中实现缩放控件的功能,于是自己花了两天的时间研究了以鼠标为中心缩放控件的底层代码,代码的实现并不依赖于任何语言,也就是说可以在任何语言中使用,以下是代码实现的思想:分析:
先来分析一下效果,这种以鼠标为中心坐标的缩放功能是通过Flash研究得出的,它的思想是这样, 当使用放大镜时,鼠标点击画布它就会以鼠标坐标为中心等比例缩放对象,现在通过下面步骤去研究这种效果是怎么样实现的。注意:下面是以横坐标为例
1.获取鼠标坐标,通过计算 MousePosFormTopLeft = 鼠标坐标 - 对象坐标
2.通过MousePosFormTopLeft 与 控件的宽比较计算出鼠标坐标到对象最近边沿的距离
然后对边沿距离进行缩放,然后再计算对象缩放后的新坐标
非代码设计,exml直接操作
设计模式下选中对象,之后[源码],会直接定位到该对象在exml源码中的位置
width.down = "100%" 表示当按钮按下的时候宽度为 100%,其他情况下宽度90%
horizontalCenter="0" verticalCenter="0" 表示让图片以中心放大
实现按钮的点击缩放效果TypeScript入门教程 https://ts.xcatliu.com/engineering/lint.html
转载于:https://www.cnblogs.com/allyh/p/10534418.html
13)Zoom缩放效果
Zoom效果可以以指定点为中心按比例缩放对象。与Resize效果不同的是,Resize改变目标对象的长宽属性,而Zoom改变的目标对象的缩放比例。在下面的例子中,当鼠标移动到图片上时开始播放Zoom效果,鼠标移出时还原。
代码清单 ZoomSample.mxml
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Script>
<![CDATA[
import flash.events.MouseEvent;
//鼠标事件处理函数
public function doZoom(event:MouseEvent):void {
//如果已经在播放效果了, 则反向播放效果
if (zoom.isPlaying) {
zoom.reverse();
}
//否则播放效果
else {
zoom.play([event.target],event.type==MouseEvent.ROLL_OUT?true:false);
}
}
]]>
</mx:Script>
<mx:Zoom id="zoom" originX="{0}" originY="{0}"
zoomWidthTo="2"zoomHeightTo="2"zoomWidthFrom=".5"zoomHeightFrom=".5
"/>
<mx:Paneltitle="ZoomEffect"width="90%"height="90%"layout="absolute"
paddingTop="5"paddingLeft="10"paddingRight="10"paddingBottom="5">
<mx:Imageid="img"x="100"y="100"source="@Embed(source='assets/car.pn
g')"
scaleX=".5"scaleY=".5"rollOver="doZoom(event)"rollOut="doZoom(event
)"/>
</mx:Panel>
</mx:Application>
9.1.3 复合效果组件
很多时候需要同时执行或按顺序执行多个动画效果,此时可以用Parallel和Sequence效果。
1)Parallel平行播放效果
Parallel效果可以同时播放多个子效果,下面例子中的Parallel效果包含了Move和Resize效果,单击“Expend”按钮时图片将放大并发生位移,单击“Contract”按钮则返回原位置,并逐渐缩小为初始大小。
代码清单 ParallelSample.mxml
<?xml version="1.0"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<!--在Parallel效果中包含Move和Resize效果-->
<mx:Parallel id="expand" target="{img}">
<mx:Move xTo="{canvas.width/2 - 50}" yTo="{canvas.height/2-
100}"/>
<mx:Resize widthTo="100" heightTo="200"/>
</mx:Parallel>
<mx:Parallel id="contract" target="{img}">
<mx:Move xTo="20" yTo="20"/>
<mx:Resize widthTo="30" heightTo="60"/>
</mx:Parallel>
<mx:Panel title="Parallel Effect" width="500" height="300">
<mx:Canvas id="canvas" width="100%" height="100%">
<mx:Image id="img" x="20" y="20" width="30" height="60"
source="@Embed(source='assets/icon1.png')"/>
</mx:Canvas>
<!--使用ControlBar中的按钮控制效果播放-->
<mx:ControlBar>
<mx:Buttonlabel="Expand"click="expand.end();expand.play();"/>
<mx:Buttonlabel="Contract"click="contract.end();contract.play();"/>
</mx:ControlBar>
</mx:Panel>
</mx:Application>
这个例子中同时使用了Move和Resize效果,如图9-3所示。
图9-3 Parallel效果
2)Sequence顺序播放效果
Sequence效果中可以顺序添加多个子效果,并以子效果的添加顺序依次播放。下面的代码演示了Sequence效果的使用方式:
<mx:Sequence id="sequenceEffect">
<mx:Move xBy="150" duration="1000"/>
<mx:Pause duration="2000"/>
<mx:Move xBy="-150" duration="1000"/>
</mx:Sequence>
<mx:Canvaswidth="100%"height="100%"mouseDownEffect="{sequenceEffect}
">
<mx:Image source="assets/plane.png"/>
</mx:Canvas>
在这个例子里,当用户在Canvas中按下鼠标时,会依次调用Sequence中的各个子效果,首先Image对象会右移一段距离,然后暂停2秒,再左移回到原来位置。
四、WPF图形的变形
RenderTransform:呈现变形,
- TranslateTransform:偏移变形,能够使某对象的位置发生平移变化。
- RotateTransform:旋转变化,以给定的点为旋转中心,以角度为单位进行旋转变形。
- ScaleTransform:缩放变化,调整被变形的对象的坐标系,有缩放效果。
- SkewTransform:扭曲变化,可以横向和纵向对元素进行扭曲。
看下面一个例子:
<Grid Height="969" VerticalAlignment="Bottom"> <Grid.RowDefinitions> <RowDefinition Height="160*"/> <RowDefinition Height="163*"/> </Grid.RowDefinitions> <Grid.ColumnDefinitions> <ColumnDefinition Width="601*"/> <ColumnDefinition Width="592*"/> </Grid.ColumnDefinitions> <!--平移变化:以原来的对象为坐标原点,然后向X轴,Y轴进行平移--> <Canvas Grid.Row="0" Grid.Column="0"> <Image Width="280" Canvas.Top="50" Canvas.Left="50" Source="Image\aaf34bac5e8cc41b65187b0817e00cda.jpg" Opacity="0.5"></Image> <Image Width="280" Canvas.Top="50" Canvas.Left="50" Source="Image\aaf34bac5e8cc41b65187b0817e00cda.jpg"> <Image.RenderTransform> <TranslateTransform X="120" Y="120"/> </Image.RenderTransform> </Image> </Canvas> <!--旋转变化:Angle(旋转角度),CenterX、CenterY(旋转体的中心)--> <Canvas Grid.Row="0" Grid.Column="1"> <Image Width="280" Canvas.Top="50" Canvas.Left="200" Source="Image\aaf34bac5e8cc41b65187b0817e00cda.jpg" Opacity="0.5"></Image> <Image Width="280" Canvas.Top="50" Canvas.Left="200" Source="Image\aaf34bac5e8cc41b65187b0817e00cda.jpg"> <Image.RenderTransform> <RotateTransform Angle="45" CenterX="0" CenterY="0"/> </Image.RenderTransform> </Image> </Canvas> <!--缩放变化:CenterX、CenterY(指定的点),ScaleX、ScaleY(X轴、Y轴缩放的倍数)--> <Canvas Grid.Row="1" Grid.Column="0"> <Image Width="280" Canvas.Top="50" Canvas.Left="100" Source="Image\aaf34bac5e8cc41b65187b0817e00cda.jpg" Opacity="0.5"></Image> <Image Width="280" Canvas.Top="50" Canvas.Left="100" Source="Image\aaf34bac5e8cc41b65187b0817e00cda.jpg"> <Image.RenderTransform> <ScaleTransform CenterX="0" CenterY="0" ScaleX="0.5" ScaleY="0.5"/> </Image.RenderTransform> </Image> </Canvas> <!--扭曲变化:CenterX、CenterY(指定的点),AngleX、AngleY是让元素围绕X轴Y轴倾斜的角度--> <Canvas Grid.Row="1" Grid.Column="1"> <Image Width="280" Canvas.Top="30" Canvas.Left="100" Source="Image\aaf34bac5e8cc41b65187b0817e00cda.jpg" Opacity="0.5"></Image> <Image Width="280" Canvas.Top="30" Canvas.Left="100" Source="Image\aaf34bac5e8cc41b65187b0817e00cda.jpg"> <Image.RenderTransform> <SkewTransform CenterX="0" CenterY="0" AngleX="30" AngleY="30"/> </Image.RenderTransform> </Image> </Canvas> </Grid>
效果图如下:
5)TransformGroup:实现多种效果的叠加,就要使用到TransformGroup,否则会报错,TransformGroup的作用类似于在控件不居中的StackPanel内嵌的作用,把多种元素组合成一种变化的容器
看下面一个例子:
<Grid> <Button Width="80" Height="80" Content="smile" FontSize="25" HorizontalAlignment="Left" VerticalAlignment="Top" > <Button.RenderTransform> <TransformGroup> <RotateTransform Angle="45" CenterX="0" CenterY="0"/> <TranslateTransform X="200" Y="200"/> </TransformGroup> </Button.RenderTransform> </Button> </Grid>
效果图如下:
6)MatrixTransform:通过一种矩形算法来进行运算得到相应的效果的。