cpp
/
RmlUi
mirror of https://github.com/mikke89/RmlUi.git


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208
							<rml>
<head>
	<link type="text/template" href="../../../assets/window.rml"/>
	<title>Animation Sample</title>
	<style>
		body.window
		{
			max-width: 2000px;
			max-height: 2000px;
			width: 1600px;
			height: 750px;
			perspective: 3000px;
			/*opacity: 0;*/
		}
		button {
			margin-top: 50px;
		}
		div#title_bar div#icon
		{
			display: none;
		}

		spacer
		{
			display: inline-block;
			width: 25px;
		}
		
		#start_game 
		{
			opacity: 0.8;
			transform: rotate(370deg) translateX(100px) scale(1.2);
			transform-origin: 30% 80% 0;
		}

		#high_scores {
			margin-left: -100px;
		}
		#exit {
			transform: rotate(45deg);
			transform-origin: 50% 50% 0;
		}
		
		div.container
		{
			margin-top: 15px;
			width: 100%;
			height: 200px;
			background-color: #ae8484aa;
		}
		div.plain
		{
			font-size: 1.2em;
			padding: 10px;
			margin: auto;
			width: 130px;
			height: 70px;
			background-color: #c66;
		}
		div.plain:hover { background-color: #ddb700; }
		
		
		/* -- TRANSFORM TESTS */
		#generic {
			transform: translateX(100px) rotate3d(1.0, 0, 1.0, 0deg);
		}
		#combine {
			transform: rotate(45deg);
		}
		#decomposition {
			/* The scale(1.0) should force a full matrix recomposition when interpolating,
			   then, the information about multiple turns get lost and it only turns 45deg. */
			transform: rotate(45deg) scale(1.0);
		}
		
		/* -- MIXED UNITS TESTS */
		#abs_rel {
			margin: 0;
			margin-left: 50px;
		}
		#abs_rel_transform {
			margin: 0;
			transform: translateX(100%);
		}
		#animation_event {
			position: relative;
			margin: 0;
			top: 50px; left: 50px;
		}
		/* -- TRANSITION TESTS */
		#transition_test {
			/*transition: padding-left 1.6s elastic-in 1.0, background-color 1.2s quadratic-in 1.0, transform 1.3s exponential-in 1.0;*/
			transition: padding-left background-color transform 1.6s elastic-out 0.0;
			transform: scale(1.0);
		}
		#transition_test:hover {
			/*transition: padding-left background-color transform 0.8s quadratic-out 1.0;*/
			padding-left: 60px;
			transform: scale(1.5);
		} 
		#transition_class {
			margin-left: 50px;
			transition: margin-left background-color 0.5s cubic-out;
		}
		#transition_class.move_me {
			margin-left: -50px;
			font-size: 22px;
		}
		
		/* -- KEYFRAMES TESTS */
		@keyframes hello-world 
		{
			25% {
				transform: rotate(180deg);
			}
			40% {
				transform: rotate(180deg) translateX(200px);
			}
			60% {
				transform: rotate(180deg) translateX(-200px);
			}
			75% {
				transform: rotate(180deg);
			}
			to {
				transform: rotate(360deg);
			}
		}
		#keyframes_test
		{
			transform: rotate(0);
			animation: 5s bounce-out infinite hello-world;
			transition: background-color 0.5s exponential-in-out;
		}
		@keyframes some-missing-keys
		{
			0%, 30% {
				background-color: #d99;
			}
			50% {
				background-color: #9d9;
			}
			to { 
				background-color: #f9f;
				width: 100%;
			}
		}
		#keyframes_missing_keys
		{
			position: relative;
			margin: 0; padding: 0;
			top: 0; left: 0;
			width: 25px; height: 25px;
			animation: 2s cubic-in-out infinite alternate some-missing-keys;
		}
		#keyevent_response
		{
			position: relative;
			margin: 0; padding: 0;
			top: 110px; left: 0;
			width: 100px; height: 55px;
		}
		#performance 
		{
			position: absolute;
			bottom: 0; 
			height: 30%; 
			width: 20%;
			left: -100px;
			transform: scale(0.5) rotate(-90deg);
		}
		
	</style>
</head>

<body template="window">
<div style="width: 20%; height: 80%; position: absolute;">
	<div style="font-size: 0.85em; text-align: left;" id="fps"></div>
	<button id="start_game">Start Game</button><br />
	<button id="high_scores" onkeydown="hello">High Scores</button><br />
	<button id="options">Options</button><br />
	<button id="help">Help</button><br />
	<button id="exit" onclick="exit">Exit</button>
</div>

<div id="performance"/>

<div style="width: 20%; height: 80%;position: absolute; left: 28%;" id="transform_tests">
	<div style="font-size: 1.5em; text-align: left;">Test transform animations</div>
	<div class="container"><div class="plain" id="generic">Generic form conversion.</div></div>
	<div class="container"><div class="plain" id="combine">Match different transform primitive sizes</div></div>
	<div class="container"><div class="plain" id="decomposition">Force full matrix decomposition</div></div>
</div>

<div style="width: 20%; height: 80%;position: absolute; left: 52%;" id="mixed_units_tests">
	<div style="font-size: 1.5em; text-align: left;">Mixed units tests</div>
	<div class="container"><div class="plain" id="abs_rel">Pixel vs percentage.</div></div>
	<div class="container"><div class="plain" id="abs_rel_transform">Pixel vs percentage transform.</div></div>
	<div class="container"><div class="plain" id="animation_event">Animation event</div><div class="plain" id="keyevent_response">Events (press arrow keys)</div></div>
</div>
<div style="width: 20%; height: 80%;position: absolute; left: 75%;" id="transition_tests">
	<div style="font-size: 1.5em; text-align: left;">Transition tests</div>
	<div class="container"><div class="plain" id="transition_test">Transition test (hover)</div></div>
	<div class="container"><div class="plain" id="transition_class" onclick="add_class">Transition class (click)</div></div>
	<div class="container"><div class="plain" id="keyframes_test">Keyframes test</div><div class="plain" id="keyframes_missing_keys"/></div>
</div>
</body>
</rml>