文档章节

常见的四种Animation详解(深入可以制作效果动画)

子曰疯
 子曰疯
发布于 2013/11/21 22:56
字数 3519
阅读 396
收藏 8
anim.xml 放入res文件中自己创建,4种常用的动画效果,每个加入了注释




<?xml version="1.0" encoding="UTF-8"?>   
<set xmlns:android="http://schemas.android.com/apk/res/android">   

     <!--    
         Tween Animation:通过对场景里的对象不断做图像变换(平移、缩放、旋转)产生动画效   

         Alpha:渐变透明度动画效果   
         Scale:渐变尺寸伸缩动画效果   
         Translate:画面转换位置移动动画效果   
         Rotate:画面旋转动画效果   

         Tween Animation 通用属性[类型]    功能     
             Duration[long]  属性为动画持续时间   时间以毫秒为单位   
             fillAfter [boolean] 当设置为true ,该动画转化在动画结束后被应用   
             fillBefore[boolean] 当设置为true ,该动画转化在动画开始前被应用   

             interpolator    指定一个动画的插入器  有一些常见的插入器   
             accelerate_decelerate_interpolator   
             加速-减速 动画插入器   
             accelerate_interpolator   
             加速-动画插入器   
             decelerate_interpolator   
             减速- 动画插入器   
             其他的属于特定的动画效果   
             repeatCount[int]    动画的重复次数    
             RepeatMode[int] 定义重复的行为 1:重新开始  2:plays backward   
             startOffset[long]   动画之间的时间间隔,从上次动画停多少时间开始执行下个动画   
             zAdjustment[int]    定义动画的Z Order的改变 0:保持Z Order不变   
             1:保持在最上层   
             -1:保持在最下层 
      -->   
     <!--   
         透明控制动画    
      -->   
     <alpha   
         android:fromAlpha="0.1"    
         android:toAlpha="1.0"   
         android:duration="3000"   
     />   

     <!-- 尺寸伸缩动画效果 scale   

         属性:interpolator 指定一个动画的插入器   

         有三种动画插入器:   
          accelerate_decelerate_interpolator  加速-减速 动画插入器   
          accelerate_interpolator        加速-动画插入器   
          decelerate_interpolator        减速- 动画插入器   

         其他的属于特定的动画效果   

             fromXScale 属性为动画起始时 X坐标上的伸缩尺寸       
             toXScale   属性为动画结束时 X坐标上的伸缩尺寸        

             fromYScale 属性为动画起始时Y坐标上的伸缩尺寸       
             toYScale   属性为动画结束时Y坐标上的伸缩尺寸       

             说明:   
                  以上四种属性值       
                     0.0表示收缩到没有    
                     1.0表示正常无伸缩        
                     值小于1.0表示收缩     
                     值大于1.0表示放大   

             pivotX     属性为动画相对于物件的X坐标的开始位置   
             pivotY     属性为动画相对于物件的Y坐标的开始位置   
             说明:   
                     以上两个属性值 从0%-100%中取值   
                     50%为物件的X或Y方向坐标上的中点位置   
         长整型值:   
             duration  属性为动画持续时间   
             说明:   时间以毫秒为单位   

         布尔型值:   
             fillAfter 属性 当设置为true ,该动画转化在动画结束后被应用   
     -->   
     <scale 
         android:interpolator="@android :anim/accelerate_decelerate_interpolator"   
         android:repeatCount="1"   

         android:fromXScale="0.5"   
         android:fromYScale="0.5"   
         android:toXScale="1.4"         
         android:toYScale="1.4"   
         android:pivotX="50%"   
         android:pivotY="50%"   
         android:fillAfter="false"   
         android:duration="3000"   

     />   
     <!--    
         画面转换位置移动动画效果 translate   

         fromXDelta toXDelta 为动画、结束起始时 X坐标上的位置      
         fromYDelta toYDelta 为动画、结束起始时 Y坐标上的位置   
      -->   

     <translate   
         android:repeatCount="2"   
         android:fromXDelta="-30"   
         android:fromYDelta="-30"   
         android:toXDelta="-80"         
         android:toYDelta="200"   
         android:duration="3000"   
     />   
     <!--    
         画面转移旋转动画效果 rotate   

         fromDegrees 为动画起始时物件的角度 说明   
             当角度为负数——表示逆时针旋转   
             当角度为正数——表示顺时针旋转   
             (负数from——to正数:顺时针旋转)   
             (负数from——to负数:逆时针旋转)   
             (正数from——to正数:顺时针旋转)   
             (正数from——to负数:逆时针旋转)   
             toDegrees   属性为动画结束时物件旋转的角度 可以大于360度   
         pivotX   
         pivotY  为动画相对于物件的X、Y坐标的开始位  说明:以上两个属性值 从0%-100%中取值   
         50%为物件的X或Y方向坐标上的中点位置   
      -->   
     <rotate   
         android:interpolator="@android :anim/accelerate_interpolator"   
         android:repeatCount="2"   
         android:fromDegrees="0"   
         android:toDegrees="+270"   
         android:pivotX="50%"   
         android:pivotY="50%"   
         android:duration="3000"   
     />   

