Android开发之Animation的基本使用

3 Replies

1、Animation是一个抽象类，常用的相关子类有五个：AnimationSet、AlphaAnimation、RotateAnimation、ScaleAnimation、TranslateAnimation；
2、AnimationSet是一个集合，视图设置动画时接收的是AnimationSet类型的对象，他可以将多个动画同时应用到单个视图上；
3、AlphaAnimation表示的渐变动画，从全显示到全隐藏；
4、RotateAnimation是旋转动画，以某一个点为圆心进行旋转；
5、ScaleAnimation是缩放动画，以某一个点为缩放终点，进行百分比缩放；
6、TranslateAnimation是平移动画，从当前位置移动到某个坐标位置动画；
7、Animation的相关方法还有：动画执行时间setDuration()，是否停留在动画结束位置setFillAfter()，重复次数setRepeatCount()，延时执行时间setStartOffset()等；
8、标准的动画设置步骤有：创建AnimationSet、Animation对象–>设置基本属性(执行时间等)–>Animation加入到AnimationSet–>视图执行动画；
9、实现4种动画的基本功能，创建4个按钮，一个按钮对应一种动画类型，创建一个ImageView，将所有动画在该视图上体现；

关键代码：

activity_main.xml

1
2
3
4
5
6
7
8
9
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

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:weightSum="2"
    tools:context="com.yusian.animations.MainActivity">
 
    <ImageView
        android:id="@+id/img_main"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@mipmap/ic_launcher"
        android:layout_margin="50dp"
        android:layout_gravity="center"
        android:background="#CCC"/>
 
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:orientation="vertical"
        android:gravity="bottom">
        <Button
            android:id="@+id/btn_alpha"
            android:layout_width="match_parent"
            android:layout_height="50dp"
            android:text="渐变"/>
        <Button
            android:id="@+id/btn_rotate"
            android:layout_width="match_parent"
            android:layout_height="50dp"
            android:text="旋转"/>
        <Button
            android:id="@+id/btn_scale"
            android:layout_width="match_parent"
            android:layout_height="50dp"
            android:text="缩放"/>
        <Button
            android:id="@+id/btn_translate"
            android:layout_width="match_parent"
            android:layout_height="50dp"
            android:text="平移"/>
 
    </LinearLayout>
 
</LinearLayout>

MainActivity

1
2
3
4
5
6
7
8
9
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
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87

package com.yusian.animations;
 
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.ImageView;
 
public class MainActivity extends AppCompatActivity implements View.OnClickListener{
    private ImageView imageView;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        imageView = (ImageView) findViewById(R.id.img_main);
        findViewById(R.id.btn_alpha).setOnClickListener(this);
        findViewById(R.id.btn_rotate).setOnClickListener(this);
        findViewById(R.id.btn_scale).setOnClickListener(this);
        findViewById(R.id.btn_translate).setOnClickListener(this);
    }
 
    @Override
    public void onClick(View v) {
        switch (v.getId()){
            // 渐变
            case R.id.btn_alpha:{
                AnimationSet animationSet = new AnimationSet(true);
                // 创建渐变动画
                Animation alphaAnimation = new AlphaAnimation(1,0);
                alphaAnimation.setDuration(1000);
 
                // 添加到AnimationSet及执行动画
                animationSet.addAnimation(alphaAnimation);
                animationSet.setFillAfter(true);    // 停留在结尾状态
                animationSet.setFillBefore(false);
                animationSet.setRepeatCount(2);     // 重复次数
                animationSet.setStartOffset(1);     // 延时时间
                imageView.startAnimation(animationSet);
            }break;
            // 旋转
            case R.id.btn_rotate:{
                AnimationSet animationSet = new AnimationSet(true);
 
                Animation rotateAnimation = new RotateAnimation(0,36000,
                        Animation.RELATIVE_TO_SELF, 0.5f,
                        Animation.RELATIVE_TO_SELF, 0.5f);
                animationSet.setDuration(5000);
 
                animationSet.addAnimation(rotateAnimation);
                imageView.startAnimation(animationSet);
            }break;
            // 缩放
            case R.id.btn_scale:{
                AnimationSet animationSet = new AnimationSet(true);
 
                Animation animation = new ScaleAnimation(1,0,1,0,
                        Animation.RELATIVE_TO_SELF, 0.5f,
                        Animation.RELATIVE_TO_SELF, 0.5f);
                animation.setDuration(1000);
 
                animationSet.addAnimation(animation);
                imageView.startAnimation(animationSet);
            }break;
            // 平移
            case R.id.btn_translate:{
                AnimationSet animationSet = new AnimationSet(true);
 
                Animation animation = new TranslateAnimation(
                        Animation.RELATIVE_TO_SELF,0f,
                        Animation.RELATIVE_TO_SELF,1f,
                        Animation.RELATIVE_TO_SELF,0f,
                        Animation.RELATIVE_TO_SELF,1f);
                animation.setDuration(1000);
 
                animationSet.addAnimation(animation);
                imageView.startAnimation(animationSet);
            }break;
            default:break;
        }
    }
}

