第二十一章:变换(六)

简介: 两个按钮的Clicked处理程序每个都启动一个独立的动画。 第一个Button的Clicked处理程序将其Scale属性从1设置为5并再次返回,而第二个Button的Clicked处理程序将其FontSize属性设置为1到5的比例因子,然后再返回。

两个按钮的Clicked处理程序每个都启动一个独立的动画。 第一个Button的Clicked处理程序将其Scale属性从1设置为5并再次返回,而第二个Button的Clicked处理程序将其FontSize属性设置为1到5的比例因子,然后再返回。
这是关于中途的Scale属性的动画:
2019_01_11_092557
正如您所看到的,Button的缩放不会考虑屏幕上可能出现的任何其他内容,而在iOS和Windows 10 Mobile屏幕上,您实际上可以通过Button的透明区域看到顶部BoxView元素,而 opaque Android Button完全隐藏了顶级BoxView。 顶部按钮下面的BoxView实际上位于按钮的顶部,并且在所有三个平台上都可见。
在三个平台上,FontSize属性的动画增加处理方式略有不同:
2019_01_11_092741
在iOS上,Button文本在中间被截断,Button按钮保持相同的高度。在Android上,Button文本换行,放大的Button将两个BoxView元素推到一边。 Windows运行时按钮也会截断文本,但方式与iOS不同,与Android一样,增加的Button高度也会推动两个BoxView元素。
动画“缩放”属性不会影响布局,但动画化FontSize属性显然会影响布局。
ButtonScaler中实现的小动画系统可以独立和同时为两个按钮设置动画,但它仍然存在严重的缺陷。当该Button正在设置动画时,尝试点击按钮。将为该Button启动一个新动画,这两个动画将相互干扰。
有几种方法可以解决这个问题。一种可能性是将CancellationToken值作为AnimateAndBack方法的参数包含在内,以便可以取消该方法。 (您可以将相同的CancellationToken值传递给Task.Delay调用。)这将允许Button的Clicked处理程序在开始新动画之前取消任何正在进行的动画。
另一个选项是AnimateAndBack返回Task对象。这允许按钮的Clicked处理程序将await运算符与AnimateAndBack一起使用。在AnimateAndBack完成动画时,Button可以在调用AnimateAndBack之前轻松禁用自身并重新启用自身。
无论如何,如果您希望通过短暂增加和减少按钮大小来向用户实施反馈,那么动画缩放比使用FontSize更安全,更有效。您将在下一章动画和第23章“触发器和行为”中看到其他技术。
Scale属性的另一个用途是调整元素大小以适合可用空间。 您可能会在第5章“处理大小”结束时回想起FitToSizeClock程序。您可以使用Scale属性执行非常类似的操作,但不需要进行估计或递归计算。
ScaleToSize程序的XAML文件包含缺少某些文本的标签,并且还缺少“缩放”设置以使标签更大:

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="ScaleToSize.ScaleToSizePage"
             SizeChanged="OnSizeChanged">
 
    <Label x:Name="label"
           HorizontalOptions="Center"
           VerticalOptions="Center"
           SizeChanged="OnSizeChanged" />
</ContentPage>

ContentPage和Label都安装了SizeChanged处理程序,它们都使用相同的处理程序。 此处理程序只是将Label的Scale属性设置为页面宽度和高度的最小值除以Label的宽度和高度:

public partial class ScaleToSizePage : ContentPage
{
    public ScaleToSizePage()
    {
        InitializeComponent();
        UpdateLoop();
    }
    async void UpdateLoop()
    {
        while (true)
        {
            label.Text = DateTime.Now.ToString("T");
            await Task.Delay(1000);
        }
    }
    void OnSizeChanged(object sender, EventArgs args)
    {
        label.Scale = Math.Min(Width / label.Width, Height / label.Height);
    }
}

因为设置Scale属性不会触发另一个SizeChanged事件,所以不存在触发无限递归循环的危险。 但使用Task.Delay的实际无限循环使Label更新为当前时间:
2019_01_11_093255
当然,将手机侧向转动会使标签更大:
2019_01_11_093310
在这里,您可以检测到与Android和Windows运行时相比,iOS中Scale属性的实现略有不同。 在Android和Windows上,生成的文本看起来好像是用大字体绘制的。 但是,iOS屏幕上的文字看起来有点模糊。 当操作系统光栅化预分频标签时,会出现这种模糊,这意味着操作系统将其转换为位图。 然后根据“比例”设置扩展位图。

