src/third_party/skia/animations/images#1.xml

<?xml version="1.0" encoding="utf-8" ?> 
<screenplay xmlns="urn:screenplay">

	<event kind="onLoad">
		<matrix id="initialMatrix" translate="[80,80]" />
		<paint  id="imagePaint" antiAlias="true">
			<color color="lightpink" />
		</paint>
		<apply  >
			<paint />
			<set begin="4" field="linearText" to="false" />
		</apply>
		<save>
			<matrix>
				<scale x="0.5" y="0.5" />
			</matrix>
		<image id="backImage" src="redcross.jpg" />
		<save>
			<matrix id="polyMatrix">
				<polyToPoly >
					<polygon>
						<moveTo id="pt1" x="0" y="0" />
						<lineTo id="pt2" x="256" y="0" />
						<lineTo x="256" y="256" />
						<lineTo x="0" y="256" />
						<close />
					</polygon>
					<polygon >
						<moveTo x="0" y="0" />
						<lineTo x="256" y="0" />
						<lineTo x="256" y="256" />
						<lineTo x="0" y="256" />
						<close />
					</polygon>
				</polyToPoly>
			</matrix>
			<paint id="paintFade">
				<color id="fade" />
			</paint>
			<image id="frontImage" src="bulgaria.jpg" />
		</save>
		</save>
		<apply begin="0.5" scope="polyMatrix">
			<animate id="pt1x" target="pt1" field="x" from="0" to="64" dur="0.5" repeat="3" />
			<animate target="pt1" field="y" from="0" to="-455" dur="0.5"  repeat="3"/>
			<animate target="pt2" field="x" from="256" to="192" dur="0.5"  repeat="3" />
			<animate target="pt2" field="y" from="0" to="-455" dur="0.5" repeat="3" />
		</apply>
		<apply begin="1" scope="backImage" >
			<set field="src" to="jet.jpg" />
		</apply>
		<apply begin="1" scope="frontImage" >
			<set field="src" to="redcross.jpg" />
		</apply>
		<apply begin="1.5" scope="backImage" >
			<set field="src" to="fire.jpg" />
		</apply>
		<apply begin="1.5" scope="frontImage" >
			<set field="src" to="jet.jpg" />
		</apply>
		<apply begin="2" scope="backImage" >
			<set field="src" to="chest.jpg" />
		</apply>
		<apply begin="2" scope="frontImage" >
			<set field="src" to="fire.jpg" />
		</apply>
		<apply begin="2" scope="paintFade" >
			<animate field="alpha" target="fade" from="1" to="0" dur=".5" />
		</apply>
		<post target="addCaptionFade" delay="2" />
		<post target="addLineCaption" delay="2" />
		<post target="scaleInitial" delay="3" />
	</event>
	
	<event kind="user" id="addCaptionFade" >
		<apply>
			<paint  > 
				<color id="captionFade" alpha="0" />
			</paint>
			<animate target="captionFade" field="alpha" from="0" to="1" dur="1" />
		</apply>
	</event>
	
	<event kind="user" id="addLineCaption" >
		<paint textSize="24" textAlign="center" > <!--  -->
			<shader  />
		</paint>
		<text text="Images" x="70" y="160" />
	</event>

	<event kind="user" id="scaleInitial" >
		<apply scope="imagePaint" >
			<set field="linearText" to="true" />
		</apply>
		<apply scope="initialMatrix" >
			<animate field="scale" from="1" to=".5" dur="1"/>
			<animate field="translateX" from="80" to="145" dur="1"/>
			<animate field="translateY" from="80" to="172" dur="1"/>
		</apply>
	</event>

</screenplay>