html5加速度源码,HTML5模拟球体加速度运动

JavaScript

语言：

JaveScriptBabelCoffeeScript

确定

var xmlns = "http://www.w3.org/2000/svg",

xlinkns = "http://www.w3.org/1999/xlink",

select = function(s) {

return document.querySelector(s);

},

selectAll = function(s) {

return document.querySelectorAll(s);

},

shardPointPath = "M34.1,600 0,600 0,0 34.1,0 800,300z",

shardEndPath = "M34.1,300 0,300 0,300 34.1,300 800,300z",

shardStart = select('#shardStart')

TweenMax.set('svg', {

visibility: 'visible'

})

var mainTl = new TimelineMax({

repeat: -1

});

var wholeTl = new TimelineMax();

wholeTl.to('#whole', 1.3, {

x: -150,

ease: Sine.easeInOut

})

.to('#whole', 0.6, {

x: 1000,

ease: Expo.easeIn

})

.from('#mainLine', 0.6, {

attr: {

x2: 0

},

ease: Power3.easeIn

}, '-=0.7')

.to('#mainLine', 0.6, {

attr: {

x1: 800

},

ease: Power3.easeIn

}, '-=0.1')

.set('#greenBg', {

fill: '#F9F9F9',

x: -800

}, '-=0.5')

.to('#greenBg', 0.8, {

x: 0,

ease: Circ.easeOut

}, '-=0')

var ballTl = new TimelineMax();

ballTl.to('#ball', 1, {

attr: {

cx: 600

},

ease: Power3.easeIn

})

.to(shardStart, 1, {

x: -200,

ease: Power3.easeIn

}, '-=1')

.to(shardStart, 0.5, {

morphSVG: shardPointPath,

ease: Linear.easeNone

}, '-=0')

.to(shardStart, 0.3, {

morphSVG: shardEndPath,

ease: Linear.easeNone

}, '-=0')

mainTl.add(ballTl, 0);

mainTl.add(wholeTl, 0);