javascript - 使用 ScrollMagic 和 TimelineMax 控制 Lottie 动画
问题描述
我正在尝试使用 ScrollMagic 来控制移动 Lottie 动画播放头的 TimelineMax。
因此,当用户滚动时,动画会根据滚动的速度和方向播放。我离我很近,需要一点帮助才能将效果带回家。
首先,我包括我的图书馆
<script src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.5.9/lottie.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TweenMax.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/ScrollMagic.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/plugins/animation.gsap.js"></script>
然后...
// init scrollmagic
var controller = new ScrollMagic.Controller();
现在,动画设置...
// Manage Animation
var animation = bodymovin.loadAnimation({
container: document.getElementById('lottie'), // Required
path: '/static/animations/animation.json', // Required
renderer: 'svg', // Required
loop: false, // Optional
autoplay: false, // Optional
name: "Welcome to Awesomeness", // Name for future reference. Optional.
});
这就是我苦苦挣扎的地方:
// Setup Timeline
var lottieControl = new TimelineMax({ repeat: -1, yoyo: true }); // <-- don't loop and let the timeline go back and forth
lottieControl.to({ frame:0 }, 1, { // <-- is this right? I'm telling the timeline to start at frame 0
onUpdate:function(){
animation.goToAndStop(Math.round(this.target.frame), true) // <-- move the playback head of the animation to the target frame that has been rounded and use frames not time (true)
},
ease:Linear.easeNone
})
最后,把这一切重新组合在一起......
// Attach to scroll
var lottieScene = new ScrollMagic.Scene({
duration: '80%',
offset: 1
})
.setPin("#header-scroll")
.setTween(lottieControl)
.addTo(controller);
对于我的一生,我看不出我是否goToAndStop
正确使用了该方法。谢谢你的时间。
解决方案
经过数小时的测试,我找到了答案。我看错东西了。我需要将时间线进度与要转到的框架联系起来。在本例中,有 300 帧,因此乘以动画中的帧数。
这是修改后的代码:
<script src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.5.9/lottie.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TweenMax.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/ScrollMagic.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/plugins/animation.gsap.js"></script>
<script>
// init scrollmagic
var controller = new ScrollMagic.Controller();
// Manage Animation
var animation = bodymovin.loadAnimation({
container: document.getElementById('lottie'), // Required
path: '/static/animations/scroll_animation.json', // Required
renderer: 'svg', // Required
loop: false, // Optional
autoplay: false, // Optional
name: "Welcome to Awesomeness",
});
// Setup Timeline
var tl = new TimelineMax();
tl.to({frame:0}, 1, {
frame: animation.totalFrames-1,
onUpdate:function(){
animation.goToAndStop((Math.round(this.progress() * 300)), true)
},
ease: Linear.easeNone
})
// Attach to scroll
var lottieScene = new ScrollMagic.Scene({
duration: '100%',
offset: 1
})
.setPin("#header-scroll")
.setTween(tl)
.addTo(controller);
</script>
推荐阅读
- git - GIT:跨多台机器工作时的分歧分支。`rebase false`、`rebase true` 和 `ff only` 选项有什么作用?
- outlook - Outlook Web 插件中的访问任务 (ToDo) 对象
- ruby - “初始化中的块:未初始化的常量”的红宝石错误,但与 irb 一起运行良好
- jquery - 如何在 Parcel 中使用 jQuery UI
- plot - 如何获得 RSI 峰值的绘图线?最后 x 个小节中的最高峰
- android - 尝试使用 glide 和 volley 从 URL 获取图像,得到错误 onResponse 方法
- node.js - 通过从流中添加文件来创建 .zip 存档
- r - R脚本,如何对因子值进行分组和最大值?
- c++ - C ++将模板类函数传递给另一个函数后无法调用
- reactjs - React 功能组件 - 将处理程序绑定到数组