目录
相关文章
|
机器学习/深度学习 传感器 算法
数字图像处理实验(五)|图像复原{逆滤波和伪逆滤波、维纳滤波deconvwnr、大气湍流扰动模型、运动模糊处理fspecial}(附matlab实验代码和截图)
数字图像处理实验(五)|图像复原{逆滤波和伪逆滤波、维纳滤波deconvwnr、大气湍流扰动模型、运动模糊处理fspecial}(附matlab实验代码和截图)
547 0
数字图像处理实验(五)|图像复原{逆滤波和伪逆滤波、维纳滤波deconvwnr、大气湍流扰动模型、运动模糊处理fspecial}(附matlab实验代码和截图)
|
8月前
|
机器学习/深度学习 决策智能
矩阵分析 (三) 矩阵的标准形
矩阵分析 (三) 矩阵的标准形
153 0
|
前端开发 数据可视化 图形学
【数学篇】09 # 如何用仿射变换对几何图形进行坐标变换?
【数学篇】09 # 如何用仿射变换对几何图形进行坐标变换?
114 0
【数学篇】09 # 如何用仿射变换对几何图形进行坐标变换?
Halcon标定系列(5):4点标定之眼在手外项目实践,已知仿射变换矩阵,计算得到旋转角度和缩放因子等参数
Halcon标定系列(5):4点标定之眼在手外项目实践,已知仿射变换矩阵,计算得到旋转角度和缩放因子等参数
809 0
Halcon标定系列(5):4点标定之眼在手外项目实践,已知仿射变换矩阵,计算得到旋转角度和缩放因子等参数
|
Android开发 索引
第二十一章:变换(十)
样式通过将AnchorX值设置为0来结束,该值将旋转中心设置为每个Label的左边缘的垂直中心。 然后每个Label都会获得一个独特的旋转设置:显然,选择“ROTATE”字符串之前的空格,以便R的垂直条组合形成一个看起来几乎像圆的16边多边形。
1019 0
|
JavaScript Android开发 索引
第二十一章:变换(九)
旋转的文字效果轮换很有趣。 旋转动画时更有趣(正如您将在下一章中看到的那样),但即使使用静态图像也很有趣。本章和下一章中的几个旋转示例涉及将视觉元素排列在一个圆圈中,所以让我们首先尝试显示一个简单的圆圈。
841 0
|
Android开发
第二十一章:变换(八)
旋转变换 “旋转”属性旋转屏幕表面上的可视元素。 将“旋转”属性设置为以度为单位的角度(不是弧度)。 正角度顺时针旋转元素。 您可以将“旋转”设置为小于0或大于360的角度。实际旋转角度是旋转属性模数360的值。
818 0
|
Android开发
第二十一章:变换(十四)
3D-ish旋转 即使计算机屏幕是平面和二维的,也可以在这些屏幕上绘制视觉对象,使其具有第三维的外观。 在本章的前面,您看到了一些文本效果,它们提供了第三个维度的提示,而Xamarin.Forms支持两个额外的旋转,名为RotationX和RotationY,它们似乎也突破了屏幕固有的二维平面度。
1344 0
|
Android开发 iOS开发
第二十一章:变换(七)
锚定规模当你尝试使用Scale属性时,你可能已经注意到视觉元素的任何扩展都是从元素的中心向外发生的,如果你将视觉元素缩小到任何东西,它也会向中心收缩。这是另一种思考方式:无论Scale属性的设置如何,视觉元素正中心的点都保持在同一位置。
935 0
|
JavaScript Android开发
第二十一章:变换(五)
规模变换 VisualElement类定义名为Scale的属性,您可以使用该属性更改元素的呈现大小。 Scale属性不会影响布局(将在ButtonScaler程序中演示)。它不会影响元素的get-only Width和Height属性,也不会影响包含Width和Height值的get-only Bounds属性。
906 0