颇有花花公子玩腻了找个良家结婚的意味。但两个按钮实际用起来很不顺手，手感也不好，尤其状态切换时会有种撕裂的感觉，越用越不爽，最后还是花时间又做了一个状态按钮PomodoroStateButton。这个按钮目标是要低调又炫丽，可以匹配OnePomodoro的多个主题。期间试玩了很多种技术，最后留下了这个成果：

看起来简直就是平平无奇。

下面说说实现细节。

2. 按钮状态

顺便提一下其它的变形方案。

HandyControl提供了GeometryAnimation，可以像使用其它线性动画那样使用变形动画：

Copy
<hc:GeometryAnimationUsingKeyFrames Storyboard.TargetProperty="Data" Storyboard.TargetName="PathDemo">     <hc:DiscreteGeometryKeyFrame KeyTime="0:0:0.7" Value="{StaticResource FaceBookGeometry}"/>     <hc:EasingGeometryKeyFrame KeyTime="0:0:1.2" Value="{StaticResource TwitterGeometry}">         <hc:EasingGeometryKeyFrame.EasingFunction>             <QuarticEase EasingMode="EaseInOut"/>         </hc:EasingGeometryKeyFrame.EasingFunction>     </hc:EasingGeometryKeyFrame> </hc:GeometryAnimationUsingKeyFrames>

也可以使用MorphSVG，或类似的SVG变形库：

5. 传递AlphaMask

7. 圆周动画#

PomodoroStateButton在Inwork和Break之间切换的时候让左右两边的蓝色和红色阴影做半圈圆周运动交换位置，虽然也可以将就些，但当时太闲了就讲究起来了。

之前 介绍ProgressRing的文章 里说过怎么做圆周运动，简单来说就是把元素放到一个大的容器里，对整个容器做旋转。

Copy
<Page.Resources>     <Storyboard RepeatBehavior="Forever" x:Key="Sb" >         <DoubleAnimation Storyboard.TargetName="E1R" BeginTime="0" Storyboard.TargetProperty="Angle" Duration="0:0:4" To="360"/>     </Storyboard> </Page.Resources> <Grid Background=