公司动态
QML 悬浮阴影:模拟卡片被抬起的物理感
目录演示效果演示代码关键逻辑解析悬浮参数对比小结工程下载悬浮阴影是卡片悬停效果里很经典的一种:鼠标放上去,卡片轻微上浮,底下的阴影同时变大、变淡、往下沉,像卡片真的被「抬起来」了。这个效果的关键在于阴影要和卡片联动——卡片动了,阴影也得跟着变,而且方向相反,才有物理感。这篇用两张卡片演示:一张蓝色、一张橙色,上浮和阴影的幅度略有差异,可以对比着看。核心代码只有一组悬停进入的动画和一组悬停离开的动画。演示效果涉及的技术要点:MouseArea监听悬停进入与离开ParallelAnimation同步卡片和阴影的多属性变化阴影层放在卡片下方,用视觉偏移实现反向运动回落时带轻微弹跳,更有手感阴影透明度与扩散幅度要控制得当以下演示代码来自qml_container/Demo_LiftShadow.qml,为便于阅读,只展示了关键代码。演示代码import QtQuick import QtQuick.Controls import QtQuick.Layouts FadeInAnimation { ColumnL