Android Animation 动画介绍与详解

作者: 枫羽望空 | 来源:发表于2017-02-20 15:36 被阅读253次

一、Animation 动画属性

动画相关的属性：SET属性

名称	属性	备注
android:shareInterpolator	是否共享插入器	共享时，四个子节点都用一个插入器
android:interpolator	指定一个动画的插入器	使用系统资源
android:fillEnabled		当设置为true时，fillAfter和fillBefroe将会都为true，此时会忽略fillBefore 和fillAfter两种属性
android:fillAfter	该动画转化是否在动画结束后被应用	boolean
android:fillBefore	该动画转化是否在动画开始前被应用	boolean
android:repeatMode	重复模式	"restart" =从头开始或者 "reverse"=从末尾开始
android:repeatCount	重复次数	integer -1为无限循环
android:duration	动画持续时间	integer
android:startOffset	动画时间间隔（动画执行前停留时间）	long
android:zAdjustment	定义动画z order的变换	[normal] or [top] or [bottom]
android:detachWallpaper	未知	boolean

二、Animation 动画类型

Android的animation由四种类型组成：

XML中

名称	作用
alph	渐变透明度动画效果
scale	渐变尺寸伸缩动画效果
translate	画面转换位置移动动画效果
rotate	画面转移旋转动画效果

JavaCode中

名称	作用
AlphaAnimation	渐变透明度动画效果
ScaleAnimation	渐变尺寸伸缩动画效果
TranslateAnimation	画面转换位置移动动画效果
RotateAnimation	画面转移旋转动画效果

三、Android动画模式

Animation主要有两种动画模式：

一种是tweened animation(渐变动画)

XML中	JavaCode
alpha	AlphaAnimation
scale	ScaleAnimation

一种是frame by frame(画面转换动画)

XML中	JavaCode
translate	TranslateAnimation
rotate	RotateAnimation

四、如何在XML文件中定义动画

步骤如下：

新建 Android 项目
在res目录中新建anim文件夹
在anim目录中新建一个my_anim.xml(注意文件名小写)
在 my_anim.xml 加入动画代码

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android" >
    <alpha />
    <scale />
    <translate />
    <rotate />
</set>

五、Android XML动画解析

Alpha

<?xml version="1.0" encoding="utf-8"?>
<set xmlns: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>

Scale

<?xml version="1.0" encoding="utf-8"?>
<set xmlns: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 ，该动画转化在动画结束后被应用
-->

Translate

<?xml version="1.0" encoding="utf-8"?>
<set xmlns: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>

Rotate

<?xml version="1.0" encoding="utf-8"?>
<set xmlns: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中使用动画效果

public static Animation loadAnimation (Context context, int id) 
//第一个参数Context为程序的上下文    
//第二个参数id为动画XML文件的引用
//例子：
myAnimation= AnimationUtils.loadAnimation(this, R.anim.my_action);
//使用AnimationUtils类的静态方法loadAnimation()来加载XML中的动画XML文件

六、Java代码实现上述动画

xml代码

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    style="@style/MatchMatch"
    android:orientation="vertical"
    tools:context="com.example.administrator.foundationdemo.animation.AnimationActivity">

    <LinearLayout
        android:orientation="horizontal"
        style="@style/MatchWrap">
        <Button
            android:id="@+id/tweened_rotate_btn"
            style="@style/WrapWrap"
            android:text="旋转" />
        <Button
            android:id="@+id/tweened_scale_btn"
            style="@style/WrapWrap"
            android:text="缩放" />
        <Button
            android:id="@+id/tweened_alpha_btn"
            style="@style/WrapWrap"
            android:text="淡入淡出" />
        <Button
            android:id="@+id/tweened_translate_btn"
            style="@style/WrapWrap"
            android:text="移动" />

    </LinearLayout>
    <ImageView
        android:id="@+id/tweened_img"
        android:layout_width="200dp"
        android:layout_height="300dp"
        android:src="@drawable/mz"/>
    <Button
        android:id="@+id/Tween_Animations"
        style="@style/WrapWrap"
        android:text="帧动画"/>
</LinearLayout>

AnimationActivity代码

package com.example.administrator.foundationdemo.animation;

import android.content.Intent;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.view.animation.AlphaAnimation;
import android.view.animation.Animation;
import android.view.animation.AnimationSet;
import android.view.animation.RotateAnimation;
import android.view.animation.ScaleAnimation;
import android.view.animation.TranslateAnimation;
import android.widget.Button;
import android.widget.ImageView;

import com.example.administrator.foundationdemo.R;

public class AnimationActivity extends AppCompatActivity {

