2017-08-25 74 views
-1

我在网站上看到这种模式很多,用户在路径上的点之间拖动时会拖动拖放到路径末尾的触发器和事件中。拖放拖尾路径

这里是

http://aaa.thehitmansbodyguard.movie一个例子(你必须走走过场去的问题部分,在那里你会得到this

这是什么方法调用,是否有确实的框架这个?

是另一个例子是

http://www.sevenhillswholefoods.com/experience/#/(当你“展开旅程),你必须‘拖放’导航拖,虽然不完全是什么规范放置效果是我期待的效果对于

这里是控制视频

http://www.resteravectoi.com(NSFW)

使用拖放来控制视频播放另一个例子

这里是另外一个,拖时与研究和挖掘,我想我找到了,到目前为止,似乎是衣柜比赛后降的变化幻灯片

http://2017.makemepulse.com

+1

我不知道如果我明白你在问什么。但可能你正在寻找一个框架,与画布 – lumio

+0

@ lumio对不起,更新了这个问题,因为我认为我有正确的URL – Kendall

+1

因此,在你的截图,是在那里的行动呼吁?你需要点击一个答案并将其拖动一圈? – lumio

回答

0

确定。

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框架。我不确定在我的问题中引用的例子是否使用这个框架,所以如果其他人有任何想法,他/她们如何使用框架让我知道