cpp
/
RmlUi
kopia lustrzana https://github.com/mikke89/RmlUi.git


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259
							<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;
		}
		#options {
			transform: scale(1.0);
		}
		#options:hover {
			animation: 1s spinner infinite;
		}
		@keyframes spinner {
			from { transform: scale(1.0) rotate(0deg); }
			25% { transform: scale(1.2) rotate(90deg); }
			50% { transform: scale(1.3) rotate(180deg); }
			75% { transform: scale(1.2) rotate(270deg); }
			to { transform: scale(1.0) rotate(360deg); }
		}
		#high_scores {
			margin-left: -100px;
		}
		
		@keyframes fadeout {
			from {
				opacity: 1;
				visibility: visible;
			}
			to {
				opacity: 0;
				visibility: hidden;
			}
		}
		@keyframes fadein {
			from {
				opacity: 0;
				visibility: hidden;
			}
			to {
				opacity: 1;
				visibility: visible;
			}
		}
		@keyframes textalign {
			0%, 20%   { text-align: left; }
			50%       { text-align: center; }
			80%, 100% { text-align: right; }
		}
		.fadeout {
			animation: 1.2s cubic-in fadeout;
			visibility: hidden;
		}
		.fadein {
			animation: 1.2s cubic-out fadein;
		}
		.textalign {
			animation: 1.4s textalign;
		}
		
		#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 {
			/* Note the translateX vs translateY in animation target, and rotateZ vs rotate3d, scaleX vs scaleY.
			   In order to match, they are converted to their generic forms, translate3d, rotate3d, and scale3d.
			   For rotate3d to match another rotation, their rotation axes must align. */
			transform: translateX(100px) rotateZ(70deg) scaleX(1.3);
		}
		#combine {
			transform: rotate(45deg);
		}
		#decomposition {
			/* To interpolate the rotate3d transforms, we need to decompose the matrix, 
			   see the element info in the debugger for the resulting matrix. */
			transform: translateX(100px) rotate3d(1.0, 0, 1.0, 0deg);
		}
		
		/* -- 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>