</set>




-------------------------------J6Activity.java 一个VIEW ,一个BT测试
package gongzibai.co.cc;


import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.animation.Animation;
import android.view.animation.AnimationUtils;
import android.widget.Button;


public class J6Activity extends Activity implements OnClickListener {
     
    /** Called when the activity is first created. */


    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        Button btn = (Button)findViewById(R.id.bt1);
        btn.setOnClickListener(this);
    }  
    @Override 
    public void onClick(View v) { 
        Animation animl = AnimationUtils.loadAnimation(this,R.anim.myanimation);   
//        TextView text = (TextView)findViewById(R.id.tv1);   
//        text.setAnimation(mAnimation);
        findViewById(R.id.tv1).startAnimation(animl); 
    }
}




---------------------main.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    >
<TextView  
    android:textSize="16sp"
    android:layout_marginLeft="100sp"
    android:layout_marginTop="100sp"
    android:id="@+id/tv1"
    android:layout_width="fill_parent" 
    android:layout_height="wrap_content" 
    android:text="欢迎来到棒槌网!"

    />
    <Button
        android:layout_marginTop="260sp"
        android:id="@+id/bt1"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="Animation click"
        />

</LinearLayout>


一、动画类型

Android的animation由四种类型组成:alpha、scale、translate、rotate

XML配置文件中

alpha
渐变透明度动画效果
scale
渐变尺寸伸缩动画效果
translate
画面转换位置移动动画效果
rotate
画面转移旋转动画效果

Java Code代码中  
AlphaAnimation
渐变透明度动画效果
ScaleAnimation
渐变尺寸伸缩动画效果
TranslateAnimation
画面转换位置移动动画效果
RotateAnimation
画面转移旋转动画效果


二、Android动画模式

Animation主要有两种动画模式:tweened 和 frame


  • 一种是tweened animation(渐变动画)


XML中
JavaCode
alpha
AlphaAnimation
scale
ScaleAnimation


  • 一种是frame by frame(画面转换动画)
XML中
JavaCode
translate
TranslateAnimation
rotate
RotateAnimation



三、XML文件中定义动画


① 打开Eclipse,新建Android工程

② 在res目录中新建anim文件夹

③ 在anim目录中新建一个myanim.xml(注意文件名小写)

④ 加入XML的动画代码


01
02
03
04
05
06
07
<fontcolor="#000"><fontface="Arial"><?xmlversion="1.0"encoding="utf-8"?>
<setxmlns:android="http://schemas.android.com/apk/res/android">
  <alpha/>
  <scale/>
  <translate/>
  <rotate/>
</set></font></font>


四、Android XML动画解析

1. Alpha


01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
<fontcolor="#000"><fontface="Arial"><?xmlversion="1.0"encoding="utf-8"?>
<setxmlns:android="http://schemas.android.com/apk/res/android">
<alpha
android:fromAlpha="0.1"
android:toAlpha="1.0"
android:duration="3000"
/>
<!-- 透明度控制动画效果 alpha
        浮点型值:
            fromAlpha 属性为动画起始时透明度
            toAlpha   属性为动画结束时透明度
            说明:
               0.0表示完全透明
               1.0表示完全不透明
            以上值取0.0-1.0之间的float数据类型的数字
 
        长整型值:
            duration  属性为动画持续时间
            说明:     
               时间以毫秒为单位
-->
</set></font></font>


2. Scale

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
<?xmlversion="1.0"encoding="utf-8"?>
<setxmlns:android="http://schemas.android.com/apk/res/android">
   <scale  
         android:interpolator=
                     "@android:anim/accelerate_decelerate_interpolator"
         android:fromXScale="0.0"
         android:toXScale="1.4"
         android:fromYScale="0.0"
         android:toYScale="1.4"
         android:pivotX="50%"
         android:pivotY="50%"
         android:fillAfter="false"
         android:duration="700"/>
