- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在尝试使用 ScrollMagic 来控制 TimelineMax 来移动 Lottie 动画的播放头。
因此,当用户滚动时,动画会根据滚动的速度和方向播放。我已经很接近了,需要一点帮助才能将效果带回家。
首先,我包括我的库
<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>
关于javascript - 使用 ScrollMagic 和 TimelineMax 控制 Lottie 动画,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58549067/
我想创建一个没有任何外部依赖的动画网络组件。 直到现在,当我使用 lottie 时,我提供了一个指向 lottie JSON 的路径 lottie.loadAnimation({ [...]
我无法更改我在 flutter 中设置的 lottie 动画的属性。 (我特别想改变颜色。) 根据包 README,我知道我可以使用 ValueDelegate 类来执行此操作。 README //F
该文档同时具有事件和事件监听器。我可以让 EventListeners 触发,但 Event 没有足够的文档让我开始。有什么区别以及如何使用?谢谢你。 https://github.com/airbn
我使用lottie向网页添加了演示动画,但播放速度太快。如何达到正常速度?下面的链接是一个有问题的动画。 问题动画链接:https://saybgm.github.io/Lottie_example/
您可以在 www.dynamicpoa.com 中查看正在发生的事情 只需滚动,您就会看到一切正常,除了标题上方的 SVG 动画 (Lottie)。在两个页面中(“/”和“/cursos”)。 任何人
我正在使用 Lottie 2.1.3、XCode 9 和 IOS 11。 当我试图获得这样的动画时 var loadingView = LOTAnimationView(name: "preloade
我正在开发适用于 iOS 和 Android 的应用程序。启动画面有一个 JSON 动画。在 iOS 中,动画完美运行,但在 Android 中,相同的动画运行有滞后。有人体验过吗? 注意事项:动画没
我有一个问题要问那些有使用 lottie json 文件经验的人。我使用 lottie 的经验不多,所以我想我可能缺少一些明显的知识。当我将动画渲染到 View 中时,动画对象会像那样放置在 View
我正在使用 Lottie 文件来制作动画。它没有按预期加载。应该是这样的http://www.lottiefiles.com/48-progress-bar 当前状态:https://www.drop
我的设计师给了我一个 Lottie (json) 文件,它包含文本。 其他图片显示正确,但文字显示不正确。它必须在中心但在右侧。 这是 GitHub issue .一种解决方案是将文本更改为形状并再次
我正在尝试使用 lottie 进行简单的加载。我找到了这个动画:https://lottiefiles.com/18563-cooking#_= _ 它存储在 SRC/Main/res/raw
我试图在某些帧之间循环动画,但我根本看不到动画,如果我删除 LottieCompositionFactory....addListener 代码并只使用 xml 文件,动画确实会显示,但我想在某些帧之
我想知道如何在 Lottie 动画中动态输入文本。一切都指向 TextDelegate。 我确实有一个动画,当我使用文本委托(delegate)时,文本的位置在 Y 轴上偏移 50-60 像素,在 X
我必须在 android 中使用 lottie 动画作为启动画面。我已经使用 match parent 作为宽度和高度。但它向我展示了屏幕边缘的一些填充,如附图所示。如果我使用 scaletype 作
使用 Lottie Android库,是否可以让用户与正在播放的动画元素进行交互? 比如,在动画中有一个按钮(不是原生按钮)并对点击它使用react? 最佳答案 json 文件被解释并将 SVG 输出
我正在使用 Glide 将图像加载到我的 Activity 中(在回收站 View 内),并且我想使用 Lottie 加载动画文件作为占位符。 所以这是我的 Glide 代码: Glide.with(
我正在创建一个底部导航,图标需要是一个动画 Lottie 文件。 似乎不可能为标签编写绑定(bind)适配器。是否有任何解决方案可以让我们在底部导航中拥有乐透动画? ** 最佳答案 首先创建一个自定义
通过赋予它自己的观点,我已经成功地将 Lottie 应用到我的程序中。虽然一旦被调用,动画只播放一次。我将如何使动画循环?谢谢你。 LottieView(与 Lottie 一起查看。) import
为了实现标题中所述的目标,我有两个单独的问题。 第一个问题是:com.airbnb.lottie.LottieAnimationView 的可见性状态是什么?默认情况下在 XML 中?我在我的 XML
我找到了 Lottie Play/Pause button ,但我不知道如何在我的音频播放器暂停时显示播放状态,在播放器播放时显示暂停状态并在其中重复播放均衡器动画(请参阅乐透预览)。我已阅读文档,但
我是一名优秀的程序员,十分优秀!