html5动画 向上运动,HTML5 GSAP 做引体向上体育运动的小O同学

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

},

OGroup = select('.OGroup'),

bigO = select('.bigO'),

OArmLDown = select('.OArmLDown'),

OArmRDown = select('.OArmRDown'),

OLegL = select('.OLegL'),

OLegR = select('.OLegR'),

OArmLUpArr = "358.5 170.54 324 167.5 340 128.5".split(' ').map(Number),

OArmRUpArr = "460 170.5 498.5 164.5 486 128.5".split(' ').map(Number),

OArmLDownArr = OArmLDown.getAttribute('points').split(' ').map(Number),

OArmRDownArr = OArmRDown.getAttribute('points').split(' ').map(Number),

OArmLTempArr = OArmLDownArr.slice(0),

OArmRTempArr = OArmRDownArr.slice(0)

/* CustomEase.create("shake", "M0,0 C0.48,0.182 0.451,0.951 0.5,1 0.528,1.028 0.554,0.968 0.57,0.968 0.586,0.968 0.606,1.028 0.626,1.028 0.654,1.028 0.634,0.97 0.664,0.97 0.692,0.97 0.679,1.022 0.708,1.024 0.728,1.024 0.719,0.96 0.736,0.972 0.74,0.974 0.753,1.022 0.79,1.026 0.805,1.027 0.822,0.979 0.839,0.978 0.86,0.986 0.869,1.02 0.896,1.024 0.912,1.026 0.931,0.98 0.948,0.976 0.976,0.968 0.999,1 1,1") */

TweenMax.set('svg', {

visibility: 'visible'

})

var mainTl = new TimelineMax()

var tl = new TimelineMax({

repeat: -1,

repeatDelay: 3,

onUpdate: onUpdate

}).timeScale(3);

tl.to(OArmLTempArr, 4, {

endArray: OArmLUpArr,

ease: Back.easeOut.config(1.5)

})

.to(OArmRTempArr, 4, {

endArray: OArmRUpArr,

ease: Back.easeOut.config(1.5)

}, '-=4')

.to(bigO, 4, {

y: '-=30',

ease: Back.easeOut.config(1.5)

}, '-=4')

.staggerTo([OLegL, OLegR], 4, {

// scaleY:1.2,

y: -30,

cycle: {

rotation: [-6, 6],

transformOrigin: ['100% 0%', '0% 0%']

},

ease: Back.easeOut.config(1.5)

}, 0, '-=4')

.to('#oBg', 4, {

attr: {

x: -7,

y: 16

},

ease: Back.easeOut.config(1.5)

}, '-=4')

.to(OGroup, 0.13, {

y: -2,

repeat: 40,

yoyo: true,

ease: Linear.easeNone

}, '-=2.3')

.to(bigO, 1, {

y: 0,

ease: Back.easeOut.config(1.5)

}, '+=0')

.to(OArmLTempArr, 1, {

endArray: OArmLDownArr,

ease: Back.easeOut.config(1.5)

}, '-=1')

.to(OArmRTempArr, 1, {

endArray: OArmRDownArr,

ease: Back.easeOut.config(1.5)

}, '-=1')

.to('#oBg', 1, {

attr: {

x: 8,

y: 0

},

ease: Back.easeOut.config(1.5)

}, '-=1')

.staggerTo([OLegL, OLegR], 1, {

y: 0,

ease: Back.easeOut.config(1.5)

}, 0, '-=1')

.staggerTo([OLegL, OLegR], 4, {

rotation: 0,

cycle: {

duration: [4, 7]

},

ease: Elastic.easeOut.config(2, .75)

}, 0, '-=1')

var patternTl = new TimelineMax({

repeat: -1,

yoyo: true

})

patternTl.staggerTo('#oBg *', 0.4, {

cycle: {

fillOpacity: [1, 0]

},

ease: Linear.easeNone

}, 0)

//patternTl.duration(tl.duration());

mainTl.add(tl, 0);

mainTl.add(patternTl, 0)

function onUpdate() {

OArmLDown.setAttribute('points', OArmLTempArr);

OArmRDown.setAttribute('points', OArmRTempArr);

//legR.setAttribute('points', legRDownArr);

}

//ScrubGSAPTimeline(tl);