CSS动画模块级3:创建动画

密西西比河

相关信息

• CSS动画模块3级指南
• CSS动画模块3级为移动WEB API
• CSS动画模块三级网络API可穿戴
  

本教程演示了如何在您的应用程序创建动画。
热身


熟悉CSS动画模块3级API通过学习基本知识:
创建一个标志动画动画Tizen标志在屏幕上。

• 显示所有
• 隐藏所有
  

• 创建一个标志动画隐藏
  
  增强用户体验的应用程序,你必须学会创造一个标志动画,元素属性为每个元素和关键帧可以被指定和修改。 标志动画出现的类似于动画Tizen设备(或模拟器)时开启:
  
  • 没有元素最初是显示在屏幕上。
  • Tizen标志逐渐出现在屏幕的中间,右移,它变得更小。
  • 每个字母的单词“TIZEN”连续在来自屏幕的左和右移至正确的位置。
    
  图:标志动画(仅在移动应用程序中)

创建一个标志动画:

• 创建HTML布局的动画。 能够单独管理每个动画部分的运动,你必须为每个部分定义单个元素。
  

1. <div class="animation-holder">
   
2.    <span class="tizen-txt t"></span>
   
3.    <span class="tizen-txt i"></span>
   
4.    <span class="tizen-txt z"></span>
   
5.    <span class="tizen-txt e"></span>
   
6.    <span class="tizen-txt n"></span>
   
7.    <span class="tizen-txt tm"></span>
   
8.    <span class="tizen-logo"></span>
   
9. </div>

复制代码

2.定义动画的基本风格:

1. <div class="blockcode"><blockquote>.example-body {width: 320px; height: 480px; background: #000; margin: 0 auto;
   
2.                position: relative; border: 2px solid #fff; overflow: hidden;}
   
3. .animation-holder {width: 280px; height: 88px; position: absolute;
   
4.                    left: 50%; top: 50%; margin: -54px 0 0 -140px;}
   
5. 
   
6. .tizen-txt, .tizen-logo {position: absolute; display: block;
   
7.                          background-repeat: no-repeat; background-position: 50% 50%}
   
8. .tizen-txt.t {width: 48px; height: 56px; background-image: url(images/txt_t.png);}
   
9. .tizen-txt.i {width: 15px; height: 56px; background-image: url(images/txt_i.png);}
   
10. .tizen-txt.z {width: 46px; height: 56px; background-image: url(images/txt_z.png);}
    
11. .tizen-txt.e {width: 45px; height: 56px; background-image: url(images/txt_e.png);}
    
12. .tizen-txt.n {width: 54px; height: 58px; background-image: url(images/txt_n.png);}
    
13. .tizen-txt.tm {width: 11px; height: 6px; background-image: url(images/txt_tm.png);}
    
14. .tizen-logo {width: 220px; height: 211px; left: 30px; top: -61px;
    
15.              background-image: url(images/logo_tizen.png); background-size: 100% 100%;}

复制代码

3.创建动画:

• 确保所有的动画元素在相同的时间内,一些常见的属性定义的动画。 动画的运动时间是7秒,动画重复无限。
  当一个动画,重复被激活时,它可以看起来不自然,当它突然返回到其原始位置后完成一次迭代。 重复移动自然,设置animation-direction 财产 alternate。 交替方向意味着在动画奇怪的迭代所得的法线方向(关键帧从关键帧的0%到0%),而在关键帧甚至迭代是在相反的方向从100%降至0%。
  

1. .tizen-txt, .tizen-logo
   
2. {
   
3.    -webkit-animation-duration: 7s;
   
4.    -webkit-animation-iteration-count: infinite;
   
5.    -webkit-animation-direction: alternate;
   
6. }

复制代码

2.创建关键帧来实现流Tizen标识:

• 在第一次动画总数的25%的上场时间(7秒),透明度消失和Tizen标志出现。
• 在25 - 50%的上场时间,标志的尺寸变小了,小如的宽度和高度值降低,由于左和最高价值,标志是将屏幕的右上角。
• 在50 - 100%的上场时间,不改变的值,标志仍在其新位置。
  

1. @-webkit-keyframes tizen-logo
   
2. {
   
3.    0% {width: 220px; height: 211px; left: 30px; top: -61px; opacity: 0;}
   
4.    25% {width: 220px; height: 211px; left: 30px; top: -61px; opacity: 1;}
   
5.    50% {left: 247px; top: 0px; width: 33px; height: 32px; opacity: 1;}
   
6.    100% {left: 247px; top: 0px; width: 33px; height: 32px; opacity: 1;}
   
7. }

复制代码

1. <font size="4" color="#ff0000"><b>注意: 如果没有定义,100%的关键帧动画执行基于最初的属性,和标志的大小增加到原来的大小。</b></font>

复制代码

3.创建关键帧来实现流程的每个字母词“TIZEN”:

• 隐藏这封信最初,财产已被分配在屏幕外0%的关键帧。 首先允许Tizen标志出现,第一个字母介绍在30%的关键帧。
• 创建一个轻微的碰撞动画,这封信元素移动到-10 px的最终价值40%的关键帧到达其最终0 px值在45%的关键帧。
• 的 animation-timing-function 为每个关键帧点属性可以改变,用于确定动画的速度。 当信实际上是显示在屏幕上,搬到其最终位置,方便进出使用定时功能。
  

显示字母一次,时间为每个连续推迟一点信:

1. <!--Letter T-->
   
2. @-webkit-keyframes tizen-txt-t
   
3. {
   
4.    0% {left: 340px; top: 31px;}
   
5.    30% {left: 340px; top: 31px; animation-timing-function: ease-in;}
   
6.    40% {left: -10px; top: 31px; animation-timing-function: ease-out;}
   
7.    45% {left: 0; top: 31px;}
   
8.    100% {left: 0; top: 31px;}
   
9. }
   
10. 
    
11. <!--Letter I-->
    
12. @-webkit-keyframes tizen-txt-i
    
13. {
    
14.    0% {left: 340px; top: 31px;}
    
15.    40% {left: 340px; top: 31px; animation-timing-function: ease-in;}
    
16.    50% {left: 47px; top: 31px; animation-timing-function: ease-out;}
    
17.    55% {left: 57px; top: 31px;}
    
18.    100% {left: 57px; top: 31px;}
    
19. }
    
20. 
    
21. <!--Remaining letters-->

复制代码

4.创建的所有关键帧后,定义 animation-name 为每个元素属性:

1. .tizen-txt.t
   
2. {
   
3.    -webkit-animation-name: tizen-txt-t;
   
4. }
   
5. .tizen-txt.i
   
6. {
   
7.    -webkit-animation-name: tizen-txt-i;
   
8. }

复制代码

源代码

这个用例相关的完整源代码,看到下面的文件:

• animation_practical.html
• logo_tizen.png
• txt_e.png
• txt_i.png
• txt_n.png
• txt_t.png
• txt_tm.png
• txt_z.png