使用element.animate（）对曲线上的元素进行动画处理
[英]Animate element over a curve with element.animate()
问题描述
我需要为路径上的元素平移设置动画，如下所示：
现在，我正在使用requestAnimationFrame回调，该回调计算De Casteljau曲线上的位置，然后通过内联CSS translate3d()设置元素位置。
尽管效果很差，并且与CSS动画相比非常冗长，但这是可行的。
当仅在运行时知道目标时， Web动画似乎是对元素进行动画处理的一个很好的新选项，但是我找不到在起点和终点之间修改动画的任何内容。
是否可以使用element.animate()进行上述操作 ，或者它不比CSS动画更可自定义？
1 个解决方案
解决方案1
0 2017-01-13 09:15:10
使用Web Animation API，您可以使用motion-path属性：
更多信息和现场示例在这里：
http://danielcwilson.com/blog/2015/09/animations-part-5/
https://codepen.io/danwilson/post/css-motion-paths
https://webdesigner-webdeveloper.com/weblog/exploring-web-animations/
如何使用 Element.animate() 为带有负数的进度条设置动画
[英]How to animate a progress bar with negatives using Element.animate()
Raphael element.animate（…）-指定要在动画的每个步骤执行的回调
[英]Raphael element.animate(…) - Specify a callback to be executed at every step of animation
Element.animate() 如何转换为 CSS @keyframes？
[英]How does Element.animate() translate into CSS @keyframes?
尝试使用本机Element.animate方法，但无法添加关键帧百分比
[英]Trying the native Element.animate method, but cannot add keyframe percentages
element.animate，在动画结束后应用样式更改
[英]element.animate, applying style changes after the animation is finished
使用“Element.animate()”方法实现向下滑动 animation
[英]Implementing slide down animation with "Element.animate()" method
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
HTML4中的Element.animate（）
Element.animate（）以变量作为属性进行动画处理
如何使用 Element.animate() 为 slider 设置动画？
如何使用 Element.animate() 为带有负数的进度条设置动画
Raphael element.animate（…）-指定要在动画的每个步骤执行的回调
Element.animate() 如何转换为 CSS @keyframes？
尝试使用本机Element.animate方法，但无法添加关键帧百分比
使用 Element.animate() 更改背景颜色
element.animate，在动画结束后应用样式更改
使用“Element.animate()”方法实现向下滑动 animation
相关标签