Greensock 动画平台 - 是否可以反转嵌套时间线?
Greensock Animation Platform - is it possible to reverse nested timelines?
是否可以在 GSAP 中反转主时间线?我知道你可以反转没有嵌套的时间线。
代码如下:
// hide copy content divs
const hideCopyContentDivsTl = new TimelineMax()
hideCopyContentDivsTl.to(copyContentDivs, 1, {
height: 0,
width: 0,
autoAlpha: 0
})
// shrink copy wrapper div
const shrinkCopyWrapperTL = new TimelineMax()
shrinkCopyWrapperTL.to(copyWrapperDiv, 1, {
width: '2%',
height: '4%'
})
// fade remove bg and change to white
const fadeLargeBgImgTl = new TimelineMax()
fadeLargeBgImgTl.to(largeImage, 1, {
backgroundColor: "#fff"
})
// the master timeline to manage the parts
const masterTimeline = new TimelineMax({paused: true})
masterTimeline.add(hideCopyContentDivsTl)
.add(shrinkCopyWrapperTL)
.add(fadeLargeBgImgTl)
// assume that there is a mechanism to change the state of playVideo between true and false
if (this.state.playVideo === false) {
console.log("should play: ", masterTimeline)
masterTimeline.play()
} else {
console.log("should reverse: ", masterTimeline)
masterTimeline.reverse()
}
我可以让它向前播放,只是不能向后播放。我是否需要告诉浏览器在时间轴中从哪里开始,以便它可以反向播放?
问题出在我的代码上,而不是 GSAP。每次点击都会创建新的时间线。它如何反转之前没有参考的东西?解决方案是在点击事件之外创建时间线,然后根据状态向前或向后播放动画。
是否可以在 GSAP 中反转主时间线?我知道你可以反转没有嵌套的时间线。
代码如下:
// hide copy content divs
const hideCopyContentDivsTl = new TimelineMax()
hideCopyContentDivsTl.to(copyContentDivs, 1, {
height: 0,
width: 0,
autoAlpha: 0
})
// shrink copy wrapper div
const shrinkCopyWrapperTL = new TimelineMax()
shrinkCopyWrapperTL.to(copyWrapperDiv, 1, {
width: '2%',
height: '4%'
})
// fade remove bg and change to white
const fadeLargeBgImgTl = new TimelineMax()
fadeLargeBgImgTl.to(largeImage, 1, {
backgroundColor: "#fff"
})
// the master timeline to manage the parts
const masterTimeline = new TimelineMax({paused: true})
masterTimeline.add(hideCopyContentDivsTl)
.add(shrinkCopyWrapperTL)
.add(fadeLargeBgImgTl)
// assume that there is a mechanism to change the state of playVideo between true and false
if (this.state.playVideo === false) {
console.log("should play: ", masterTimeline)
masterTimeline.play()
} else {
console.log("should reverse: ", masterTimeline)
masterTimeline.reverse()
}
我可以让它向前播放,只是不能向后播放。我是否需要告诉浏览器在时间轴中从哪里开始,以便它可以反向播放?
问题出在我的代码上,而不是 GSAP。每次点击都会创建新的时间线。它如何反转之前没有参考的东西?解决方案是在点击事件之外创建时间线,然后根据状态向前或向后播放动画。