</set>
<!-- 尺寸伸缩动画效果 scale
      属性:interpolator 指定一个动画的插入器
        在我试验过程中,使用android.res.anim中的资源时候发现
        有三种动画插入器:
            accelerate_decelerate_interpolator  加速-减速 动画插入器
            accelerate_interpolator                加速-动画插入器
            decelerate_interpolator                减速- 动画插入器
        其他的属于特定的动画效果
      浮点型值:
          
            fromXScale 属性为动画起始时 X坐标上的伸缩尺寸   
            toXScale   属性为动画结束时 X坐标上的伸缩尺寸     
         
            fromYScale 属性为动画起始时Y坐标上的伸缩尺寸   
            toYScale   属性为动画结束时Y坐标上的伸缩尺寸   
         
            说明:
                 以上四种属性值   
    
                    0.0表示收缩到没有
                    1.0表示正常无伸缩     
                    值小于1.0表示收缩  
                    值大于1.0表示放大
         
            pivotX     属性为动画相对于物件的X坐标的开始位置
            pivotY     属性为动画相对于物件的Y坐标的开始位置
         
            说明:
                    以上两个属性值 从0%-100%中取值
                    50%为物件的X或Y方向坐标上的中点位置
         
        长整型值:
            duration  属性为动画持续时间
            说明:   时间以毫秒为单位
 
        布尔型值:
            fillAfter 属性 当设置为true ,该动画转化在动画结束后被应用
-->


3. Translate
代码片段,双击复制
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<?xmlversion="1.0"encoding="utf-8"?>
<setxmlns:android="http://schemas.android.com/apk/res/android">
<translate
android:fromXDelta="30"
android:toXDelta="-80"
android:fromYDelta="30"
android:toYDelta="300"
android:duration="2000"
/>
<!-- translate 位置转移动画效果
        整型值:
            fromXDelta 属性为动画起始时 X坐标上的位置   
            toXDelta   属性为动画结束时 X坐标上的位置
            fromYDelta 属性为动画起始时 Y坐标上的位置
            toYDelta   属性为动画结束时 Y坐标上的位置
            注意:
                     没有指定fromXType toXType fromYType toYType 时候,
                     默认是以自己为相对参照物            
        长整型值:
            duration  属性为动画持续时间
            说明:   时间以毫秒为单位
-->
</set>


4. Rotate
代码片段,双击复制
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
<?xmlversion="1.0"encoding="utf-8"?>
<setxmlns:android="http://schemas.android.com/apk/res/android">
<rotate
        android:interpolator="@android:anim/accelerate_decelerate_interpolator"
        android:fromDegrees="0"
        android:toDegrees="+350"         
        android:pivotX="50%"
        android:pivotY="50%"     
        android:duration="3000"/>  
<!-- rotate 旋转动画效果
      属性:interpolator 指定一个动画的插入器
            在我试验过程中,使用android.res.anim中的资源时候发现
            有三种动画插入器:
               accelerate_decelerate_interpolator           加速-减速 动画插入器
               accelerate_interpolator                       加速-动画插入器
               decelerate_interpolator                       减速- 动画插入器
            其他的属于特定的动画效果
 
      浮点数型值:
            fromDegrees 属性为动画起始时物件的角度   
            toDegrees   属性为动画结束时物件旋转的角度 可以大于360度   
 
 
            说明:
                     当角度为负数——表示逆时针旋转
                     当角度为正数——表示顺时针旋转              
                     (负数from——to正数:顺时针旋转)   
                     (负数from——to负数:逆时针旋转)
                     (正数from——to正数:顺时针旋转)
                     (正数from——to负数:逆时针旋转)      
 
            pivotX     属性为动画相对于物件的X坐标的开始位置
            pivotY     属性为动画相对于物件的Y坐标的开始位置
 
            说明:        以上两个属性值 从0%-100%中取值
                        50%为物件的X或Y方向坐标上的中点位置
 
        长整型值:
            duration  属性为动画持续时间
            说明:       时间以毫秒为单位
-->
</set>


XML 中使用动画效果
代码片段,双击复制
01
02
03
04
05
06
publicstaticAnimation loadAnimation (Context context,intid)
//第一个参数Context为程序的上下文   
//第二个参数id为动画XML文件的引用
//例子:
myAnimation= AnimationUtils.loadAnimation(this, R.anim.my_action);
//使用AnimationUtils类的静态方法loadAnimation()来加载XML中的动画XML文件


