WPF —— FromTo/By动画

最新推荐文章于 2025-12-02 19:53:50 发布

原创最新推荐文章于 2025-12-02 19:53:50 发布 · 702 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#wpf #服务器

WPF 同时被 2 个专栏收录

29 篇文章

订阅专栏

WPF动画

7 篇文章

订阅专栏

本文详细介绍了FromTo/By动画在WPF中的常用属性，如重复行为、自动反转和缓动函数，以及如何在Button控件中通过EventTrigger实现动态宽度和透明度变化的实例。

FromTo/By动画

from 从那种状态
to 到那种状态
by 通过每次变化多少

FromTo/By动画常用的属性

From = "可以省掉"。
To = 结束的状态
RepeatBehavior="Forever" 无限重复
AutoReverse="True" 支持反向动画
FillBehavior="Stop" 动画停止的时候保持的状态 stop:停止时候恢复到初始状态
holEnd:停止时候保持动画结束状态
AutoReverse="True"

EasingFunction 缓动函数:
EasingMode :缓动函数效果
EaseIn ：开始的时候慢
EaseOut: 结束的时候慢
EaseInOut 开始慢和结束的慢

FromTo/By动画的实例

<Button Width="100" Height="40" Content="Hello world">
    <!--1 Triggers.触发器-->
    <Button.Triggers>
        <!--2 添加触发类型-->
        <EventTrigger RoutedEvent="Button.Click">
            <!--3 开始故事板-->
            <BeginStoryboard>
                <!--4 创建故事板-->
                <Storyboard>
                    <!--5 创建一个double类型的动画
                        From = "可以省掉"。
                        To = 结束的状态
                        RepeatBehavior="Forever" 无限重复
                        AutoReverse="True" 支持反向动画
                        FillBehavior="Stop" 动画停止的时候保持的状态 stop:停止时候恢复到初始状态
                        holEnd:停止时候保持动画结束状态
                        AutoReverse="True" 
                        
                    -->
                    <DoubleAnimation Storyboard.TargetProperty="Width"
                                     Duration="0:0:5"
                                     To="350">
                        <DoubleAnimation.EasingFunction>
                            <ElasticEase EasingMode="EaseIn" Oscillations="5">

                            </ElasticEase>
                        </DoubleAnimation.EasingFunction>
                    </DoubleAnimation>
                    
                    <!--第二个动画:在一个srorbord里面动画是同时执行的-->
                    <DoubleAnimation Storyboard.TargetProperty="Opacity"
                                     To="0"
                                     AutoReverse="True"
                                     RepeatBehavior="Forever"
                                     Duration="0:0:5">
                        
                        
                    </DoubleAnimation>
                </Storyboard>
            </BeginStoryboard>
        </EventTrigger>
    </Button.Triggers>
</Button>