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);