6.2 切换动画
<p>类【CSwitchAnimationHost】提供切换动画的能力。</p>
<p>可以给布局文件的【SwitchAnimationHost】节点，加上动画属性【Animation="xxx"】。</p>
<p>SkinUI内置以下两种切换动画：</p>
<ul>
<li>LeftRightSlide动画，切换时，内容左右滑动；</li>
<li>TopBottomSlide动画，切换时，内容上下滑动。</li>
</ul>
<h2>相关方法</h2>
<pre><code class="language-c">void ShowView(LONG nId);
void ShowView(CSkinView* pView);</code></pre>
<h2>请看下面的示例</h2>
<h3>1 LeftRightSlide动画</h3>
<h4>效果图</h4>
<p><img src="http://www.skinui.cn/doc/img/6/4/1.png" alt="LeftRightSlide动画1" />
<img src="http://www.skinui.cn/doc/img/6/4/2.png" alt="LeftRightSlide动画2" />
<img src="http://www.skinui.cn/doc/img/6/4/3.png" alt="LeftRightSlide动画3" /></p>
<h4>布局文件</h4>
<pre><code class="language-xml">&lt;SkinDialog DefaultWidth=&quot;400&quot; DefaultHeight=&quot;300&quot; SysButton=&quot;CLOSE&quot; Icon=&quot;128&quot; Caption=&quot;IDS_SWITCH_ANIMATION1&quot; Animation=&quot;SizeChange&quot; ThemeHeight=&quot;65&quot;&gt;
&lt;SkinAnimationGroup Id=&quot;100&quot; LayoutWidth=&quot;210&quot; LayoutHeight=&quot;30&quot; AlignParentLeft=&quot;0&quot; AlignParentTop=&quot;35&quot;&gt;
&lt;SkinRelativeLayout LayoutWidth=&quot;FillParent&quot; LayoutHeight=&quot;FillParent&quot;&gt;
&lt;SkinRadioButton Id=&quot;101&quot; LayoutWidth=&quot;100&quot; LayoutHeight=&quot;FillParent&quot; ChildText1=&quot;TabButton1&quot; Image=&quot;TabButton.png&quot; Layout=&quot;TabButton.xml&quot; BindView=&quot;1100&quot; AlignParentLeft=&quot;0&quot; Checked=&quot;true&quot;/&gt;
&lt;SkinRadioButton Id=&quot;102&quot; LayoutWidth=&quot;100&quot; LayoutHeight=&quot;FillParent&quot; ChildText1=&quot;TabButton2&quot; Image=&quot;TabButton.png&quot; Layout=&quot;TabButton.xml&quot; BindView=&quot;1200&quot; AlignParentLeft=&quot;100&quot; Radius=&quot;5&quot;/&gt;
&lt;/SkinRelativeLayout&gt;
&lt;/SkinAnimationGroup&gt;
&lt;SwitchAnimationHost Id=&quot;1000&quot; AlignParentLeft=&quot;15&quot; ToBottomOf=&quot;100,5&quot; AlignParentRight=&quot;15&quot; AlignParentBottom=&quot;15&quot; Animation=&quot;LeftRightSlide&quot;&gt;
&lt;SkinRelativeLayout Id=&quot;1100&quot; LayoutWidth=&quot;FillParent&quot; LayoutHeight=&quot;FillParent&quot;&gt;
&lt;/SkinRelativeLayout&gt;
&lt;SkinRelativeLayout Id=&quot;1200&quot; LayoutWidth=&quot;FillParent&quot; LayoutHeight=&quot;FillParent&quot; Visible=&quot;false&quot;&gt;
&lt;/SkinRelativeLayout&gt;
&lt;/SwitchAnimationHost&gt;
&lt;/SkinDialog&gt;</code></pre>
<p>以上的代码，当选中SkinRadioButton时，会以动画的方式显示属性BindView绑定的SkinRelativeLayout。</p>
<h3>2 TopBottomSlide动画</h3>
<h4>效果图</h4>
<p><img src="http://www.skinui.cn/doc/img/6/5/1.png" alt="TopBottomSlide动画1" />
<img src="http://www.skinui.cn/doc/img/6/5/2.png" alt="TopBottomSlide动画2" />
<img src="http://www.skinui.cn/doc/img/6/5/3.png" alt="TopBottomSlide动画3" /></p>
<h4>布局文件</h4>
<pre><code class="language-xml">&lt;SkinDialog DefaultWidth=&quot;400&quot; DefaultHeight=&quot;300&quot; SysButton=&quot;CLOSE&quot; Icon=&quot;128&quot; Caption=&quot;IDS_SWITCH_ANIMATION2&quot; Animation=&quot;SizeChange&quot; ThemeHeight=&quot;65&quot;&gt;
&lt;SkinAnimationGroup Id=&quot;100&quot; LayoutWidth=&quot;210&quot; LayoutHeight=&quot;30&quot; AlignParentLeft=&quot;0&quot; AlignParentTop=&quot;35&quot;&gt;
&lt;SkinRadioButton Id=&quot;101&quot; LayoutWidth=&quot;100&quot; LayoutHeight=&quot;FillParent&quot; ChildText1=&quot;TabButton1&quot; Image=&quot;TabButton.png&quot; Layout=&quot;TabButton.xml&quot; BindView=&quot;1100&quot; AlignParentLeft=&quot;0&quot; Checked=&quot;true&quot;/&gt;
&lt;SkinRadioButton Id=&quot;102&quot; LayoutWidth=&quot;100&quot; LayoutHeight=&quot;FillParent&quot; ChildText1=&quot;TabButton2&quot; Image=&quot;TabButton.png&quot; Layout=&quot;TabButton.xml&quot; BindView=&quot;1200&quot; AlignParentLeft=&quot;100&quot; Radius=&quot;5&quot;/&gt;
&lt;/SkinAnimationGroup&gt;
&lt;SwitchAnimationHost Id=&quot;1000&quot; AlignParentLeft=&quot;15&quot; ToBottomOf=&quot;100,15&quot; AlignParentRight=&quot;15&quot; AlignParentBottom=&quot;15&quot; Animation=&quot;TopBottomSlide&quot;&gt;
&lt;SkinRelativeLayout Id=&quot;1100&quot; LayoutWidth=&quot;FillParent&quot; LayoutHeight=&quot;FillParent&quot; Color=&quot;ID_COLOR_RED&quot;&gt;
&lt;/SkinRelativeLayout&gt;
&lt;SkinRelativeLayout Id=&quot;1200&quot; LayoutWidth=&quot;FillParent&quot; LayoutHeight=&quot;FillParent&quot; Color=&quot;ID_COLOR_GREEN&quot; Visible=&quot;false&quot;&gt;
&lt;/SkinRelativeLayout&gt;
&lt;/SwitchAnimationHost&gt;
&lt;/SkinDialog&gt;</code></pre>
<p>以上的代码，当选中SkinRadioButton时，会以动画的方式显示属性BindView绑定的SkinRelativeLayout。</p>