如图,随着手指滑动,动画同时进行,而且可以回滚,这样的动画要怎么做?
当然是推荐绿袜子家族的动画插件了!
https://greensock.com/scrolltrigger
TweenMax TweenLite 在 GSAP 3.0 都合并了, 本质说的就是 GSAP 这个东西。对,它现在自带一个 scrollTrigger 插件啦。
demo: https://codepen.io/motionharvest/pen/WNQYJyM
Showcases: https://codepen.io/collection/DkvGzg
8 回答4.6k 阅读✓ 已解决
6 回答3.4k 阅读✓ 已解决
6 回答2.3k 阅读
5 回答6.3k 阅读✓ 已解决
3 回答2.4k 阅读✓ 已解决
3 回答1.4k 阅读✓ 已解决
3 回答2.1k 阅读✓ 已解决
额,很明显这是一个‘一镜到底’的timeline动画。你可以将当前滚动距离转换为整个动画的进度。结合tweenmax的timeline动画。例如,你的场景是10个屏幕,整个滚动距离是10screenHeight,整个时间动画从0-》1。那么当前的进度就是scrollTop/10screenHeight。然后回滚当然也是动画的一部分。
你可以使用这个canvas框架 http://tinyjs.net/ 我们使用过,感觉不错
具体的实现思路,你可以搜索一镜到底,随便找了个https://segmentfault.com/a/11...