How to use Animation method in Cypress

...383        },384        restore: {385          conditions: function() {386            var387              animation = module.get.currentAnimation()388            ;389            if(animation) {390              $module391                .removeClass(animation)392              ;393              module.verbose('Removing animation class', module.cache);394            }395            module.remove.duration();396          }397        },398        add: {399          failSafe: function() {400            var401              duration = module.get.duration()...

...85    function add(collection, index, options) {86        var model = collection._model;87        var animations = model._runtime.animations;88        var animation = animations[index];89        var scheduledAnimation = new ModelAnimation(options, model, animation);90        collection._scheduledAnimations.push(scheduledAnimation);91        collection.animationAdded.raiseEvent(model, scheduledAnimation);92        return scheduledAnimation;93    }9495    /**96     * Creates and adds an animation with the specified initial properties to the collection.97     * <p>98     * This raises the {@link ModelAnimationCollection#animationAdded} event so, for example, a UI can stay in sync.99     * </p>100     *101     * @param {Object} options Object with the following properties:102     * @param {String} [options.name] The glTF animation name that identifies the animation. Must be defined if <code>options.id</code> is <code>undefined</code>.103     * @param {Number} [options.index] The glTF animation index that identifies the animation. Must be defined if <code>options.name</code> is <code>undefined</code>.
...

...7import { AnimationClip } from '../../../../src/animation/AnimationClip';8import { NumberKeyframeTrack } from '../../../../src/animation/tracks/NumberKeyframeTrack';9import { Object3D } from '../../../../src/core/Object3D';10import { LoopOnce, LoopRepeat, LoopPingPong } from '../../../../src/constants';11function createAnimation() {12	var root = new Object3D();13	var mixer = new AnimationMixer( root );14	var track = new NumberKeyframeTrack( ".rotation[x]", [ 0, 1000 ], [ 0, 360 ] );15	var clip = new AnimationClip( "clip1", 1000, [ track ] );16	var animationAction = mixer.clipAction( clip );17	return {18		root: root,19		mixer: mixer,20		track: track,21		clip: clip,22		animationAction: animationAction23	};24}25function createTwoAnimations() {26	var root = new Object3D();27	var mixer = new AnimationMixer( root );28	var track = new NumberKeyframeTrack( ".rotation[x]", [ 0, 1000 ], [ 0, 360 ] );29	var clip = new AnimationClip( "clip1", 1000, [ track ] );30	var animationAction = mixer.clipAction( clip );31	var track2 = new NumberKeyframeTrack( ".rotation[y]", [ 0, 1000 ], [ 0, 360 ] );32	var clip2 = new AnimationClip( "clip2", 1000, [ track ] );33	var animationAction2 = mixer.clipAction( clip2 );34	return {35		root: root,36		mixer: mixer,37		track: track,38		clip: clip,39		animationAction: animationAction,40		track2: track2,41		clip2: clip2,42		animationAction2: animationAction243	};44}45export default QUnit.module( 'Animation', () => {46	QUnit.module( 'AnimationAction', () => {47		// INSTANCING48		QUnit.test( "Instancing", ( assert ) => {49			var mixer = new AnimationMixer();50			var clip = new AnimationClip( "nonname", - 1, [] );51			var animationAction = new AnimationAction( mixer, clip );52			assert.ok( animationAction, "animationAction instanciated" );53		} );54		// PUBLIC STUFF55		QUnit.test( "play", ( assert ) => {56			var { mixer, animationAction } = createAnimation();57			var animationAction2 = animationAction.play();58			assert.equal( animationAction, animationAction2, "AnimationAction.play can be chained." );59			var UserException = function () {60				this.message = "AnimationMixer must activate AnimationAction on play.";61			};62			mixer._activateAction = function ( action ) {63				if ( action === animationAction ) {64					throw new UserException();65				}66			};67			assert.throws( () => {68				animationAction.play();69			}, new UserException() );70		} );71		QUnit.test( "stop", ( assert ) => {72			var { mixer, animationAction } = createAnimation();73			var animationAction2 = animationAction.stop();74			assert.equal( animationAction, animationAction2, "AnimationAction.stop can be chained." );75			var UserException = function () {76				this.message = "AnimationMixer must deactivate AnimationAction on stop.";77			};78			mixer._deactivateAction = function ( action ) {79				if ( action === animationAction ) {80					throw new UserException();81				}82			};83			assert.throws( () => {84				animationAction.stop();85			}, new UserException() );86		} );87		QUnit.test( "reset", ( assert ) => {88			var { mixer, animationAction } = createAnimation();89			var animationAction2 = animationAction.stop();90			assert.equal( animationAction, animationAction2, "AnimationAction.reset can be chained." );91			assert.equal( animationAction2.paused, false, "AnimationAction.reset() sets paused false" );92			assert.equal( animationAction2.enabled, true, "AnimationAction.reset() sets enabled true" );93			assert.equal( animationAction2.time, 0, "AnimationAction.reset() resets time." );94			assert.equal( animationAction2._loopCount, - 1, "AnimationAction.reset() resets loopcount." );95			assert.equal( animationAction2._startTime, null, "AnimationAction.reset() removes starttime." );96		} );97		QUnit.test( "isRunning", ( assert ) => {98			var { mixer, animationAction } = createAnimation();99			assert.notOk( animationAction.isRunning(), "When an animation is just made, it is not running." );100			animationAction.play();101			assert.ok( animationAction.isRunning(), "When an animation is started, it is running." );102			animationAction.stop();103			assert.notOk( animationAction.isRunning(), "When an animation is stopped, it is not running." );104			animationAction.play();105			animationAction.paused = true;106			assert.notOk( animationAction.isRunning(), "When an animation is paused, it is not running." );107			animationAction.paused = false;108			animationAction.enabled = false;109			assert.notOk( animationAction.isRunning(), "When an animation is not enabled, it is not running." );110			animationAction.enabled = true;111			assert.ok( animationAction.isRunning(), "When an animation is enabled, it is running." );112		} );113		QUnit.test( "isScheduled", ( assert ) => {114			var { mixer, animationAction } = createAnimation();115			assert.notOk( animationAction.isScheduled(), "When an animation is just made, it is not scheduled." );116			animationAction.play();117			assert.ok( animationAction.isScheduled(), "When an animation is started, it is scheduled." );118			mixer.update( 1 );119			assert.ok( animationAction.isScheduled(), "When an animation is updated, it is scheduled." );120			animationAction.stop();121			assert.notOk( animationAction.isScheduled(), "When an animation is stopped, it isn't scheduled anymore." );122		} );123		QUnit.test( "startAt", ( assert ) => {124			var { mixer, animationAction } = createAnimation();125			animationAction.startAt( 2 );126			animationAction.play();127			assert.notOk( animationAction.isRunning(), "When an animation is started at a specific time, it is not running." );128			assert.ok( animationAction.isScheduled(), "When an animation is started at a specific time, it is scheduled." );129			mixer.update( 1 );130			assert.notOk( animationAction.isRunning(), "When an animation is started at a specific time and the interval is not passed, it is not running." );131			assert.ok( animationAction.isScheduled(), "When an animation is started at a specific time and the interval is not passed, it is scheduled." );132			mixer.update( 1 );133			assert.ok( animationAction.isRunning(), "When an animation is started at a specific time and the interval is passed, it is running." );134			assert.ok( animationAction.isScheduled(), "When an animation is started at a specific time and the interval is passed, it is scheduled." );135			animationAction.stop();136			assert.notOk( animationAction.isRunning(), "When an animation is stopped, it is not running." );137			assert.notOk( animationAction.isScheduled(), "When an animation is stopped, it is not scheduled." );138		} );139		QUnit.test( "setLoop LoopOnce", ( assert ) => {140			var { mixer, animationAction } = createAnimation();141			animationAction.setLoop( LoopOnce );142			animationAction.play();143			assert.ok( animationAction.isRunning(), "When an animation is started, it is running." );144			mixer.update( 500 );145			assert.ok( animationAction.isRunning(), "When an animation is in the first loop, it is running." );146			mixer.update( 500 );147			assert.notOk( animationAction.isRunning(), "When an animation is ended, it is not running." );148			mixer.update( 500 );149			assert.notOk( animationAction.isRunning(), "When an animation is ended, it is not running." );150		} );151		QUnit.test( "setLoop LoopRepeat", ( assert ) => {152			var { root, mixer, animationAction } = createAnimation();153			animationAction.setLoop( LoopRepeat, 3 );154			animationAction.play();155			assert.ok( animationAction.isRunning(), "When an animation is started, it is running." );156			mixer.update( 750 );157			assert.equal( root.rotation.x, 270, "When an animation is 3/4 in the first loop, it has changed to 3/4 when LoopRepeat." );158			assert.ok( animationAction.isRunning(), "When an animation is in the first loop, it is running." );159			mixer.update( 1000 );160			assert.equal( root.rotation.x, 270, "When an animation is 3/4 in the second loop, it has changed to 3/4 when LoopRepeat." );161			assert.ok( animationAction.isRunning(), "When an animation is in second loop when in looprepeat 3 times, it is running." );162			mixer.update( 1000 );163			assert.equal( root.rotation.x, 270, "When an animation is 3/4 in the third loop, it has changed to 3/4 when LoopRepeat." );164			assert.ok( animationAction.isRunning(), "When an animation is in third loop when in looprepeat 3 times, it is running." );165			mixer.update( 1000 );166			assert.equal( root.rotation.x, 0, "When an animation ended his third loop when in looprepeat 3 times, it stays on the end result." );167			assert.notOk( animationAction.isRunning(), "When an animation ended his third loop when in looprepeat 3 times, it stays not running anymore." );168		} );169		QUnit.test( "setLoop LoopPingPong", ( assert ) => {170			var { root, mixer, animationAction } = createAnimation();171			animationAction.setLoop( LoopPingPong, 3 );172			animationAction.play();173			assert.ok( animationAction.isRunning(), "When an animation is started, it is running." );174			mixer.update( 750 );175			assert.equal( root.rotation.x, 270, "When an animation is 3/4 in the first loop, it has changed to 3/4 when LoopPingPong." );176			assert.ok( animationAction.isRunning(), "When an animation is in the first loop, it is running." );177			mixer.update( 1000 );178			assert.equal( root.rotation.x, 90, "When an animation is 3/4 in the second loop, it has changed to 1/4 when LoopPingPong." );179			assert.ok( animationAction.isRunning(), "When an animation is in second loop when in looprepeat 3 times, it is running." );180			mixer.update( 1000 );181			assert.equal( root.rotation.x, 270, "When an animation is 3/4 in the third loop, it has changed to 3/4 when LoopPingPong." );182			assert.ok( animationAction.isRunning(), "When an animation is in third loop when in looprepeat 3 times, it is running." );183			mixer.update( 1000 );184			assert.equal( root.rotation.x, 0, "When an animation ended his fourth loop when in looprepeat 3 times, it stays on the end result." );185			assert.notOk( animationAction.isRunning(), "When an animation ended his fourth loop when in looprepeat 3 times, it stays not running anymore." );186		} );187		QUnit.test( "setEffectiveWeight", ( assert ) => {188			var { animationAction } = createAnimation();189			assert.equal( animationAction.getEffectiveWeight(), 1, "When an animation is created, EffectiveWeight is 1." );190			animationAction.setEffectiveWeight( 0.3 );191			assert.equal( animationAction.getEffectiveWeight(), 0.3, "When EffectiveWeight is set to 0.3 , EffectiveWeight is 0.3." );192			var { animationAction } = createAnimation();193			assert.equal( animationAction.getEffectiveWeight(), 1, "When an animation is created, EffectiveWeight is 1." );194			animationAction.enabled = false;195			animationAction.setEffectiveWeight( 0.3 );196			assert.equal( animationAction.getEffectiveWeight(), 0, "When EffectiveWeight is set to 0.3 when disabled , EffectiveWeight is 0." );197			var { root, mixer, animationAction } = createAnimation();198			animationAction.setEffectiveWeight( 0.5 );199			animationAction.play();200			mixer.update( 500 );201			assert.equal( root.rotation.x, 90, "When an animation has weight 0.5 and runs half through the animation, it has changed to 1/4." );202			mixer.update( 1000 );203			assert.equal( root.rotation.x, 90, "When an animation has weight 0.5 and runs one and half through the animation, it has changed to 1/4." );204		} );205		QUnit.test( "getEffectiveWeight", ( assert ) => {206			var { animationAction } = createAnimation();207			assert.equal( animationAction.getEffectiveWeight(), 1, "When an animation is created, EffectiveWeight is 1." );208			animationAction.setEffectiveWeight( 0.3 );209			assert.equal( animationAction.getEffectiveWeight(), 0.3, "When EffectiveWeight is set to 0.3 , EffectiveWeight is 0.3." );210			var { animationAction } = createAnimation();211			assert.equal( animationAction.getEffectiveWeight(), 1, "When an animation is created, EffectiveWeight is 1." );212			animationAction.enabled = false;213			animationAction.setEffectiveWeight( 0.3 );214			assert.equal( animationAction.getEffectiveWeight(), 0, "When EffectiveWeight is set to 0.3 when disabled , EffectiveWeight is 0." );215		} );216		QUnit.test( "fadeIn", ( assert ) => {217			var { mixer, animationAction } = createAnimation();218			animationAction.fadeIn( 1000 );219			animationAction.play();220			assert.equal( animationAction.getEffectiveWeight(), 1, "When an animation fadeIn is started, EffectiveWeight is 1." );221			mixer.update( 250 );222			assert.equal( animationAction.getEffectiveWeight(), 0.25, "When an animation fadeIn happened 1/4, EffectiveWeight is 0.25." );223			mixer.update( 250 );224			assert.equal( animationAction.getEffectiveWeight(), 0.5, "When an animation fadeIn is halfway , EffectiveWeight is 0.5." );225			mixer.update( 250 );226			assert.equal( animationAction.getEffectiveWeight(), 0.75, "When an animation fadeIn is halfway , EffectiveWeight is 0.75." );227			mixer.update( 500 );228			assert.equal( animationAction.getEffectiveWeight(), 1, "When an animation fadeIn is ended , EffectiveWeight is 1." );229		} );230		QUnit.test( "fadeOut", ( assert ) => {231			var { mixer, animationAction } = createAnimation();232			animationAction.fadeOut( 1000 );233			animationAction.play();234			assert.equal( animationAction.getEffectiveWeight(), 1, "When an animation fadeOut is started, EffectiveWeight is 1." );235			mixer.update( 250 );236			assert.equal( animationAction.getEffectiveWeight(), 0.75, "When an animation fadeOut happened 1/4, EffectiveWeight is 0.75." );237			mixer.update( 250 );238			assert.equal( animationAction.getEffectiveWeight(), 0.5, "When an animation fadeOut is halfway , EffectiveWeight is 0.5." );239			mixer.update( 250 );240			assert.equal( animationAction.getEffectiveWeight(), 0.25, "When an animation fadeOut is happened 3/4 , EffectiveWeight is 0.25." );241			mixer.update( 500 );242			assert.equal( animationAction.getEffectiveWeight(), 0, "When an animation fadeOut is ended , EffectiveWeight is 0." );243		} );244		QUnit.test( "crossFadeFrom", ( assert ) => {245			var { mixer, animationAction, animationAction2 } = createTwoAnimations();246			animationAction.crossFadeFrom( animationAction2, 1000, false );247			animationAction.play();248			animationAction2.play();249			assert.equal( animationAction.getEffectiveWeight(), 1, "When an animation crossFadeFrom is started, EffectiveWeight is 1." );250			assert.equal( animationAction2.getEffectiveWeight(), 1, "When an animation crossFadeFrom is started, EffectiveWeight is 1." );251			mixer.update( 250 );252			assert.equal( animationAction.getEffectiveWeight(), 0.25, "When an animation fadeOut happened 1/4, EffectiveWeight is 0.75." );253			assert.equal( animationAction2.getEffectiveWeight(), 0.75, "When an animation fadeOut happened 1/4, EffectiveWeight is 0.75." );254			mixer.update( 250 );255			assert.equal( animationAction.getEffectiveWeight(), 0.5, "When an animation fadeOut happened 1/4, EffectiveWeight is 0.75." );256			assert.equal( animationAction2.getEffectiveWeight(), 0.5, "When an animation fadeOut is halfway , EffectiveWeight is 0.5." );257			mixer.update( 250 );258			assert.equal( animationAction.getEffectiveWeight(), 0.75, "When an animation fadeOut happened 1/4, EffectiveWeight is 0.75." );259			assert.equal( animationAction2.getEffectiveWeight(), 0.25, "When an animation fadeOut is happened 3/4 , EffectiveWeight is 0.25." );260			mixer.update( 500 );261			assert.equal( animationAction.getEffectiveWeight(), 1, "When an animation fadeOut happened 1/4, EffectiveWeight is 0.75." );262			assert.equal( animationAction2.getEffectiveWeight(), 0, "When an animation fadeOut is ended , EffectiveWeight is 0." );263		} );264		QUnit.test( "crossFadeTo", ( assert ) => {265			var { mixer, animationAction, animationAction2 } = createTwoAnimations();266			animationAction2.crossFadeTo( animationAction, 1000, false );267			animationAction.play();268			animationAction2.play();269			assert.equal( animationAction.getEffectiveWeight(), 1, "When an animation crossFadeFrom is started, EffectiveWeight is 1." );270			assert.equal( animationAction2.getEffectiveWeight(), 1, "When an animation crossFadeFrom is started, EffectiveWeight is 1." );271			mixer.update( 250 );272			assert.equal( animationAction.getEffectiveWeight(), 0.25, "When an animation fadeOut happened 1/4, EffectiveWeight is 0.75." );273			assert.equal( animationAction2.getEffectiveWeight(), 0.75, "When an animation fadeOut happened 1/4, EffectiveWeight is 0.75." );274			mixer.update( 250 );275			assert.equal( animationAction.getEffectiveWeight(), 0.5, "When an animation fadeOut happened 1/4, EffectiveWeight is 0.75." );276			assert.equal( animationAction2.getEffectiveWeight(), 0.5, "When an animation fadeOut is halfway , EffectiveWeight is 0.5." );277			mixer.update( 250 );278			assert.equal( animationAction.getEffectiveWeight(), 0.75, "When an animation fadeOut happened 1/4, EffectiveWeight is 0.75." );279			assert.equal( animationAction2.getEffectiveWeight(), 0.25, "When an animation fadeOut is happened 3/4 , EffectiveWeight is 0.25." );280			mixer.update( 500 );281			assert.equal( animationAction.getEffectiveWeight(), 1, "When an animation fadeOut happened 1/4, EffectiveWeight is 0.75." );282			assert.equal( animationAction2.getEffectiveWeight(), 0, "When an animation fadeOut is ended , EffectiveWeight is 0." );283		} );284		QUnit.todo( "stopFading", ( assert ) => {285			assert.ok( false, "everything's gonna be alright" );286		} );287		QUnit.todo( "setEffectiveTimeScale", ( assert ) => {288			assert.ok( false, "everything's gonna be alright" );289		} );290		QUnit.todo( "getEffectiveTimeScale", ( assert ) => {291			assert.ok( false, "everything's gonna be alright" );292		} );293		QUnit.todo( "setDuration", ( assert ) => {294			assert.ok( false, "everything's gonna be alright" );295		} );296		QUnit.todo( "syncWith", ( assert ) => {297			assert.ok( false, "everything's gonna be alright" );298		} );299		QUnit.todo( "halt", ( assert ) => {300			assert.ok( false, "everything's gonna be alright" );301		} );302		QUnit.todo( "warp", ( assert ) => {303			assert.ok( false, "everything's gonna be alright" );304		} );305		QUnit.todo( "stopWarping", ( assert ) => {306			assert.ok( false, "everything's gonna be alright" );307		} );308		QUnit.test( "getMixer", ( assert ) => {309			var { mixer, animationAction } = createAnimation();310			var mixer2 = animationAction.getMixer();311			assert.equal( mixer, mixer2, "mixer should be returned by getMixer." );312		} );313		QUnit.test( "getClip", ( assert ) => {314			var { clip, animationAction } = createAnimation();315			var clip2 = animationAction.getClip();316			assert.equal( clip, clip2, "clip should be returned by getClip." );317		} );318		QUnit.test( "getRoot", ( assert ) => {319			var { root, animationAction } = createAnimation();320			var root2 = animationAction.getRoot();321			assert.equal( root, root2, "root should be returned by getRoot." );322		} );323	} );...

1(function ($) {2 "use strict";3 4	/*----------------------5		Animation active js6	 -----------------------*/7	$("button.btn.ant-nk-st.bounce-ac").on('click', function(){8		$(".animation-img .animate-one").addClass("animated bounce").one("webkitAnimationEnd mozAnimationEnd oAnimationEnd animationend", function(){9			$(this).removeClass("animated bounce");10		});11	});12	$("button.btn.ant-nk-st.flash-ac").on('click', function(){13		$(".animation-img .animate-one").addClass("animated flash").one("webkitAnimationEnd mozAnimationEnd oAnimationEnd animationend", function(){14			$(this).removeClass("animated flash");15		});16	});17	$("button.btn.ant-nk-st.pulse-ac").on('click', function(){18		$(".animation-img .animate-one").addClass("animated pulse").one("webkitAnimationEnd mozAnimationEnd oAnimationEnd animationend", function(){19			$(this).removeClass("animated pulse");20		});21	});22	$("button.btn.ant-nk-st.rubberBand-ac").on('click', function(){23		$(".animation-img .animate-one").addClass("animated rubberBand").one("webkitAnimationEnd mozAnimationEnd oAnimationEnd animationend", function(){24			$(this).removeClass("animated rubberBand");25		});26	});27	$("button.btn.ant-nk-st.bounceIn-ac").on('click', function(){28		$(".animation-img .animate-two").addClass("animated bounceIn").one("webkitAnimationEnd mozAnimationEnd oAnimationEnd animationend", function(){29			$(this).removeClass("animated bounceIn");30		});31	});32	$("button.btn.ant-nk-st.bounceInDown-ac").on('click', function(){33		$(".animation-img .animate-two").addClass("animated bounceInDown").one("webkitAnimationEnd mozAnimationEnd oAnimationEnd animationend", function(){34			$(this).removeClass("animated bounceInDown");35		});36	});37	$("button.btn.ant-nk-st.bounceInLeft-ac").on('click', function(){38		$(".animation-img .animate-two").addClass("animated bounceInLeft").one("webkitAnimationEnd mozAnimationEnd oAnimationEnd animationend", function(){39			$(this).removeClass("animated bounceInLeft");40		});41	});42	$("button.btn.ant-nk-st.bounceInUp-ac").on('click', function(){43		$(".animation-img .animate-two").addClass("animated bounceInUp").one("webkitAnimationEnd mozAnimationEnd oAnimationEnd animationend", function(){44			$(this).removeClass("animated bounceInUp");45		});46	});47	$("button.btn.ant-nk-st.bounceOut-ac").on('click', function(){48		$(".animation-img .animate-three").addClass("animated bounceOut").one("webkitAnimationEnd mozAnimationEnd oAnimationEnd animationend", function(){49			$(this).removeClass("animated bounceOut");50		});51	});52	$("button.btn.ant-nk-st.bounceOutDown-ac").on('click', function(){53		$(".animation-img .animate-three").addClass("animated bounceOutDown").one("webkitAnimationEnd mozAnimationEnd oAnimationEnd animationend", function(){54			$(this).removeClass("animated bounceOutDown");55		});56	});57	$("button.btn.ant-nk-st.bounceOutLeft-ac").on('click', function(){58		$(".animation-img .animate-three").addClass("animated bounceOutLeft").one("webkitAnimationEnd mozAnimationEnd oAnimationEnd animationend", function(){59			$(this).removeClass("animated bounceOutLeft");60		});61	});62	$("button.btn.ant-nk-st.bounceOutRight-ac").on('click', function(){63		$(".animation-img .animate-three").addClass("animated bounceOutRight").one("webkitAnimationEnd mozAnimationEnd oAnimationEnd animationend", function(){64			$(this).removeClass("animated bounceOutRight");65		});66	});67	$("button.btn.ant-nk-st.fadeIn-ac").on('click', function(){68		$(".animation-img .animate-four").addClass("animated fadeIn").one("webkitAnimationEnd mozAnimationEnd oAnimationEnd animationend", function(){69			$(this).removeClass("animated fadeIn");70		});71	});72	$("button.btn.ant-nk-st.fadeInDown-ac").on('click', function(){73		$(".animation-img .animate-four").addClass("animated fadeInDown").one("webkitAnimationEnd mozAnimationEnd oAnimationEnd animationend", function(){74			$(this).removeClass("animated fadeInDown");75		});76	});77	$("button.btn.ant-nk-st.fadeInDownBig-ac").on('click', function(){78		$(".animation-img .animate-four").addClass("animated fadeInDownBig").one("webkitAnimationEnd mozAnimationEnd oAnimationEnd animationend", function(){79			$(this).removeClass("animated fadeInDownBig");80		});81	});82	$("button.btn.ant-nk-st.fadeInLeft-ac").on('click', function(){83		$(".animation-img .animate-four").addClass("animated fadeInLeft").one("webkitAnimationEnd mozAnimationEnd oAnimationEnd animationend", function(){84			$(this).removeClass("animated fadeInLeft");85		});86	});87	$("button.btn.ant-nk-st.fadeOut-ac").on('click', function(){88		$(".animation-img .animate-five").addClass("animated fadeOut").one("webkitAnimationEnd mozAnimationEnd oAnimationEnd animationend", function(){89			$(this).removeClass("animated fadeOut");90		});91	});92	$("button.btn.ant-nk-st.fadeOutDown-ac").on('click', function(){93		$(".animation-img .animate-five").addClass("animated fadeOutDown").one("webkitAnimationEnd mozAnimationEnd oAnimationEnd animationend", function(){94			$(this).removeClass("animated fadeOutDown");95		});96	});97	$("button.btn.ant-nk-st.fadeOutDownBig-ac").on('click', function(){98		$(".animation-img .animate-five").addClass("animated fadeOutDownBig").one("webkitAnimationEnd mozAnimationEnd oAnimationEnd animationend", function(){99			$(this).removeClass("animated fadeOutDownBig");100		});101	});102	$("button.btn.ant-nk-st.fadeOutLeft-ac").on('click', function(){103		$(".animation-img .animate-five").addClass("animated fadeOutLeft").one("webkitAnimationEnd mozAnimationEnd oAnimationEnd animationend", function(){104			$(this).removeClass("animated fadeOutLeft");105		});106	});107	$("button.btn.ant-nk-st.flip-ac").on('click', function(){108		$(".animation-img .animate-six").addClass("animated flip").one("webkitAnimationEnd mozAnimationEnd oAnimationEnd animationend", function(){109			$(this).removeClass("animated flip");110		});111	});112	$("button.btn.ant-nk-st.flipInX-ac").on('click', function(){113		$(".animation-img .animate-six").addClass("animated flipInX").one("webkitAnimationEnd mozAnimationEnd oAnimationEnd animationend", function(){114			$(this).removeClass("animated flipInX");115		});116	});117	$("button.btn.ant-nk-st.flipInY-ac").on('click', function(){118		$(".animation-img .animate-six").addClass("animated flipInY").one("webkitAnimationEnd mozAnimationEnd oAnimationEnd animationend", function(){119			$(this).removeClass("animated flipInY");120		});121	});122	$("button.btn.ant-nk-st.flipOutX-ac").on('click', function(){123		$(".animation-img .animate-six").addClass("animated flipOutX").one("webkitAnimationEnd mozAnimationEnd oAnimationEnd animationend", function(){124			$(this).removeClass("animated flipOutX");125		});126	});127	$("button.btn.ant-nk-st.slideInUp-ac").on('click', function(){128		$(".animation-img .animate-seven").addClass("animated slideInUp").one("webkitAnimationEnd mozAnimationEnd oAnimationEnd animationend", function(){129			$(this).removeClass("animated slideInUp");130		});131	});132	$("button.btn.ant-nk-st.slideInDown-ac").on('click', function(){133		$(".animation-img .animate-seven").addClass("animated slideInDown").one("webkitAnimationEnd mozAnimationEnd oAnimationEnd animationend", function(){134			$(this).removeClass("animated slideInDown");135		});136	});137	$("button.btn.ant-nk-st.slideInLeft-ac").on('click', function(){138		$(".animation-img .animate-seven").addClass("animated slideInLeft").one("webkitAnimationEnd mozAnimationEnd oAnimationEnd animationend", function(){139			$(this).removeClass("animated slideInLeft");140		});141	});142	$("button.btn.ant-nk-st.slideInRight-ac").on('click', function(){143		$(".animation-img .animate-seven").addClass("animated slideInRight").one("webkitAnimationEnd mozAnimationEnd oAnimationEnd animationend", function(){144			$(this).removeClass("animated slideInRight");145		});146	});147	$("button.btn.ant-nk-st.rotateIn-ac").on('click', function(){148		$(".animation-img .animate-eight").addClass("animated rotateIn").one("webkitAnimationEnd mozAnimationEnd oAnimationEnd animationend", function(){149			$(this).removeClass("animated rotateIn");150		});151	});152	$("button.btn.ant-nk-st.rotateInDownLeft-ac").on('click', function(){153		$(".animation-img .animate-eight").addClass("animated rotateInDownLeft").one("webkitAnimationEnd mozAnimationEnd oAnimationEnd animationend", function(){154			$(this).removeClass("animated rotateInDownLeft");155		});156	});157	$("button.btn.ant-nk-st.rotateInDownRight-ac").on('click', function(){158		$(".animation-img .animate-eight").addClass("animated rotateInDownRight").one("webkitAnimationEnd mozAnimationEnd oAnimationEnd animationend", function(){159			$(this).removeClass("animated rotateInDownRight");160		});161	});162	$("button.btn.ant-nk-st.rotateInUpLeft-ac").on('click', function(){163		$(".animation-img .animate-eight").addClass("animated rotateInUpLeft").one("webkitAnimationEnd mozAnimationEnd oAnimationEnd animationend", function(){164			$(this).removeClass("animated rotateInUpLeft");165		});166	});167	$("button.btn.ant-nk-st.rotateOut-ac").on('click', function(){168		$(".animation-img .animate-nine").addClass("animated rotateOut").one("webkitAnimationEnd mozAnimationEnd oAnimationEnd animationend", function(){169			$(this).removeClass("animated rotateOut");170		});171	});172	$("button.btn.ant-nk-st.rotateOutDownLeft-ac").on('click', function(){173		$(".animation-img .animate-nine").addClass("animated rotateOutDownLeft").one("webkitAnimationEnd mozAnimationEnd oAnimationEnd animationend", function(){174			$(this).removeClass("animated rotateOutDownLeft");175		});176	});177	$("button.btn.ant-nk-st.rotateOutDownRight-ac").on('click', function(){178		$(".animation-img .animate-nine").addClass("animated rotateOutDownRight").one("webkitAnimationEnd mozAnimationEnd oAnimationEnd animationend", function(){179			$(this).removeClass("animated rotateOutDownRight");180		});181	});182	$("button.btn.ant-nk-st.rotateOutUpLeft-ac").on('click', function(){183		$(".animation-img .animate-nine").addClass("animated rotateOutUpLeft").one("webkitAnimationEnd mozAnimationEnd oAnimationEnd animationend", function(){184			$(this).removeClass("animated rotateOutUpLeft");185		});186	});187	$("button.btn.ant-nk-st.slideOutUp-ac").on('click', function(){188		$(".animation-img .animate-ten").addClass("animated slideOutUp").one("webkitAnimationEnd mozAnimationEnd oAnimationEnd animationend", function(){189			$(this).removeClass("animated slideOutUp");190		});191	});192	$("button.btn.ant-nk-st.slideOutDown-ac").on('click', function(){193		$(".animation-img .animate-ten").addClass("animated slideOutDown").one("webkitAnimationEnd mozAnimationEnd oAnimationEnd animationend", function(){194			$(this).removeClass("animated slideOutDown");195		});196	});197	$("button.btn.ant-nk-st.slideOutLeft-ac").on('click', function(){198		$(".animation-img .animate-ten").addClass("animated slideOutLeft").one("webkitAnimationEnd mozAnimationEnd oAnimationEnd animationend", function(){199			$(this).removeClass("animated slideOutLeft");200		});201	});202	$("button.btn.ant-nk-st.slideOutRight-ac").on('click', function(){203		$(".animation-img .animate-ten").addClass("animated slideOutRight").one("webkitAnimationEnd mozAnimationEnd oAnimationEnd animationend", function(){204			$(this).removeClass("animated slideOutRight");205		});206	});207	$("button.btn.ant-nk-st.zoomIn-ac").on('click', function(){208		$(".animation-img .animate-eleven").addClass("animated zoomIn").one("webkitAnimationEnd mozAnimationEnd oAnimationEnd animationend", function(){209			$(this).removeClass("animated zoomIn");210		});211	});212	$("button.btn.ant-nk-st.zoomInDown-ac").on('click', function(){213		$(".animation-img .animate-eleven").addClass("animated zoomInDown").one("webkitAnimationEnd mozAnimationEnd oAnimationEnd animationend", function(){214			$(this).removeClass("animated zoomInDown");215		});216	});217	$("button.btn.ant-nk-st.zoomInLeft-ac").on('click', function(){218		$(".animation-img .animate-eleven").addClass("animated zoomInLeft").one("webkitAnimationEnd mozAnimationEnd oAnimationEnd animationend", function(){219			$(this).removeClass("animated zoomInLeft");220		});221	});222	$("button.btn.ant-nk-st.zoomInRight-ac").on('click', function(){223		$(".animation-img .animate-eleven").addClass("animated zoomInRight").one("webkitAnimationEnd mozAnimationEnd oAnimationEnd animationend", function(){224			$(this).removeClass("animated zoomInRight");225		});226	});227	$("button.btn.ant-nk-st.zoomOut-ac").on('click', function(){228		$(".animation-img .animate-twelve").addClass("animated zoomOut").one("webkitAnimationEnd mozAnimationEnd oAnimationEnd animationend", function(){229			$(this).removeClass("animated zoomOut");230		});231	});232	$("button.btn.ant-nk-st.zoomOutDown-ac").on('click', function(){233		$(".animation-img .animate-twelve").addClass("animated zoomOutDown").one("webkitAnimationEnd mozAnimationEnd oAnimationEnd animationend", function(){234			$(this).removeClass("animated zoomOutDown");235		});236	});237	$("button.btn.ant-nk-st.zoomOutLeft-ac").on('click', function(){238		$(".animation-img .animate-twelve").addClass("animated zoomOutLeft").one("webkitAnimationEnd mozAnimationEnd oAnimationEnd animationend", function(){239			$(this).removeClass("animated zoomOutLeft");240		});241	});242	$("button.btn.ant-nk-st.zoomOutRight-ac").on('click', function(){243		$(".animation-img .animate-twelve").addClass("animated zoomOutRight").one("webkitAnimationEnd mozAnimationEnd oAnimationEnd animationend", function(){244			$(this).removeClass("animated zoomOutRight");245		});246	});247	/*----------------------248	Animation dropdown active js249	-----------------------*/250	$("button.triger-fadeIn").on('click', function(){251		$(".triger-fadeIn-dp").addClass("animated fadeIn").one("webkitAnimationEnd mozAnimationEnd oAnimationEnd animationend", function(){252			$(this).removeClass("animated fadeIn");253		});254	});255	$("button.triger-fadeInUp").on('click', function(){256		$(".triger-fadeInUp-dp").addClass("animated fadeInUp").one("webkitAnimationEnd mozAnimationEnd oAnimationEnd animationend", function(){257			$(this).removeClass("animated fadeInUp");258		});259	});260	$("button.triger-fadeInLeft").on('click', function(){261		$(".triger-fadeInLeft-dp").addClass("animated fadeInLeft").one("webkitAnimationEnd mozAnimationEnd oAnimationEnd animationend", function(){262			$(this).removeClass("animated fadeInLeft");263		});264	});265	$("button.triger-shake").on('click', function(){266		$(".triger-shake-dp").addClass("animated shake").one("webkitAnimationEnd mozAnimationEnd oAnimationEnd animationend", function(){267			$(this).removeClass("animated shake");268		});269	});270	$("button.triger-swing").on('click', function(){271		$(".triger-swing-dp").addClass("animated swing").one("webkitAnimationEnd mozAnimationEnd oAnimationEnd animationend", function(){272			$(this).removeClass("animated swing");273		});274	});275	$("button.triger-jello").on('click', function(){276		$(".triger-jello-dp").addClass("animated jello").one("webkitAnimationEnd mozAnimationEnd oAnimationEnd animationend", function(){277			$(this).removeClass("animated jello");278		});279	});280	$("button.triger-bounceIn").on('click', function(){281		$(".triger-bounceIn-dp").addClass("animated bounceIn").one("webkitAnimationEnd mozAnimationEnd oAnimationEnd animationend", function(){282			$(this).removeClass("animated bounceIn");283		});284	});285	$("button.triger-bounceInUp").on('click', function(){286		$(".triger-bounceInUp-dp").addClass("animated bounceInUp").one("webkitAnimationEnd mozAnimationEnd oAnimationEnd animationend", function(){287			$(this).removeClass("animated bounceInUp");288		});289	});290	$("button.triger-flip").on('click', function(){291		$(".triger-flip-dp").addClass("animated flip").one("webkitAnimationEnd mozAnimationEnd oAnimationEnd animationend", function(){292			$(this).removeClass("animated flip");293		});294	});295	$("button.triger-flipInX").on('click', function(){296		$(".triger-flipInX-dp").addClass("animated flipInX").one("webkitAnimationEnd mozAnimationEnd oAnimationEnd animationend", function(){297			$(this).removeClass("animated flipInX");298		});299	});300	$("button.triger-flipInY").on('click', function(){301		$(".triger-flipInY-dp").addClass("animated flipInY").one("webkitAnimationEnd mozAnimationEnd oAnimationEnd animationend", function(){302			$(this).removeClass("animated flipInY");303		});304	});305	$("button.triger-rotateIn").on('click', function(){306		$(".triger-rotateIn-dp").addClass("animated rotateIn").one("webkitAnimationEnd mozAnimationEnd oAnimationEnd animationend", function(){307			$(this).removeClass("animated rotateIn");308		});309	});310	$("button.triger-zoomIn").on('click', function(){311		$(".triger-zoomIn-dp").addClass("animated zoomIn").one("webkitAnimationEnd mozAnimationEnd oAnimationEnd animationend", function(){312			$(this).removeClass("animated zoomIn");313		});314	});315 ...

1'use strict';2$(document).ready(function(){3    function testAnim(x, str) {4        $('#animationSandbox' + str).removeClass().addClass(x + ' animated').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function() {5            $(this).removeClass();6        });7    }8    function testAnim1(str) {9        var x = document.getElementById('s' + str).value;10        $('#animationSandbox' + str).removeClass().addClass(x + ' animated').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function() {11            $(this).removeClass();12        });13    }14    $(".knob").knob({15        change: function(value) {16            //console.log("change : " + value);17        },18        release: function(value) {19            //console.log(this.$.attr('value'));20            console.log("release : " + value);21        },22        cancel: function() {23            console.log("cancel : ", this);24        },25        /*format : function (value) {26         return value + '%';27         },*/28        draw: function() {29            // "tron" case30            if (this.$.data('skin') == 'tron') {31                this.cursorExt = 0.3;32                var a = this.arc(this.cv) // Arc33                    ,34                    pa // Previous arc35                    , r = 1;36                this.g.lineWidth = this.lineWidth;37                if (this.o.displayPrevious) {38                    pa = this.arc(this.v);39                    this.g.beginPath();40                    this.g.strokeStyle = this.pColor;41                    this.g.arc(this.xy, this.xy, this.radius - this.lineWidth, pa.s, pa.e, pa.d);42                    this.g.stroke();43                }44                this.g.beginPath();45                this.g.strokeStyle = r ? this.o.fgColor : this.fgColor;46                this.g.arc(this.xy, this.xy, this.radius - this.lineWidth, a.s, a.e, a.d);47                this.g.stroke();48                this.g.lineWidth = 2;49                this.g.beginPath();50                this.g.strokeStyle = this.o.fgColor;51                this.g.arc(this.xy, this.xy, this.radius - this.lineWidth + 1 + this.lineWidth * 2 / 3, 0, 2 * Math.PI, false);52                this.g.stroke();53                return false;54            }55        }56    });57    // Example of infinite knob, iPod click wheel58    var v, up = 0,59        down = 0,60        i = 0,61        $idir = $("div.idir"),62        $ival = $("div.ival"),63        incr = function() {64            i++;65            $idir.show().html("+").fadeOut();66            $ival.html(i);67        },68        decr = function() {69            i--;70            $idir.show().html("-").fadeOut();71            $ival.html(i);72        };73    $("input.infinite").knob({74        min: 0,75        max: 20,76        stopper: false,77        change: function() {78            if (v > this.cv) {79                if (up) {80                    decr();81                    up = 0;82                } else {83                    up = 1;84                    down = 0;85                }86            } else {87                if (v < this.cv) {88                    if (down) {89                        incr();90                        down = 0;91                    } else {92                        down = 1;93                        up = 0;94                    }95                }96            }97            v = this.cv;98        }99    });100// ======================transitions========================101//        bounce in102    $("#bi").on("click", function() {103        var animationEnd = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend';104        $('#bi').addClass('animated bounceIn').one(animationEnd, function() {105            $(this).removeClass('animated bounceIn');106        });107        return false;108    });109//        bounceinleft110    $("#bil").on("click", function() {111        var animationEnd = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend';112        $('#bil').addClass('animated bounceInLeft').one(animationEnd, function() {113            $(this).removeClass('animated bounceInLeft');114        });115        return false;116    });117//    bounceinright118    $("#bir").on("click", function() {119        var animationEnd = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend';120        $('#bir').addClass('animated bounceInRight').one(animationEnd, function() {121            $(this).removeClass('animated bounceInRight');122        });123        return false;124    });125//    bounce out126    $("#bo").on("click", function() {127        var animationEnd = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend';128        $('#bo').addClass('animated bounceOut').one(animationEnd, function() {129            $(this).removeClass('animated bounceOut');130        });131        return false;132    });133// pulse134    $("#pul").on("click", function() {135        var animationEnd = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend';136        $('#pul').addClass('animated pulse').one(animationEnd, function() {137            $(this).removeClass('animated pulse');138        });139        return false;140    });141// tada142    $("#tad").on("click", function() {143        var animationEnd = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend';144        $('#tad').addClass('animated tada').one(animationEnd, function() {145            $(this).removeClass('animated tada');146        });147        return false;148    });149    // Rubber band150    $("#rubber").on("click", function() {151        var animationEnd = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend';152        $('#rubber').addClass('animated rubberBand').one(animationEnd, function() {153            $(this).removeClass('animated rubberBand');154        });155        return false;156    });157//swing158    $("#swing").on("click", function() {159        var animationEnd = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend';160        $('#swing').addClass('animated swing').one(animationEnd, function() {161            $(this).removeClass('animated swing');162        });163        return false;164    });165//        wobble166    $("#wobble").on("click", function() {167        var animationEnd = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend';168        $('#wobble').addClass('animated wobble').one(animationEnd, function() {169            $(this).removeClass('animated wobble');170        });171        return false;172    });173//fade effects174    $("#fadein").on("click", function() {175        var animationEnd = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend';176        $('#fadein').addClass('animated fadeIn').one(animationEnd, function() {177            $(this).removeClass('animated fadeIn');178        });179        return false;180    });181    $("#fadeleft").on("click", function() {182        var animationEnd = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend';183        $('#fadeleft').addClass('animated fadeInLeft').one(animationEnd, function() {184            $(this).removeClass('animated fadeInLeft');185        });186        return false;187    });188    $("#faderight").on("click", function() {189        var animationEnd = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend';190        $('#faderight').addClass('animated fadeInRight').one(animationEnd, function() {191            $(this).removeClass('animated fadeInRight');192        });193        return false;194    });195    $("#fadeout").on("click", function() {196        var animationEnd = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend';197        $('#fadeout').addClass('animated fadeOut').one(animationEnd, function() {198            $(this).removeClass('animated fadeOut');199        });200        return false;201    });202//flip effect203    $("#flip").on("click", function() {204        var animationEnd = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend';205        $('#flip').addClass('animated flip').one(animationEnd, function() {206            $(this).removeClass('animated flip');207        });208        return false;209    });210    $("#flipy").on("click", function() {211        var animationEnd = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend';212        $('#flipy').addClass('animated flipInY').one(animationEnd, function() {213            $(this).removeClass('animated flipInY');214        });215        return false;216    });217    $("#flipoutx").on("click", function() {218        var animationEnd = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend';219        $('#flipoutx').addClass('animated flipOutX').one(animationEnd, function() {220            $(this).removeClass('animated flipOutX');221        });222        return false;223    });224    $("#flipouty").on("click", function() {225        var animationEnd = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend';226        $('#flipouty').addClass('animated flipOutY').one(animationEnd, function() {227            $(this).removeClass('animated flipOutY');228        });229        return false;230    });231//rotate232    $("#rotatein").on("click", function() {233        var animationEnd = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend';234        $('#rotatein').addClass('animated rotateIn').one(animationEnd, function() {235            $(this).removeClass('animated rotateIn');236        });237        return false;238    });239    $("#rotatedownright").on("click", function() {240        var animationEnd = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend';241        $('#rotatedownright').addClass('animated rotateInDownRight').one(animationEnd, function() {242            $(this).removeClass('animated rotateInDownRight');243        });244        return false;245    });246    $("#rotateout").on("click", function() {247        var animationEnd = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend';248        $('#rotateout').addClass('animated rotateOut').one(animationEnd, function() {249            $(this).removeClass('animated rotateOut');250        });251        return false;252    });253    $("#rotateoutleft").on("click", function() {254        var animationEnd = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend';255        $('#rotateoutleft').addClass('animated rotateOutUpLeft').one(animationEnd, function() {256            $(this).removeClass('animated rotateOutUpLeft');257        });258        return false;259    });260//        zoom effect261    $("#zoomin").on("click", function() {262        var animationEnd = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend';263        $('#zoomin').addClass('animated zoomIn').one(animationEnd, function() {264            $(this).removeClass('animated zoomIn');265        });266        return false;267    });268    $("#zoominleft").on("click", function() {269        var animationEnd = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend';270        $('#zoominleft').addClass('animated zoomInLeft').one(animationEnd, function() {271            $(this).removeClass('animated zoomInLeft');272        });273        return false;274    });275    $("#zoomoutdown").on("click", function() {276        var animationEnd = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend';277        $('#zoomoutdown').addClass('animated zoomOutDown').one(animationEnd, function() {278            $(this).removeClass('animated zoomOutDown');279        });280        return false;281    });282    $("#zoomoutright").on("click", function() {283        var animationEnd = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend';284        $('#zoomoutright').addClass('animated zoomOutRight').one(animationEnd, function() {285            $(this).removeClass('animated zoomOutRight');286        });287        return false;288    });289//special effects290    $("#hinge").on("click", function() {291        var animationEnd = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend';292        $('#hinge').addClass('animated hinge').one(animationEnd, function() {293            $(this).removeClass('animated hinge');294        });295        return false;296    });297    $("#rollin").on("click", function() {298        var animationEnd = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend';299        $('#rollin').addClass('animated rollIn').one(animationEnd, function() {300            $(this).removeClass('animated rollIn');301        });302        return false;303    });304    $("#rollout").on("click", function() {305        var animationEnd = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend';306        $('#rollout').addClass('animated rollOut').one(animationEnd, function() {307            $(this).removeClass('animated rollOut');308        });309        return false;310    });...

...51        }52    }5354    // load json animation datafiles55    function loadAnimation(path) {56        var _XMLHttpRequest = new XMLHttpRequest();57        _XMLHttpRequest.open("GET", path, false);58        _XMLHttpRequest.send();59        if (_XMLHttpRequest.status == 200) {60            try {61                var animation = JSON.parse(_XMLHttpRequest.responseText);62                // instantiate harmonics filters63                for (joint in animation.harmonics) {64                    for (jointHarmonics in animation.harmonics[joint]) {65                        var name = joint+'.'+jointHarmonics;66                        var magnitudes = animation.harmonics[joint][jointHarmonics].magnitudes;67                        var phaseAngles = animation.harmonics[joint][jointHarmonics].phaseAngles;68                        var numHarmonics = animation.harmonics[joint][jointHarmonics].numHarmonics;69                        animation.harmonics[joint][jointHarmonics] =70                            filter.createHarmonicsFilter(numHarmonics, magnitudes, phaseAngles);71                    }72                }73                return animation;74            } catch (e) {75                print('walk.js: Error parsing JSON data for '+path+': '+e.toString());76                print('walk.js: Response text was '+_XMLHttpRequest.responseText);77                return null;78            }79        } else {80            print("walk.js: Error "+_XMLHttpRequest.status+" encountered whilst loading JSON file from "+path);81            return null;82        }83    }8485    function loadAnimationSet() {8687        // load the character animation definition file88		print('walk.js: Loading animation set "'+_currentAnimationSet+'" from '+ pathToAssets + _animationSets[_currentAnimationSet].path);89        _character = loadFile(pathToAssets + _animationSets[_currentAnimationSet].path + "character.json");9091        // load animations data92        for (animation in _character.animations) {93            _character.animations[animation] = loadAnimation(pathToAssets + _character.animations[animation].path);94            print('walk.js: Loaded ' + _character.animations[animation].name+' animation');95        }9697        // load reach poses data98        for (pose in _character.reachPoses) {99            _character.reachPoses[pose].animation = loadAnimation(pathToAssets + _character.reachPoses[pose].path);100            print('walk.js: Loaded ' + _character.reachPoses[pose].animation.name+ ' reach pose');101        }102103        // load sounds104        for (sound in _character.sounds) {105            _character.sounds[sound].audioData = SoundCache.getSound(pathToAssets + _character.sounds[sound].path);106        }107        print('walk.js: Loaded audio files');108109        // create walk and fly animation blending buffers110        var flyBlend = loadFile(pathToAssets + "miscellaneous/animation-buffer.json", "FlyBlend");111        var walkBlend = loadFile(pathToAssets + "miscellaneous/animation-buffer.json", "WalkBlend");112        _character.animations["FlyBlend"] = flyBlend;113        _character.animations["WalkBlend"] = walkBlend;114        print('walk.js: Buffers created');115        116        // add a t-pose 117        _character.animations["T-Pose"] = loadAnimation(pathToAssets + "miscellaneous/t-pose.json");118119        if (avatar) {120            avatar.loadAnimations();121        }122        print('walk.js: '+_currentAnimationSet + ' animation set loaded');123    }124125    // initialise126    var _animationReference = loadFile(pathToAssets + "miscellaneous/animation-reference.json");127    var _preRotations = loadFile(pathToAssets + "miscellaneous/pre-rotations.json");128    loadAnimationSet();129130    return {131
...

...20	var endFrame = numFrames - 1;2122	var fps = numFrames / 1;2324	this.createAnimation( name, startFrame, endFrame, fps );25	this.setAnimationWeight( name, 1 );2627};2829THREE.MorphBlendMesh.prototype = Object.create( THREE.Mesh.prototype );30THREE.MorphBlendMesh.prototype.constructor = THREE.MorphBlendMesh;3132THREE.MorphBlendMesh.prototype.createAnimation = function ( name, start, end, fps ) {3334	var animation = {3536		startFrame: start,37		endFrame: end,3839		length: end - start + 1,4041		fps: fps,42		duration: ( end - start ) / fps,4344		lastFrame: 0,45		currentFrame: 0,4647		active: false,4849		time: 0,50		direction: 1,51		weight: 1,5253		directionBackwards: false,54		mirroredLoop: false5556	};5758	this.animationsMap[ name ] = animation;59	this.animationsList.push( animation );6061};6263THREE.MorphBlendMesh.prototype.autoCreateAnimations = function ( fps ) {6465	var pattern = /([a-z]+)_?(\d+)/;6667	var firstAnimation, frameRanges = {};6869	var geometry = this.geometry;7071	for ( var i = 0, il = geometry.morphTargets.length; i < il; i ++ ) {7273		var morph = geometry.morphTargets[ i ];74		var chunks = morph.name.match( pattern );7576		if ( chunks && chunks.length > 1 ) {7778			var name = chunks[ 1 ];7980			if ( ! frameRanges[ name ] ) frameRanges[ name ] = { start: Infinity, end: - Infinity };8182			var range = frameRanges[ name ];8384			if ( i < range.start ) range.start = i;85			if ( i > range.end ) range.end = i;8687			if ( ! firstAnimation ) firstAnimation = name;8889		}9091	}9293	for ( var name in frameRanges ) {9495		var range = frameRanges[ name ];96		this.createAnimation( name, range.start, range.end, fps );9798	}99100	this.firstAnimation = firstAnimation;101102};103104THREE.MorphBlendMesh.prototype.setAnimationDirectionForward = function ( name ) {105106	var animation = this.animationsMap[ name ];107108	if ( animation ) {109110		animation.direction = 1;111		animation.directionBackwards = false;112113	}114115};116117THREE.MorphBlendMesh.prototype.setAnimationDirectionBackward = function ( name ) {118119	var animation = this.animationsMap[ name ];120121	if ( animation ) {122123		animation.direction = - 1;124		animation.directionBackwards = true;125126	}127128};129130THREE.MorphBlendMesh.prototype.setAnimationFPS = function ( name, fps ) {131132	var animation = this.animationsMap[ name ];133134	if ( animation ) {135136		animation.fps = fps;137		animation.duration = ( animation.end - animation.start ) / animation.fps;138139	}140141};142143THREE.MorphBlendMesh.prototype.setAnimationDuration = function ( name, duration ) {144145	var animation = this.animationsMap[ name ];146147	if ( animation ) {148149		animation.duration = duration;150		animation.fps = ( animation.end - animation.start ) / animation.duration;151152	}153154};155156THREE.MorphBlendMesh.prototype.setAnimationWeight = function ( name, weight ) {157158	var animation = this.animationsMap[ name ];159160	if ( animation ) {161162		animation.weight = weight;163164	}165166};167168THREE.MorphBlendMesh.prototype.setAnimationTime = function ( name, time ) {169170	var animation = this.animationsMap[ name ];171172	if ( animation ) {173174		animation.time = time;175176	}177178};179180THREE.MorphBlendMesh.prototype.getAnimationTime = function ( name ) {181182	var time = 0;183184	var animation = this.animationsMap[ name ];185186	if ( animation ) {187188		time = animation.time;189190	}191192	return time;193194};195196THREE.MorphBlendMesh.prototype.getAnimationDuration = function ( name ) {197198	var duration = - 1;199200	var animation = this.animationsMap[ name ];201202	if ( animation ) {203204		duration = animation.duration;205206	}207208	return duration;209210};211212THREE.MorphBlendMesh.prototype.playAnimation = function ( name ) {213214	var animation = this.animationsMap[ name ];215216	if ( animation ) {217218		animation.time = 0;219		animation.active = true;220221	} else {222223		THREE.warn( "THREE.MorphBlendMesh: animation[" + name + "] undefined in .playAnimation()" );224225	}226227};228229THREE.MorphBlendMesh.prototype.stopAnimation = function ( name ) {230231	var animation = this.animationsMap[ name ];232233	if ( animation ) {234235		animation.active = false;236237	}
...

1describe('animate option', function () {2	/////////////////////////////3	// SETUP FOR EACH TEST4	/////////////////////////////5	var div, map, group;6	beforeEach(function () {7		div = document.createElement('div');8		div.style.width = '200px';9		div.style.height = '200px';10		document.body.appendChild(div);11	12		map = L.map(div, { maxZoom: 18, trackResize: false });13	14		// Corresponds to zoom level 8 for the above div dimensions.15		map.fitBounds(new L.LatLngBounds([16			[1, 1],17			[2, 2]18		]));19	});20	afterEach(function () {21		if (group instanceof L.MarkerClusterGroup) {22			group.removeLayers(group.getLayers());23			map.removeLayer(group);24		}25		map.remove();26		div.remove();27		div = map = group = null;28	});29	/////////////////////////////30	// TESTS31	/////////////////////////////32	it('hooks animated methods version by default', function () {33		// Need to add to map so that we have the top cluster level created.34		group = L.markerClusterGroup().addTo(map);35		var withAnimation = L.MarkerClusterGroup.prototype._withAnimation;36		// MCG animated methods.37		expect(group._animationStart).to.be(withAnimation._animationStart);38		expect(group._animationZoomIn).to.be(withAnimation._animationZoomIn);39		expect(group._animationZoomOut).to.be(withAnimation._animationZoomOut);40		expect(group._animationAddLayer).to.be(withAnimation._animationAddLayer);41		// MarkerCluster spiderfy animated methods42		var cluster = group._topClusterLevel;43		withAnimation = L.MarkerCluster.prototype;44		expect(cluster._animationSpiderfy).to.be(withAnimation._animationSpiderfy);45		expect(cluster._animationUnspiderfy).to.be(withAnimation._animationUnspiderfy);46	});47	it('hooks non-animated methods version when set to false', function () {48		// Need to add to map so that we have the top cluster level created.49		group = L.markerClusterGroup({animate: false}).addTo(map);50		var noAnimation = L.MarkerClusterGroup.prototype._noAnimation;51		// MCG non-animated methods.52		expect(group._animationStart).to.be(noAnimation._animationStart);53		expect(group._animationZoomIn).to.be(noAnimation._animationZoomIn);54		expect(group._animationZoomOut).to.be(noAnimation._animationZoomOut);55		expect(group._animationAddLayer).to.be(noAnimation._animationAddLayer);56		// MarkerCluster spiderfy non-animated methods57		var cluster = group._topClusterLevel;58		noAnimation = L.MarkerClusterNonAnimated.prototype;59		expect(cluster._animationSpiderfy).to.be(noAnimation._animationSpiderfy);60		expect(cluster._animationUnspiderfy).to.be(noAnimation._animationUnspiderfy);61	});62	it('always hooks non-animated methods version when L.DomUtil.TRANSITION is false', function () {63		// Fool Leaflet, make it think the browser does not support transitions.64		var realDomUtil = L.DomUtil;65		var fakeDomUtil = {};66		for (k in realDomUtil) {67			fakeDomUtil[k] = realDomUtil[k];68		}69		fakeDomUtil.TRANSITION = false;70		L.DomUtil = fakeDomUtil;71		try {72			// Need to add to map so that we have the top cluster level created.73			group = L.markerClusterGroup({animate: true}).addTo(map);74			var noAnimation = L.MarkerClusterGroup.prototype._noAnimation;75			// MCG non-animated methods.76			expect(group._animationStart).to.be(noAnimation._animationStart);77			expect(group._animationZoomIn).to.be(noAnimation._animationZoomIn);78			expect(group._animationZoomOut).to.be(noAnimation._animationZoomOut);79			expect(group._animationAddLayer).to.be(noAnimation._animationAddLayer);80			// MarkerCluster spiderfy non-animated methods81			var cluster = group._topClusterLevel;82			noAnimation = L.MarkerClusterNonAnimated.prototype;83			expect(cluster._animationSpiderfy).to.be(noAnimation._animationSpiderfy);84			expect(cluster._animationUnspiderfy).to.be(noAnimation._animationUnspiderfy);85		} finally {86			//Undo the DomUtil replacement hack87			L.DomUtil = realDomUtil;88		}89	});...