    private Button tweened_rotate_btn;
    private Button tweened_scale_btn;
    private Button tweened_alpha_btn;
    private Button tweened_translate_btn;
    private ImageView tweened_img;
    private Button tween_animation;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_animation);
        init();
        viewListener();
    }

    private void init() {

        tweened_rotate_btn = (Button) findViewById(R.id.tweened_rotate_btn);
        tweened_scale_btn = (Button) findViewById(R.id.tweened_scale_btn);
        tweened_alpha_btn = (Button) findViewById(R.id.tweened_alpha_btn);
        tweened_translate_btn = (Button) findViewById(R.id.tweened_translate_btn);
        tweened_img = (ImageView) findViewById(R.id.tweened_img);
        tween_animation = (Button) findViewById(R.id.tween_animation);


    }

    private void viewListener() {
        tweened_rotate_btn.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {

                //创建一个AnimationSet对象 参数为boolean型

                //true表示使用Animation的interpolation，false则是使用自己的
                AnimationSet animationSet = new AnimationSet(true);

                //参数1：从哪个旋转角度开始

                //参数2：转到什么角度

                //后4个参数用于设置围绕着旋转的圆的圆心在哪里

                //参数3：确定x轴坐标的类型，有ABSOLUT绝对坐标、RELATIVE_TO_SELF相对于自身坐标、RELATIVE_TO_PARENT相对于父控件的坐标

                //参数4：x轴的值，0.5f表明是以自身这个控件的一半长度为x轴

                //参数5：确定y轴坐标的类型

                //参数6：y轴的值，0.5f表明是以自身这个控件的一半长度为x轴

                RotateAnimation rotateAnimation = new RotateAnimation(0, 360,

                        Animation.RELATIVE_TO_SELF, 0.5f,

                        Animation.RELATIVE_TO_SELF, 0.5f);
                //设置执行时间,单位ms
                rotateAnimation.setDuration(1000);
                //将动画对象添加到序列中
                animationSet.addAnimation(rotateAnimation);

                tweened_img.startAnimation(animationSet);

            }
        });

        tweened_scale_btn.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                AnimationSet animationSet = new AnimationSet(true);

                //参数1：x轴的初始值

                //参数2：x轴收缩后的值

                //参数3：y轴的初始值

                //参数4：y轴收缩后的值

                //参数5：确定x轴坐标的类型

                //参数6：x轴的值，0.5f表明是以自身这个控件的一半长度为x轴

                //参数7：确定y轴坐标的类型

                //参数8：y轴的值，0.5f表明是以自身这个控件的一半长度为x轴

                ScaleAnimation scaleAnimation = new ScaleAnimation(

                        0, 0.1f,0,0.1f,

                        Animation.RELATIVE_TO_SELF,0.5f,

                        Animation.RELATIVE_TO_SELF,0.5f);

                scaleAnimation.setDuration(1000);

                animationSet.addAnimation(scaleAnimation);

                tweened_img.startAnimation(animationSet);
            }
        });

        tweened_alpha_btn.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                //创建一个AnimationSet对象 参数为boolean型
                //true表示使用Animation的interpolation，false则是使用自己的
                AnimationSet animationSet = new AnimationSet(true);
                //创建一个AlphaAnimation对象，参数透明度，1完全透明，0不透明
                AlphaAnimation alphaAnimation = new AlphaAnimation(1, 0);
                //设置执行时间,单位ms
                alphaAnimation.setDuration(1000);
                //将动画对象添加到序列中
                animationSet.addAnimation(alphaAnimation);
                tweened_img.startAnimation(animationSet);
            }
        });

        tweened_translate_btn.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                AnimationSet animationSet = new AnimationSet(true);

                //参数1～2：x轴的开始位置

                //参数3～4：y轴的开始位置

                //参数5～6：x轴的结束位置

                //参数7～8：x轴的结束位置

                TranslateAnimation translateAnimation =

                        new TranslateAnimation(

                                Animation.RELATIVE_TO_SELF,0f,

                                Animation.RELATIVE_TO_SELF,0.5f,

                                Animation.RELATIVE_TO_SELF,0f,

                                Animation.RELATIVE_TO_SELF,0.5f);

                translateAnimation.setDuration(1000);

                animationSet.addAnimation(translateAnimation);

                tweened_img.startAnimation(animationSet);

            }
        });

        tween_animation.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                Intent mIntent = new Intent(AnimationActivity.this,TweenAnimationActivity.class);
                startActivity(mIntent);
            }
        });
    }


}

七、帧动画

xml代码

res下新建anim文件夹animation_list XML代码

