Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

perf: adjust popup animation time fn #106

Merged
merged 2 commits into from
Jan 6, 2022
Merged

perf: adjust popup animation time fn #106

merged 2 commits into from
Jan 6, 2022

Conversation

uyarn
Copy link
Collaborator

@uyarn uyarn commented Jan 6, 2022

主要改动:优化popup的transition动画

展开动画改动:

popup的动画实际上由透明度和高度动画组成,此前透明度入场动画曲线使用的是cubic-bezier(.38, 0, .24, 1)
效果可见 https://tdesign.tencent.com/design/motion

image

将这个动画延长到2s 可以看到效果透明度变化在前段较缓后段加速的情况
select为例

animation1

tooltips为例

Jan-06-2022 15-18-24

由于曲线前段缓慢的透明度变化,导致了一定程度的视觉卡顿;
调整展开时间曲线为linear效果,线性时间曲线 同样延长至2s观察效果;

select为例

select

tooltips为例

tooltip

调整后正常速度效果

select为例

select 2

tooltips为例

tooltip 2

收起动画改动:

收起动画此前存在的问题是收起阴影效果拖拉 时间曲线为cubic-bezier(0.38, 0, 0.24, 1)
将这个动画延长到2s 可以明显看到后半段box-shadow仍然较重

select为例

select collpase previous

调整时间曲线为cubic-bezier(0,0,.32,1) 同样将动画延长到2s看效果

select为例

select collpase optimize

调整后正常速度效果

select为例

select collpase

其他

typo error fix. placment-> placement

@xiaosansiji xiaosansiji merged commit 40e500f into Tencent:develop Jan 6, 2022
@richerfu
Copy link
Contributor

richerfu commented Jan 6, 2022

虽然已经合并了。但是我仍然觉得这个收回的效果有点冗余,感觉做的干净利落一点比较符合个人的习惯 @uyarn
这里的动画,真正使用的时候 应该是不太关注的,站在一个用户的角度来看的话,应该是这个弹窗是否在尽量短的时间里展开和隐藏

@Wen1kang
Copy link
Collaborator

@southorange1228 你好呀,我们再进行了优化,因为之前的将easing out的曲线修改为cubic-bezier(0,0,.15,1),之前收起的效果可能还是太慢对用户造成打扰,我们再针对曲线修改了下,下个版本可以看到,会比较干净利落。

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

5 participants