交互式拖动比赛

下载代码

html

css

分享到微信朋友圈

html

css

JavaScript

var animData = {
		wrapper: document.querySelector('.bm_container'),
		animType: 'svg',
		loop: true,
		prerender: true,
		autoplay: true,
		path: '//www.jq22.com/gxwj/car_driving_seg.json'
	};

var anim = bodymovin.loadAnimation(animData);
anim.addEventListener('DOMLoaded',startAnimation);
anim.setSpeed(1);
bodymovin.setSubframeRendering(false);

var dragSVG = document.querySelector('.dragSVG'), 
    dragger = document.querySelector('.dragger'),
    animationWindow = document.querySelector('.bm_container'),
    dragMaxX = 444,
    maxRunSpeed = 2,
    minRunSpeed = 0.05,
    runSpeed,
    dragPercent,
    segment04 = false;
    isChanging = false;
    goingFast = false;

animationWindow.appendChild(dragSVG)

Draggable.create(dragger, {
 type:'x',
 bounds:{minX:0, maxX:dragMaxX},
 onDrag
    :onDrag
})

function onDrag(){
    dragPercent = dragger._gsTransform.x/dragMaxX;
    runSpeed = dragPercent * maxRunSpeed + minRunSpeed;
    anim.setSpeed(runSpeed); 
}

TweenMax.set(dragger, {
 x:dragMaxX/2,
 //y:510,
 onComplete:onDrag
})

function changeComplete(){
    isChanging = false;
    anim.removeEventListener('loopComplete',changeComplete);
    console.log(changeComplete);
}

window.onload = function() {
    window.requestAnimationFrame(loop);    
};

function loop() {

window.requestAnimationFrame(loop);
        console.log(runSpeed);    
    if((runSpeed > 2) && (segment04 === false)){
        console.log("FAST SEGMENT");
        segment04 = true;
        goFast();

}
    
        if((runSpeed < 2) && (segment04 === true)){
        console.log("SLOW SEGMENT");
        segment04 = false;
        goSlow();

}
}

function startAnimation(){
    anim.playSegments([[0,20]],true);
}

粒子时间文字 hover canvas 3d 游戏音乐火焰水波轮播图鼠标跟随动画 css 加载动画导航菜单按钮滑块 tab 弹出层统计图 svg