3 thoughts on “Android开发之Animation的基本使用”

  1. Pingback: Android开发之LayoutAnimation的基本使用 | 小龙虾博客 (Crayfish)

  2. Sian Post author

    帧动画的实现基本步骤：
    1、通过animation-list标签加载一组图片；
    2、通过ImageView的setBackgroundResource()方法加载图片
    3、将ImageView的getBackground()方法获取Drawable对象强转成AnimationDrawable；
    4、调用AnimationDrawable的start()方法执行动画；

    anim_nv.xml

    1
2
3
4
5
6
7
8
9
10
11

    <?xml version="1.0" encoding="utf-8"?>
<animation-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/img_001" android:duration="150"/>
    <item android:drawable="@drawable/img_002" android:duration="150"/>
    <item android:drawable="@drawable/img_003" android:duration="150"/>
    <item android:drawable="@drawable/img_004" android:duration="150"/>
    <item android:drawable="@drawable/img_005" android:duration="150"/>
    <item android:drawable="@drawable/img_006" android:duration="150"/>
    <item android:drawable="@drawable/img_007" android:duration="150"/>
    <item android:drawable="@drawable/img_008" android:duration="150"/>
</animation-list>

    Activity中ImageView的动画播放代码

    1
2
3

    imageView.setBackgroundResource(R.drawable.anim_nv);
AnimationDrawable animationDrawable = (AnimationDrawable) imageView.getBackground();
animationDrawable.start();

    素材下载：animation

    ↓
  3. Sian Post author

    1、除此之外，动画还可以通过XML来定义，这样可以达到多处复用的目的；
    2、用xml定义动画可以使用AnimationUtils的静态方法loadAnimation来加载；
    3、Animation的RELATIVE_TO_SELF这种属性通过数值的表现方式来区分，数字表示绝对位置，百分号表示相对自己，%p表示相对父控件，如：
    android:pivotX=”50″–>Animation.ABSOLUTE, 50
    ndroid:pivotX=”50%”–>Animation.RELATIVE_TO_SELF, 50
    ndroid:pivotX=”50%p”–>Animation.RELATIVE_TO_PARENT, 50
    4、相关代码
    alpha.xml

    1
2
3
4
5
6
7
8
9
10

    <?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <scale
        android:fromXScale="100%"
        android:fromYScale="100%"
        android:toXScale="0"
        android:toYScale="0"
        android:duration="200"
        />
</set>

    roate

    1
2
3
4
5
6
7
8
9
10

    <?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <translate
        android:fromXDelta="0%"
        android:fromYDelta="0%"
        android:toXDelta="100%"
        android:toYDelta="100%"
        android:duration="100"
        />
</set>

    scale

    1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

    public void onClick(View v) {
    switch (v.getId()){
        case R.id.btn_alpha:{
            Animation animation = AnimationUtils.loadAnimation(this, R.anim.alpha);
            imageView.startAnimation(animation);
        }break;
        case R.id.btn_rotate:{
            Animation animation = AnimationUtils.loadAnimation(this, R.anim.rotate);
            imageView.startAnimation(animation);
        }break;
        case R.id.btn_scale:{
            Animation animation = AnimationUtils.loadAnimation(this, R.anim.scale);
            imageView.startAnimation(animation);
        }break;
        case R.id.btn_translate:{
            Animation animation = AnimationUtils.loadAnimation(this, R.anim.translate);
            imageView.startAnimation(animation);
        }break;
        default:break;
    }
}

    translate

    1
2
3
4
5
6
7
8
9
10

    <?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <rotate
        android:fromDegrees="0"
        android:toDegrees="+360"
        android:pivotX="50%"
        android:pivotY="50%"
        android:duration="3000"
        />
</set>

    相关实现

    1
2
3
4
5
6
7
8
9
10

    <?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <scale
        android:fromXScale="100%"
        android:fromYScale="100%"
        android:toXScale="0"
        android:toYScale="0"
        android:duration="200"
        />
</set>
    ↓

Leave a Reply