如何为配合TintedImage使用的透明按钮实现按下动画

该需求完全可以实现，不需要改动当前独立放置TintedImage的布局逻辑，仅需要解决透明Button默认按压反馈失效的问题即可。

当前使用的布局代码如下：

<abstractions:TintedImage 
            x:Name="profile"
            RelativeLayout.YConstraint="{ConstraintExpression
            Type=Constant,
            Constant=20}"
            RelativeLayout.XConstraint="{ConstraintExpression
            Type=Constant,
            Constant=300}"
            WidthRequest="20"
            Source="User"
            TintColor="{x:DynamicResource TextColor}"/>
        
<Button
            RelativeLayout.YConstraint="{ConstraintExpression
            Type=Constant,
            Constant=10}"
            RelativeLayout.XConstraint="{ConstraintExpression
            Type=Constant,
            Constant=295}"
            HeightRequest="50"
            WidthRequest="50"
            Clicked="ButtonSettings_Clicked"
            BackgroundColor="Transparent"/>

原问题附带了实际运行效果的演示录屏，可直观看到当前实现下透明按钮无按压反馈的实际表现。

具体实现路径 #

• 规避默认渲染缺陷：设置BackgroundColor="Transparent"的Button默认不会触发可见的按压反馈，原因是框架默认的Pressed状态视觉改动逻辑是修改按钮自身的背景色，完全透明的属性会让这个改动完全不可见，全程不需要给按钮添加任何带颜色的背景属性。
• 实现联动按压动画：给透明Button配置视觉状态管理器，将Pressed、Released状态的动画触发和独立放置的TintedImage控件关联，还原经典原生按钮的按压体感：
  • 按下状态（Pressed）：触发图片缩放为原大小90%、着色透明度降低10%的过渡动画，单段时长100ms
  • 抬起状态（Released）：将图片的缩放、透明度平滑恢复到默认值，单段时长150ms
• 对齐布局关系：将TintedImage的中心点和透明Button的中心点完全对齐，避免按压动画出现视觉错位。

注意事项 #

• 不要为了实现反馈给Button添加半透明蒙层，这类蒙层会遮挡底层TintedImage的着色渲染效果，破坏你通过Nuget扩展实现的动态图片颜色修改能力。
• 不需要将TintedImage嵌套到Button的Content区域内，避免打乱当前基于RelativeLayout的位置约束逻辑。

内容的提问来源于stack exchange，提问作者Stefano APP