6.1 窗口动画
<p>可以给对话框布局文件的【SkinDialog】节点，加上动画属性【Animation="xxx"】。当对话框打开和关闭时，显示窗口动画。</p>
<h2>1 SizeChange动画</h2>
<p>SizeChange动画有一个固定点。默认情况下，固定点在窗口正中心。</p>
<h4>1.1 固定中心点的SizeChange动画</h4>
<ul>
<li>对话框打开时，中心像素点保持不动，其他像素点由中心点向四个角展开，透明度由完全透明到完全不透明；</li>
<li>对话框关闭时，中心像素点保持不动，其他像素点由四个角向中心点收拢，透明度由完全不透明到完全透明。</li>
</ul>
<h4>效果图</h4>
<p><img src="http://www.skinui.cn/doc/img/6/1/1.gif" alt="固定中心点的SizeChange动画" /></p>
<h4>布局文件</h4>
<pre><code class="language-xml">&lt;SkinDialog DefaultWidth=&quot;400&quot; DefaultHeight=&quot;300&quot; SysButton=&quot;CLOSE&quot; Animation=&quot;SizeChange&quot;&gt;
&lt;/SkinDialog&gt;</code></pre>
<h4>1.2 固定左上角的SizeChange动画</h4>
<ul>
<li>对话框打开时，左上角像素点保持不动，其他像素点由左上角向其他角展开，透明度由完全透明到完全不透明；</li>
<li>对话框关闭时，左上角像素点保持不动，其他像素点由其他角向左上角收拢，透明度由完全不透明到完全透明。</li>
</ul>
<h4>效果图</h4>
<p><img src="http://www.skinui.cn/doc/img/6/1/2.gif" alt="固定左上角的SizeChange动画" /></p>
<h4>布局文件</h4>
<pre><code class="language-xml">&lt;SkinDialog DefaultWidth=&quot;400&quot; DefaultHeight=&quot;300&quot; SysButton=&quot;CLOSE&quot; Animation=&quot;SizeChange&quot; FixedPoint=&quot;0,0&quot;&gt;
&lt;/SkinDialog&gt;</code></pre>
<h4>1.3 固定右上角的SizeChange动画</h4>
<ul>
<li>对话框打开时，右上角像素点保持不动，其他像素点由右上角向其他角展开，透明度由完全透明到完全不透明；</li>
<li>对话框关闭时，右上角像素点保持不动，其他像素点由其他角向右上角收拢，透明度由完全不透明到完全透明。</li>
</ul>
<h4>效果图</h4>
<p><img src="http://www.skinui.cn/doc/img/6/1/3.gif" alt="固定右上角的SizeChange动画" /></p>
<h4>布局文件</h4>
<pre><code class="language-xml">&lt;SkinDialog DefaultWidth=&quot;400&quot; DefaultHeight=&quot;300&quot; SysButton=&quot;CLOSE&quot; Animation=&quot;SizeChange&quot; FixedPoint=&quot;400,0&quot;&gt;
&lt;/SkinDialog&gt;</code></pre>
<h4>1.4 固定右下角的SizeChange动画</h4>
<ul>
<li>对话框打开时，右下角像素点保持不动，其他像素点由右下角向其他角展开，透明度由完全透明到完全不透明；</li>
<li>对话框关闭时，右下角像素点保持不动，其他像素点由其他角向右下角收拢，透明度由完全不透明到完全透明。</li>
</ul>
<h4>效果图</h4>
<p><img src="http://www.skinui.cn/doc/img/6/1/4.gif" alt="固定右下角的SizeChange动画" /></p>
<h4>布局文件</h4>
<pre><code class="language-xml">&lt;SkinDialog DefaultWidth=&quot;400&quot; DefaultHeight=&quot;300&quot; SysButton=&quot;CLOSE&quot; Animation=&quot;SizeChange&quot;FixedPoint=&quot;400,300&quot;&gt;
&lt;/SkinDialog&gt;</code></pre>
<h4>1.5 固定左下角的SizeChange动画</h4>
<ul>
<li>对话框打开时，左下角像素点保持不动，其他像素点由左下角向其他角展开，透明度由完全透明到完全不透明；</li>
<li>对话框关闭时，左下角像素点保持不动，其他像素点由其他角向左下角收拢，透明度由完全不透明到完全透明。</li>
</ul>
<h4>效果图</h4>
<p><img src="http://www.skinui.cn/doc/img/6/1/5.gif" alt="固定左下角的SizeChange动画" /></p>
<h4>布局文件</h4>
<pre><code class="language-xml">&lt;SkinDialog DefaultWidth=&quot;400&quot; DefaultHeight=&quot;300&quot; SysButton=&quot;CLOSE&quot; Animation=&quot;SizeChange&quot;FixedPoint=&quot;0,300&quot;&gt;
&lt;/SkinDialog&gt;</code></pre>
<h4>2 LeftRightExpand动画</h4>
<p>LeftRightExpand有一条固定线。默认情况下，固定线为窗口居中垂直线。</p>
<h4>2.1 固定线为窗口居中垂直线的LeftRightExpand动画</h4>
<ul>
<li>对话框打开时，居中垂直线像素点保持不动，其他像素点由居中垂直线向左右展开，透明度由完全透明到完全不透明；</li>
<li>对话框关闭时，居中垂直线像素点保持不动，其他像素点由左右向居中垂直线收拢，透明度由完全不透明到完全透明。</li>
</ul>
<h4>效果图</h4>
<p><img src="http://www.skinui.cn/doc/img/6/2/1.gif" alt="固定线为窗口居中垂直线的LeftRightExpand动画" /></p>
<h4>布局文件</h4>
<pre><code class="language-xml">&lt;SkinDialog DefaultWidth=&quot;400&quot; DefaultHeight=&quot;300&quot; SysButton=&quot;CLOSE&quot; Animation=&quot;LeftRightExpand&quot;&gt;
&lt;/SkinDialog&gt;</code></pre>
<h4>2.2 固定线为左边垂直线的LeftRightExpand动画</h4>
<ul>
<li>对话框打开时，左边垂直线像素点保持不动，其他像素点由左边垂直线向右展开，透明度由完全透明到完全不透明；</li>
<li>对话框关闭时，左边垂直线像素点保持不动，其他像素点由右向左边垂直线收拢，透明度由完全不透明到完全透明。</li>
</ul>
<h4>效果图</h4>
<p><img src="http://www.skinui.cn/doc/img/6/2/2.gif" alt="固定线为左边垂直线的LeftRightExpand动画" /></p>
<h4>布局文件</h4>
<pre><code class="language-xml">&lt;SkinDialog DefaultWidth=&quot;400&quot; DefaultHeight=&quot;300&quot; SysButton=&quot;CLOSE&quot; Animation=&quot;LeftRightExpand&quot; FixedPoint=&quot;0,0&quot;&gt;
&lt;/SkinDialog&gt;</code></pre>
<h4>2.3 固定线为右边垂直线的LeftRightExpand动画</h4>
<ul>
<li>对话框打开时，左边垂直线像素点保持不动，其他像素点由左边垂直线向右展开，透明度由完全透明到完全不透明；</li>
<li>对话框关闭时，左边垂直线像素点保持不动，其他像素点由右向左边垂直线收拢，透明度由完全不透明到完全透明。</li>
</ul>
<h4>效果图</h4>
<p><img src="http://www.skinui.cn/doc/img/6/2/3.gif" alt="固定线为右边垂直线的LeftRightExpand动画" /></p>
<h4>布局文件</h4>
<pre><code class="language-xml">&lt;SkinDialog DefaultWidth=&quot;400&quot; DefaultHeight=&quot;300&quot; SysButton=&quot;CLOSE&quot; Animation=&quot;LeftRightExpand&quot; FixedPoint=&quot;400,300&quot;&gt;
&lt;/SkinDialog&gt;</code></pre>
<h4>3 TopBottomExpand动画</h4>
<p>TopBottomExpand有一条固定线。默认情况下，固定线为窗口居中垂直线。</p>
<h4>3.1 固定线为窗口居中水平线的TopBottomExpand动画</h4>
<ul>
<li>对话框打开时，居中水平线像素点保持不动，其他像素点由居中水平线向上下展开，透明度由完全透明到完全不透明；</li>
<li>对话框关闭时，居中水平线像素点保持不动，其他像素点由上下向居中水平线收拢，透明度由完全不透明到完全透明。</li>
</ul>
<h4>效果图</h4>
<p><img src="http://www.skinui.cn/doc/img/6/3/1.gif" alt="固定线为窗口居中水平线的TopBottomExpand动画" /></p>
<h4>布局文件</h4>
<pre><code class="language-xml">&lt;SkinDialog DefaultWidth=&quot;400&quot; DefaultHeight=&quot;300&quot; SysButton=&quot;CLOSE&quot; Animation=&quot;TopBottomExpand&quot;&gt;
&lt;/SkinDialog&gt;</code></pre>
<h4>3.2 固定线为上边水平线的TopBottomExpand动画</h4>
<ul>
<li>对话框打开时，上边水平线像素点保持不动，其他像素点由上边水平线向下展开，透明度由完全透明到完全不透明；</li>
<li>对话框关闭时，上边水平线像素点保持不动，其他像素点由下向上边水平线收拢，透明度由完全不透明到完全透明。</li>
</ul>
<h4>效果图</h4>
<p><img src="http://www.skinui.cn/doc/img/6/3/2.gif" alt="固定线为上边水平线的TopBottomExpand动画" /></p>
<h4>布局文件</h4>
<pre><code class="language-xml">&lt;SkinDialog DefaultWidth=&quot;400&quot; DefaultHeight=&quot;300&quot; SysButton=&quot;CLOSE&quot; Animation=&quot;TopBottomExpand&quot; FixedPoint=&quot;0,0&quot;&gt;
&lt;/SkinDialog&gt;</code></pre>
<h4>3.3 固定线为下边水平线的TopBottomExpand动画</h4>
<ul>
<li>对话框打开时，下边水平线像素点保持不动，其他像素点由下边水平线向上展开，透明度由完全透明到完全不透明；</li>
<li>对话框关闭时，下边水平线像素点保持不动，其他像素点由上向下边水平线收拢，透明度由完全不透明到完全透明。</li>
</ul>
<h4>效果图</h4>
<p><img src="http://www.skinui.cn/doc/img/6/3/3.gif" alt="固定线为下边水平线的TopBottomExpand动画" /></p>
<h4>布局文件</h4>
<pre><code class="language-xml">&lt;SkinDialog DefaultWidth=&quot;400&quot; DefaultHeight=&quot;300&quot; SysButton=&quot;CLOSE&quot; Animation=&quot;TopBottomExpand&quot; FixedPoint=&quot;400,300&quot;&gt;
&lt;/SkinDialog&gt;</code></pre>