五、Java代码中定义动画
代码片段,双击复制
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
//在代码中定义 动画实例对象
privateAnimation myAnimation_Alpha;
privateAnimation myAnimation_Scale;
privateAnimation myAnimation_Translate;
privateAnimation myAnimation_Rotate;
 
   //根据各自的构造方法来初始化一个实例对象
myAnimation_Alpha =newAlphaAnimation(0.1f,1.0f);
 
myAnimation_Scale =newScaleAnimation(0.0f,1.4f,0.0f,1.4f,
            Animation.RELATIVE_TO_SELF,0.5f, Animation.RELATIVE_TO_SELF,0.5f);
 
myAnimation_Translate =newTranslateAnimation(30.0f, -80.0f,30.0f,300.0f);
 
myAnimation_Rotate =newRotateAnimation(0.0f, +350.0f,
               Animation.RELATIVE_TO_SELF,0.5f,Animation.RELATIVE_TO_SELF,0.5f);


六、Android 代码动画解析

1. AlphaAnimation

AlphaAnimation类对象定义
代码片段,双击复制
01
privateAlphaAnimation myAnimation_Alpha;


AlphaAnimation类对象构造
代码片段,双击复制
01
02
03
04
05
06
07
AlphaAnimation(floatfromAlpha,floattoAlpha)
//第一个参数fromAlpha为 动画开始时候透明度
//第二个参数toAlpha为 动画结束时候透明度
myAnimation_Alpha =newAlphaAnimation(0.1f,1.0f);
//说明:
//                0.0表示完全透明
//                1.0表示完全不透明


设置动画持续时间

01
02
myAnimation_Alpha.setDuration(5000);
//设置时间持续时间为 5000毫秒


2. ScaleAnimation
ScaleAnimation类对象定义

01
privateScaleAnimation myAnimation_Scale;


ScaleAnimation类对象构造

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
ScaleAnimation(floatfromX,floattoX,floatfromY,floattoY,
           intpivotXType,floatpivotXValue,intpivotYType,floatpivotYValue)
//第一个参数fromX为动画起始时 X坐标上的伸缩尺寸   
//第二个参数toX为动画结束时 X坐标上的伸缩尺寸     
//第三个参数fromY为动画起始时Y坐标上的伸缩尺寸   
//第四个参数toY为动画结束时Y坐标上的伸缩尺寸  
/*说明:
                    以上四种属性值   
                    0.0表示收缩到没有
                    1.0表示正常无伸缩     
                    值小于1.0表示收缩  
                    值大于1.0表示放大
*/
//第五个参数pivotXType为动画在X轴相对于物件位置类型  
//第六个参数pivotXValue为动画相对于物件的X坐标的开始位置
//第七个参数pivotXType为动画在Y轴相对于物件位置类型   
//第八个参数pivotYValue为动画相对于物件的Y坐标的开始位置
myAnimation_Scale =newScaleAnimation(0.0f,1.4f,0.0f,1.4f,
            Animation.RELATIVE_TO_SELF,0.5f, Animation.RELATIVE_TO_SELF,0.5f);


设置动画持续时间

01
02
myAnimation_Scale.setDuration(700);
//设置时间持续时间为 700毫秒


3. TranslateAnimation

ranslateAnimation类对象定义


01
<font color="#000"><font face="Arial">privateTranslateAnimation myAnimation_Translate;</font></font>

TranslateAnimation类对象构造
代码片段,双击复制
01
02
03
04
05
06
TranslateAnimation(floatfromXDelta,floattoXDelta,
                       floatfromYDelta,floattoYDelta)
//第一个参数fromXDelta为动画起始时 X坐标上的移动位置   
//第二个参数toXDelta为动画结束时 X坐标上的移动位置      
//第三个参数fromYDelta为动画起始时Y坐标上的移动位置     
//第四个参数toYDelta为动画结束时Y坐标上的移动位置


设置动画持续时间

01
02
03
myAnimation_Translate =newTranslateAnimation(10f, 100f, 10f, 100f);
myAnimation_Translate.setDuration(2000);
//设置时间持续时间为 2000毫秒


4. RotateAnimation
RotateAnimation类对象定义

01
privateRotateAnimation myAnimation_Rotate;


RotateAnimation类对象构造

01
02
03
04
05
06
07
08
09
10
RotateAnimation(floatfromDegrees,floattoDegrees,
            intpivotXType,floatpivotXValue,intpivotYType,floatpivotYValue)
