javascript - 无效的属性 Bezier 设置 ... 到缺少插件?gsap.registerPlugin()
问题描述
我正在尝试使用 Gsap 3 TweenLite 和 bezier 做一些基本动画,但我得到的是:
无效的属性 Bezier 设置为 {curviness: 2, autoRotate: true, values: Array(1)} 缺少插件?gsap.registerPlugin()
这是我的代码:
<img class="paper-plane" src="fusee.png" alt="">
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/ScrollMagic.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.1.1/gsap.min.js">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.1.1/CSSRulePlugin.min.js"></script>
<script>
const flightPath = {
curviness: 2,
autoRotate: true,
values: [{ x: 100, y: -20 }],
};
const tween = new TimelineLite();
tween.add(
TweenLite.to('.paper-plane', 1, {
Bezier: flightPath,
ease: Power1.easInOut
})
)
解决方案
有几个问题:
- 您正在加载已进行了相当多的现代化改造的 GSAP 3(好!)。大多数代码完全向后兼容,但 BezierPlugin 是一个例外,如迁移指南中所述:https ://greensock.com/3-migration#motion-path - 您现在应该使用 MotionPathPlugin。它功能更强大且易于使用。
- 您将其输入错误为“Bezier”(不应大写),但同样,Bezier 在 GSAP 3 中无效。请使用 MotionPathPlugin。
- 您的“值”数组中只有一个点。为什么?
- 您使用的旧语法没问题,但我强烈建议您更新到更短、更直观的 GSAP 3 语法。这一切都被简化为一个“gsap”对象(不再有 TweenLite、TweenMax、TimelineLite 和 TimelineMax)。您的代码可以缩短很多。缓动现在也是基于字符串的(更短)。我想你会非常喜欢新的语法。
它可能看起来像:
gsap.registerPlugin(MotionPathPlugin);
const tween = gsap.timeline();
tween.to(".paper-plane", {
duration: 1,
ease: "power1.inOut",
motionPath: {
path: [{x: 100, y: -20}], // you probably want more points here...or just use an SVG <path>!
curviness: 2,
autoRotate: true
}
});
不要忘记加载和注册 MotionPathPlugin。
涵盖所有更改的 GSAP 3 发行说明:https ://greensock.com/3-release-notes/
如果您仍需要帮助,我强烈建议您在https://greensock.com/forums的 GreenSock 论坛上发帖,并提供简化的测试用例(可能在 codepen 中)。我们很乐意提供帮助。
推荐阅读
- regex - 正则表达式 - 从 www.anything.com 中提取单词
- python - How to make predictions using a saved RandomForest model from Orange GUI
- pygame - 玩家不动
- python - 在 python 中的 Python 中创建函数时出错
- spring-mvc - 我如何在多个复选框上调用控制器类中的方法来更新spring mvc中的记录
- dart - NoSuchMethodError:方法 'ancestorStateOfType' 在 null 上被调用
- python-3.x - Python 值错误:无法将字符串转换为浮点数据帧(如何找到值的位置)
- laravel-5.6 - 尝试创建“添加类别”字段。未找到 Laravel 错误列:
- linux - 生成文件上的 grep
- angular - 在 Angular 应用程序中调用 location.back() 时视图加载很长时间