2017-08-25 190 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框架。我不確定在我的問題中引用的例子是否使用這個框架,所以如果其他人有任何想法,他/她們如何使用框架讓我知道