//第一个参数fromDegrees为动画起始时的旋转角度   
//第二个参数toDegrees为动画旋转到的角度   
//第三个参数pivotXType为动画在X轴相对于物件位置类型  
//第四个参数pivotXValue为动画相对于物件的X坐标的开始位置
//第五个参数pivotXType为动画在Y轴相对于物件位置类型   
//第六个参数pivotYValue为动画相对于物件的Y坐标的开始位置
myAnimation_Rotate =newRotateAnimation(0.0f, +350.0f,
               Animation.RELATIVE_TO_SELF,0.5f,Animation.RELATIVE_TO_SELF,0.5f);


设置动画持续时间

01
02
myAnimation_Rotate.setDuration(3000);
//设置时间持续时间为 3000毫秒


如何Java代码中使用动画效果
使用从View父类继承过来的方法startAnimation()来为View或是子类View等等添加一个动画效果

01
02
03
04
05
publicvoidstartAnimation (Animation animation)
view.startAnimation(myAnimation_Alpha);
view.startAnimation(myAnimation_Scale);
view.startAnimation(myAnimation_Translate);
view.startAnimation(myAnimation_Rotate);




© 著作权归作者所有

子曰疯
粉丝 5
博文 46
码字总数 27729
作品 0
海淀
技术主管
私信 提问
加载中

评论(1)

敲代码的NY
敲代码的NY
写得很好
Flutter 动画详解(一)

本文主要介绍了动画的原理相关概念,对其他平台的动画做了一个简要的梳理,并简要的介绍了Flutter动画的一些知识。 1. 动画介绍 动画对于App来说,非常的重要。很多App,正是因为有了动画,所...

Q吹个大气球Q
2018/10/29
0
0
NGUI v301 官网详解 Example 3 - Menu

这个例子教会大家 1、实现文本逐个打印的效果 使用 TypewriterEffect 组件 2、强化训练 在NGUI中如何使用 Animation 组件 3、学会使用 Popup Menu 组件 4、学会使用 Scroll Bar 组件 5、学会...

sayme
2014/01/06
3.9K
0
Android属性动画(Animator)的优势

我们现在有一个简单需求:我们的界面中有一个Button和一个ImageView ,我们点击ImageView产生点击事件,然后我们点击Button来移动这个ImageView,让这个ImageView沿着X轴移动500,并且在移动之...

peter_wang2012
2015/09/22
3K
2
android动画简介

android中动画分为2种: Tween Animation:通过对场景里的对象不断做图像变换(平移、缩放、旋转)产生动画效果,即是一种渐变动画; Frame Animation:顺序播放事先做好的图像,是一种画面转换...

长平狐
2013/12/25
171
0
深入CSS3 动画效果的总结详解

CSS3添加了几个动画效果的属性,通过设置这些属性,可以做出一些简单的动画效果而不需要再去借助JavaScript。CSS3动画的属性主要分为三类:transform、transition以及animation。 transform ...

mjx陌上花开
2014/04/07
160
0

没有更多内容

加载失败,请刷新页面

加载更多

关于运维,该怎么决定它的方向,这个似工作又似兴趣的存在

我之前主要从事网络、桌面、机房管理等相关工作,这些工作使我迷惘,这应该是大多数运维人都经历过的过程; 18年国庆,我从国内前三的消费金融公司裸辞,下海创业,就是想要摆脱这样的困境。...

网络小虾米
5分钟前
1
0
Java Timer的用法

Timer timer = new Timer(); timer.schedule(new TimerTask() { public void run() { System.out.println("11232"); } }, 200000 , 1000); public void schedule(TimerTask task, long delay......

林词
8分钟前
3
0
使用js动态加载外部js文件以及动态创建script脚本

动态脚本指的是在页面加载时不存在,但将来的某一时刻通过修改该DOM动态添加的脚本。和操作HTML元素一样,创建动态脚本也有两种方式:插入外部文件和直接插入JavaScript代码。 动态加载外的外...

Bing309
16分钟前
2
0
从零开始入门 K8s | Kubernetes 网络概念及策略控制

作者 | 阿里巴巴高级技术专家 叶磊 一、Kubernetes 基本网络模型 本文来介绍一下 Kubernetes 对网络模型的一些想法。大家知道 Kubernetes 对于网络具体实现方案,没有什么限制,也没有给出特...

阿里巴巴云原生
20分钟前
2
0
天气获取

本文转载于:专业的前端网站➨天气获取 $.get("http://wthrcdn.etouch.cn/WeatherApi", { citykey: cityCode }, function (d) { //创建文档对象 var parser = new ......

前端老手
20分钟前
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部