<?xml version="1.0" encoding="utf-8"?>
<animation-list  xmlns:android="http://schemas.android.com/apk/res/android" android:oneshot="false">
    <item android:drawable="@drawable/a1" android:duration="100"/>
    <item android:drawable="@drawable/a2" android:duration="100"/>
    <item android:drawable="@drawable/a3" android:duration="100"/>
    <item android:drawable="@drawable/a1" android:duration="100"/>
</animation-list>

activity_frame_animation XML代码

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" >

    <LinearLayout
        android:id="@+id/linearLayout1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" >

        <Button
            android:id="@+id/button1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="播放动画" />

        <Button
            android:id="@+id/button2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="停止动画" />

    </LinearLayout>



    <RadioGroup
        android:id="@+id/radioGroup1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        >
        <RadioButton
            android:id="@+id/radioButton1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:checked="true"
            android:text="单次播放" />


        <RadioButton
            android:id="@+id/radioButton2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="循环播放" />
    </RadioGroup>

    <TextView
        android:id="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="拖动进度条修改透明度(0 - 255)之间" />

    <SeekBar
        android:id="@+id/seekBar1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

    <ImageView
        android:id="@+id/imageView1"
        android:layout_width="200dip"
        android:layout_height="200dip"
        android:background="@anim/animation_list" />

</LinearLayout>

FrameAnimationActivity代码

package com.example.administrator.foundationdemo.animation;

import android.graphics.drawable.AnimationDrawable;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.ImageView;
import android.widget.RadioButton;
import android.widget.RadioGroup;
import android.widget.SeekBar;

import com.example.administrator.foundationdemo.R;

public class FrameAnimationActivity extends AppCompatActivity {

    /** Called when the activity is first created. */
    private Button button1,button2;
    private RadioGroup radioGroup;
    private RadioButton radioButton1,radioButton2;
    private SeekBar seekBar;
    private ImageView imageView1;
    private AnimationDrawable animationDrawable;
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_frame_animation);

        button1=(Button) this.findViewById(R.id.button1);
        button2=(Button) this.findViewById(R.id.button2);
        radioGroup=(RadioGroup) this.findViewById(R.id.radioGroup1);
        radioButton1=(RadioButton) this.findViewById(R.id.radioButton1);
        radioButton2=(RadioButton) this.findViewById(R.id.radioButton2);
        seekBar=(SeekBar) this.findViewById(R.id.seekBar1);
        imageView1=(ImageView) this.findViewById(R.id.imageView1);

        //通过ImageView对象拿到背景显示的AnimationDrawable
        animationDrawable=(AnimationDrawable) imageView1.getBackground();

        button1.setOnClickListener(new View.OnClickListener() {

            @Override
            public void onClick(View v) {
                if(!animationDrawable.isRunning()){
                    animationDrawable.start();
                }
            }
        });
        button2.setOnClickListener(new View.OnClickListener() {

            @Override
            public void onClick(View v) {
                if(animationDrawable.isRunning()){
                    animationDrawable.stop();
                }
            }
        });
        radioGroup.setOnCheckedChangeListener(new RadioGroup.OnCheckedChangeListener() {

            @Override
            public void onCheckedChanged(RadioGroup group, int checkedId) {
                // TODO Auto-generated method stub
                if(checkedId==radioButton1.getId()){
                    //设置单次播放
                    animationDrawable.setOneShot(true);
                }else if(checkedId==radioButton2.getId()){
                    //设置循环播放
                    animationDrawable.setOneShot(false);
                }
                //设置播放后重新启动
                animationDrawable.stop();
                animationDrawable.start();
            }
        });
        //监听的进度条修改透明度
        seekBar.setOnSeekBarChangeListener(new SeekBar.OnSeekBarChangeListener() {

            @Override
            public void onStopTrackingTouch(SeekBar seekBar) {


            }

            @Override
            public void onStartTrackingTouch(SeekBar seekBar) {


            }

            @Override
            public void onProgressChanged(SeekBar seekBar, int progress,
                                          boolean fromUser) {
                //设置动画Alpha值
                animationDrawable.setAlpha(progress);
                //通知imageView 刷新屏幕
                imageView1.postInvalidate();
            }
        });
    }
}

上述就是，属性动画，补间动画，帧动画的全部类容，希望对大家有帮助

Android Animation 动画介绍与详解

一、Animation 动画属性

二、Animation 动画类型

XML中

JavaCode中

三、Android动画模式

一种是tweened animation(渐变动画)

一种是frame by frame(画面转换动画)

四、如何在XML文件中定义动画

五、Android XML动画解析

六、Java代码实现上述动画

七、帧动画

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

Android知识

Android开发

Android技术知识

Android开发

程序员

安卓资源收集