• wpf创建动画示例



    第 1 部分:创建 DoubleAnimation

    1.不透明度值 1.0 使对象完全不透明,不透明度值 0.0 使对象完全不可见。 <[default] http://msdn2.microsoft.com/mtps:sentence runat="server" sentenceid="b25a8506c7a98ca77fd044981ed22f95" xmlns="http://msdn2.microsoft.com/mtps" class="tgtSentence" id="tgt51">若要使动画的不透明度值从 1.0 过渡为 0.0,可以将其 From 属性设置为 1.0,将其 To 属性设置为 0.0
    ...<DoubleAnimation From="1.0" To="0.0" />
    ..

    2.然后,必须指定 Duration。
    动画的 Duration 指定了从其起始值过渡为目标值所需的时间。
    在下面的示例中,为动画指定的持续时间为五秒钟。
    ...<DoubleAnimation From="1.0" To="0.0"
    Duration="0:0:5" />
    ...

    3.上面的代码显示了不透明度值从 1.0 向 0.0 转换的动画,此转换使目标元素从完全不透明逐渐转变为完全不可见。
    若要使元素在消失后再逐渐回到视野中,请将动画的 AutoReverse 属性设置为 true。 若要使动画无限期地重复,请将其 RepeatBehavior
    属性设置为 Forever。

    ...<DoubleAnimation From="1.0" To="0.0"
    Duration="0:0:5" AutoReverse="True" RepeatBehavior="Forever"/>
    ...

    第 2 部分:创建演示图板

    若要向对象应用动画,请创建 Storyboard 并使用 TargetName 和
    TargetProperty附加属性指定要进行动画处理的对象和属性。
    1.创建 Storyboard 并将动画添加为其子项。
    ...<Storyboard>
      <DoubleAnimation
        From="1.0" To="0.0" Duration="0:0:1" 
        AutoReverse="True" RepeatBehavior="Forever" />
    </Storyboard>
    ...
    2.Storyboard 必须知道要在哪里应用动画。 使用 Storyboard .TargetName 附加属性指定要进行动画处理的对象。
    在下面的代码中,为 DoubleAnimation 指定了一个目标名称 MyRectangle,这是要进行动画处理的对象的名称。
    ...<Storyboard>
    <DoubleAnimation
    Storyboard.TargetName="MyRectangle"
    From="1.0"
    To="0.0" Duration="0:0:1"
    AutoReverse="True" RepeatBehavior="Forever" />
    </Storyboard>
    ...

    3.使用 TargetProperty
    附加属性指定要进行动画处理的属性。 在下面的代码中,动画被配置为面向 Rectangle 的 Opacity 属性。

    <BeginStoryboard>
    <Storyboard>
    <DoubleAnimation
    Storyboard.TargetName="MyRectangle"
    Storyboard.TargetProperty="Opacity"
    From="1.0" To="0.0" Duration="0:0:5"
    AutoReverse="True" RepeatBehavior="Forever"
    />
    </Storyboard>
    </BeginStoryboard>


    第 3 部分 (XAML):将演示图板与触发器关联


    在 XAML 中应用和启动 Storyboard 的最简单的方法是使用事件触发器。


    创建一个 BeginStoryboard 对象并将演示图板与其关联。 BeginStoryboard 是一种应用和启动 Storyboard 的
    TriggerAction。


    <BeginStoryboard>
    <Storyboard>
    <DoubleAnimation
    Storyboard.TargetName="MyRectangle"
    Storyboard.TargetProperty="Opacity"
    From="1.0" To="0.0" Duration="0:0:5"
    AutoReverse="True" RepeatBehavior="Forever"
    />
    </Storyboard>
    </BeginStoryboard>


    创建 EventTrigger 并将 BeginStoryboard 添加至其 Actions 集合。 将 EventTrigger 的
    RoutedEvent 属性设置为启动 Storyboard 所需的路由事件。
    <!-- Animates the rectangle's
    opacity. -->
    <EventTrigger RoutedEvent="Rectangle.Loaded">
    <BeginStoryboard>
    <Storyboard>
    <DoubleAnimation
    Storyboard.TargetName="MyRectangle"
    Storyboard.TargetProperty="Opacity"
    From="1.0" To="0.0" Duration="0:0:5"
    AutoReverse="True" RepeatBehavior="Forever"
    />
    </Storyboard>
    </BeginStoryboard>
    </EventTrigger>



    将 EventTrigger 添加至矩形的 Triggers 集合。
    <Rectangle
    Name="MyRectangle"
    Width="100"
    Height="100"
    Fill="Blue">
    <Rectangle.Triggers>
    <!--
    Animates the rectangle's opacity. -->
    <EventTrigger RoutedEvent="Rectangle.Loaded">
    <BeginStoryboard>
    <Storyboard>
    <DoubleAnimation
    Storyboard.TargetName="MyRectangle"
    Storyboard.TargetProperty="Opacity"
    From="1.0" To="0.0" Duration="0:0:5"
    AutoReverse="True" RepeatBehavior="Forever"
    />
    </Storyboard>
    </BeginStoryboard>
    </EventTrigger>
    </Rectangle.Triggers>
    </Rectangle>

  • 相关阅读:
    blob 下载功能和预览功能
    实现大文件上传
    element ui框架之Upload
    常用utils
    vue实现excel表格上传解析与导出
    理解script加载
    js处理10万条数据
    Shadow DOM
    20150625_Andriod_01_ListView1_条目显示
    20150624_Andriod _web_service_匹配
  • 原文地址:https://www.cnblogs.com/zhangtao/p/2347550.html
Copyright © 2020-2023  润新知