Animation 时支持自定义贝塞尔曲线 timingFunction #785
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
zcfan
requested review from
churchill-zhang,
ilikethese,
ozonelmy,
siguangli and
zoomchan-cxj
as code owners
Codecov Report
@@ Coverage Diff @@
## master #785 +/- ##
=======================================
Coverage 61.35% 61.35%
=======================================
Files 29 29
Lines 1881 1881
=======================================
Hits 1154 1154
Misses 727 727 Continue to review full report at Codecov.
|
ozonelmy
reviewed
May 31, 2021
|
|
|
补充了 @hippy/react-web 的支持和文档，验证了 android 上的表现，辛苦 review 下 |
Timeline.1.mov补充 demo |
docs/hippy-react/best-practices.md
Outdated
| @@ -151,7 +151,7 @@ Animation支持的动画配置包括： | |||
| * “ease-in”：使用加速插值器，动画速度将随时间逐渐增加； | |||
| * “ease-out”：使用减速插值器，动画速度将随时间逐渐减小； | |||
| * “ease-in-out”：使用加减速插值器，动画速度前半段先随时间逐渐增加，后半段速度将逐渐减小； | |||
| * “ease_bezier”：暂不支持； | |||
| * “cubic-bezeir”：使用自定义贝塞尔曲线，与 [css transition-timing-function 的 cubic-bezier](https://developer.mozilla.org/en-US/docs/Web/CSS/transition-timing-function) 一致； | |||
docs/hippy-react/best-practices.md
Outdated
| @@ -151,7 +151,7 @@ Animation支持的动画配置包括： | |||
| * “ease-in”：使用加速插值器，动画速度将随时间逐渐增加； | |||
| * “ease-out”：使用减速插值器，动画速度将随时间逐渐减小； | |||
| * “ease-in-out”：使用加减速插值器，动画速度前半段先随时间逐渐增加，后半段速度将逐渐减小； | |||
| * “ease_bezier”：暂不支持； | |||
| * “cubic-bezeir”：使用自定义贝塞尔曲线，与 [css transition-timing-function 的 cubic-bezier](https://developer.mozilla.org/en-US/docs/Web/CSS/transition-timing-function) 一致； | |||
docs/hippy-react/modules.md
Outdated
| @@ -40,7 +40,7 @@ | |||
| * `ease-in`：使用加速插值器，动画速度将随时间逐渐增加； | |||
| * `ease-out`：使用减速插值器，动画速度将随时间逐渐减小； | |||
| * `ease-in-out`：使用加减速插值器，动画速度前半段先随时间逐渐增加，后半段速度将逐渐减小； | |||
| * `ease_bezier`：暂不支持； | |||
| * `cubic-bezeir`：使用自定义贝塞尔曲线，与 [css transition-timing-function 的 cubic-bezier](https://developer.mozilla.org/en-US/docs/Web/CSS/transition-timing-function) 一致； | |||
There was a problem hiding this comment.
cubic-bezeir 拼写错误，补充最低支持版本
siguangli
approved these changes
Aug 25, 2021
zoomchan-cxj
added a commit
that referenced
this pull request
Sep 10, 2021
Co-authored-by: Zoom Chan <[email protected]>
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
之前提过一个 issue，周末有空自己看了下 #632
这是个 prove of concept，仅对 iOS 做了简单的验证，效果如视频，Android 要晚些才有空检查实现是不是正确。
2021-05-30.4.27.15.mov
timingFunction 如下：
新属性叫 cubic-bezier 有两个考虑：
ease_bezier冲突，现有项目可能依赖之前的表现（话说之前的 ease_bezier 为什么用下划线，不和其他的 ease-in 之类的一致用中划线？有特别考虑还是单纯手滑打错了？😂）请初步评估一下接口设计是否合理，可行的话我再完善实现，补充缺失的 web 端