atelier:mitsuba

i love UI/UX, Blend, XAML, Behavior, P5, oF, Web, Tangible Bits and Physical computing. なにかあればお気軽にご連絡ください。atelier@c-mitsuba.com

その44:Behaviorで変更する値の間を補間する

経緯

とっても簡単です。
プロパティの値を変えるには、このブログで何度も扱ったChangePropertyActionがありますね。
Rectangleのwidthを500pxの変えるビヘイビアをボタンがクリックしたら実行するようにしました。

ボタンをおすとー

一瞬で変わってしまいます。

そこでビヘイビアのAnimationプロパティを使います。
Animationタブを開いて任意の時間をhh:mm:ssの形式で手入力します。
Storyboardで利用できるイージングも適用できます。
今回は0:0:10でやってみました。

実行すると、10秒かけてだんだん値が変わっていきます


ちなみにxamlでかくとこんなかんじ。

		<Button Content="実行" HorizontalAlignment="Left" VerticalAlignment="Top" Width="75" Margin="55,114,0,0" Height="45">
			<i:Interaction.Triggers>
				<i:EventTrigger EventName="Click">
					<ei:ChangePropertyAction TargetName="rectangle" PropertyName="Width" Value="500" Duration="0:0:10"/>
				</i:EventTrigger>
			</i:Interaction.Triggers>
		</Button>

ねっ、簡単でしょう!