Question

我一直在网站上看到这种模式，在这些网站上，用户在沿着路径的点之间拖动，当它们拖放时会拖动到最终触发和事件。

以下是

的一个例子

http://aaa.thehitmansbodyguard.movie（您必须通过动议才能到达问题部分，this}

这个方法叫做什么，是否有框架可以做到这一点？

是另一个例子

http://www.sevenhillswholefoods.com/experience/#/（当你“开始旅程”时，你必须“拖放”来导航拖放效果，尽管不完全是我正在寻找的效果是什么样的

这是另一个控制视频的示例

http://www.resteravectoi.com（NSFW）

使用拖放控制视频播放

这是另一个当拖放时更改幻灯片

http://2017.makemepulse.com

Answer 1

在研究和挖掘之后，我觉得我发现到目前为止似乎已经找到了一些东西。

https://codepen.io/MAW/pen/aOzeNR

var D = document.createElement('div');
TweenMax.set('svg',{overflow:"visible"})
TweenMax.set('.knob',{x:10,y:80})

var tl = new TimelineMax({paused:true})
.from("#path2",1,{drawSVG:"0%",stroke:'orange',ease:Linear.easeNone})
.to('.knob',1,{bezier:{type:"quadratic",values:[{x:10,y:80},{x:150,y:0},{x:300,y:80}]},ease:Linear.easeNone},0);

Draggable.create(D,{trigger:".knob",
type:'x',
throwProps:true,
bounds:{minX:0,maxX:300},
onDrag:Update,
onThrowUpdate:Update});   
function Update(){tl.progress(Math.abs(this.x/300))};

TweenMax.to('#path1',0.5,{strokeDashoffset:-10,repeat:-1,ease:Linear.easeNone})

使用GSAP框架。我不确定我在问题中引用的示例是否正在使用此框架，所以如果其他人知道他们是否/如何使用框架让我知道

拖放尾随路径

1 个答案: