首页 > 其他分享 >Expander展开收缩动画

Expander展开收缩动画

时间:2024-04-14 10:55:19浏览次数:15  
标签:动画 收缩 ...... 绑定 MaterialDesign Expander 属性

这个问题困扰了我一天,最后下了个MaterialDesign的demo,看了下他的源码,才恍然大悟,原来很简单。

我原来的设想是在expander的ControlTemplate设置触发器,在IsExpanded属性变化时根据ContentPresenter控件的高度来做动画,但这就涉及到取属性,在xaml中只有绑定。

但一绑定就报错无法冻结此 Storyboard 时间线树供跨线程使用

说实话绑定高度是我们的自然想法,结果MaterialDesign居然使用LayoutTransform缩放来做的动画,这个就不需要属性值了呀,直接指定比例就行了,避开了绑定。

他的源代码时这样写的

......
<Border Name="ContentSite">
  <Border.LayoutTransform>
    <TransformGroup>
      <ScaleTransform x:Name="ContentSiteScaleTransform" />
      <RotateTransform Angle="{Binding Path=ExpandDirection, RelativeSource={RelativeSource AncestorType=Expander}, Converter={StaticResource ExpanderRotateAngleConverter}}" />
    </TransformGroup>
  </Border.LayoutTransform>

  <Grid Name="ContentPanel"
        Margin="{TemplateBinding Padding}"
        HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
        VerticalAlignment="{TemplateBinding VerticalContentAlignment}">
    <Grid.LayoutTransform>
      <RotateTransform Angle="{Binding Path=ExpandDirection, RelativeSource={RelativeSource AncestorType=Expander}, Converter={StaticResource ExpanderRotateAngleConverter}, ConverterParameter=-1}" />
    </Grid.LayoutTransform>

    <ContentPresenter Name="PART_Content"
                      ContentStringFormat="{TemplateBinding ContentStringFormat}"
                      ContentTemplate="{TemplateBinding ContentTemplate}"
                      ContentTemplateSelector="{TemplateBinding ContentTemplateSelector}"
                      Focusable="False"
                      Visibility="Collapsed" />

  </Grid>
</Border>
......
<VisualTransition To="Expanded">
  <Storyboard>
    <DoubleAnimation Storyboard.TargetName="ContentPanel"
                     Storyboard.TargetProperty="Opacity"
                     From="0"
                     To="1"
                     Duration="{DynamicResource ExpandDuration}" />
    <DoubleAnimation Storyboard.TargetName="ContentSiteScaleTransform"
                     Storyboard.TargetProperty="(ScaleTransform.ScaleY)"
                     From="0"
                     To="1"
                     Duration="{DynamicResource ExpandDuration}">
      <DoubleAnimation.EasingFunction>
        <CubicEase EasingMode="EaseInOut" />
      </DoubleAnimation.EasingFunction>
    </DoubleAnimation>
    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PART_Content"
                                   Storyboard.TargetProperty="Visibility"
                                   Duration="0:0:0">
      <DiscreteObjectKeyFrame KeyTime="0%" Value="{x:Static Visibility.Visible}" />
    </ObjectAnimationUsingKeyFrames>
  </Storyboard>
</VisualTransition>

吐血三升!

标签:动画,收缩,......,绑定,MaterialDesign,Expander,属性
From: https://www.cnblogs.com/ggtc/p/18133859

相关文章

  • Adobe Animate 2024 v24.0.2 (macOS, Windows) - 动画制作
    AdobeAnimate2024v24.0.2(macOS,Windows)-动画制作Acrobat、AfterEffects、Animate、Audition、Bridge、CharacterAnimator、Dimension、Dreamweaver、Illustrator、InCopy、InDesign、LightroomClassic、MediaEncoder、Photoshop、PremierePro、AdobeXD请访问原......
  • 2-75. 加入 NPC 动画及真实的 Schedule 触发
    回顾动画状态机修改NPCMovement测试勾选MoveNPC之后,NPC就会走过去,然后停下来改进我们希望NPC在走完之后播放一个动画,然后结束之后要面向屏幕修改Settings这个animationBreakTime是动画间隔时间修改NPCMovement如何通过AnimatorOverrideControlle......
  • 动画渲染属于哪个专业?动画渲染用云渲染快吗
    动画渲染是影视制作关键环节,它依赖于计算机软件将动画设计转换成栩栩如生的图像。动画渲染专家需熟练掌握多种渲染方法,以确保产出的效果既高质量又高效率。随着技术进步,云渲染作为一种创新服务,正在逐步影响渲染速度和流程。动画渲染到底属于何种领域?而云渲染技术能否真的显著加快......
  • 2-59. 制作可砍伐的树木摇晃和倒下动画
    添加树木相关的信息修改Tree预制体然后把Tree01改名为CropTree01修改CropDataList_SO修改CursorManager增加工具动画修改GridMapManager给树增加动画RotateLeft向左转动1度RotateRight向右转动1度再增加FallingLeft和FallingRight两个动画......
  • css学习笔记之展开列表图标动画
    “蓝色界面”风格的填充的星图标欢迎下载填充的星矢量图标,“蓝色界面”风格。格式有png、svg、pdf、html代码。可对填充的星图标、符号进行修改、调整大小、修改颜色。https://igoutu.cn/icon/y0OTcruih2CY/%E5%A1%AB%E5%85%85%E7%9A%84%E6%98%9F今天在这个网站看到了上面类似......
  • 2-51. 制作人物使用工具的动画和流程
    增加Tool工具增加ToolAnimatorBlendTree重命名为UseTool给Arm增加动画然后Body和Hair也进行这样赋值给工具动画增加空片段增加Tool_Hoe修改Player身上的动画修改Player脚本向上使用工具时需要隐藏工具修改AnimatorOverride项目相关......
  • 通过css变量和动画的延迟负值, 实现动画效果
    <!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>Document</title&g......
  • 【WPF应用41】WPF中的Expander控件详解
    WindowsPresentationFoundation(WPF)中的Expander控件是一个用于显示详细信息的交互式UI元素。它允许用户通过点击标题来展开或折叠内容区域。Expander控件通常用于在界面上组织内容,提供一种可见/隐藏的功能,以帮助用户专注于当前感兴趣的信息。一、Expander控件简介Expand......
  • WPF —— 平移变换动画实例
    创建动画面临第一个问题选择正确的属性,选择属性的准则有以下几个方式进行选择 1如果希望动画显示和隐藏元素的时候,不要使用visibility,应使用opacity进行动画 2如果改变元素的位置的动画,尽量使用Canvas,使用Canvas.left以及canvas.top属性进行调整 但是也可以使用thickne......
  • cesium 地图旋转 整个场景旋转 开场动画
    设置camera旋转能实现整个场景的旋转,多用于开场动画开始旋转functiononTickCallback(){viewer.scene.camera.rotate(Cesium.Cartesian3.UNIT_Z,-0.02);}viewer.clock.onTick.addEventListener(onTickCallback);停止旋转view......