xref: /third_party/skia/animations/text#1.xml

<?xml version="1.0" encoding="utf-8" ?> 
<screenplay xmlns="urn:screenplay">
	<text id="partial" />
	<text id="type" text="Typewriter" />
	<int id="typeLength" value="0" />
	
	<event kind="onLoad" >
		<matrix id="initialMatrix" translate="[65,100]" />
		<paint id="textPaint" textSize="36"  antiAlias="true" linearText="false" >
			<color color="lightBlue" />
		</paint>
		<apply  >
			<paint />
			<set begin="3" field="linearText" to="false" />
		</apply>
		<matrix translate="[0,60]" />
		<rect top="textPaint.ascent" width="textPaint.measureText(type.text)" 
			height="-textPaint.ascent+textPaint.descent" />
		<paint>
			<linearGradient points="[0,25,205,25]"  tileMode="mirror" >
				<matrix>
					<scale x="3" y="2" />
				</matrix>
				<color color="brown" />
				<color color="yellow" />
			</linearGradient>
		</paint>
		<add use="partial" />
		<textOnPath text="partial"  offset="220" >
			<path >
				<addOval left="0" right="160" top="-70" bottom="30" direction="cw" />
			</path>
		</textOnPath>
		<textOnPath text="partial"  offset="20" >
			<path >
				<addOval left="0" right="160" top="-50" bottom="50" direction="cw" />
			</path>
		</textOnPath>
		<apply mode="immediate" steps="type.length-1" >
			<post target="nextChar" />
			<animate field="delay" from="0.1" to="0.95" />
		</apply>
		<post target="addCaptionFade" delay="1" />
		<post target="addLineCaption" delay="1" />
		<post target="scaleInitial" delay="2" />
	</event>
	
	<event kind="user" id="nextChar" >
		<apply id="applyTypeLength" scope="typeLength" >
			<set id="incValue" field="value" to="typeLength.value + 1" />
		</apply>
		<apply id="applySlice" scope="partial">
			<set id="setSlice" field="text" to="#script:type.text.slice(0, typeLength.value)" />
		</apply>
	</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="Text" x="textPaint.measureText(type.text)/2" y="40" />
	</event>
	
	<event kind="user" id="scaleInitial" >
		<apply scope="textPaint" >
			<set field="linearText" to="true" />
		</apply>
		<apply scope="initialMatrix" >
			<animate field="scale" from="1" to=".5" dur="1"/>
			<animate field="translateX" from="65" to="130" dur="1"/>
			<animate field="translateY" from="100" to="30" dur="1"/>
		</apply>
	</event>
	
</screenplay>