Android Frame animation模拟脉搏跳动小动画

逐帧动画是一种常见的动画形式(Frame By Frame),其原理是在“连续的关键帧”中分解动画动作,也就是在时间轴的每帧上逐帧绘制不同的内容,使其连续播放而成动画。 因为逐帧动画的帧序列内容不一样,不但给制作增加了负担而且最终输出的文件量也很大,但它的优势也很明显:逐帧动画具有非常大的灵活性,几乎可以表现任何想表现的内容,而它类似与电影的播放模式,很适合于表演细腻的动画。例如:人物或动物急剧转身、 头发及衣服的飘动、走路、说话以及精致的3D效果等等。

Android中的逐帧动画是Frame animation。Frame animation可以被定义在XML文件中,也可以完全编码实现。3.0以前,android支持两种动画模式,tween animation,frame animation,在android3.0中又引入了一个新的动画系统:property animation,这三种动画模式在SDK中被称为property animation,view animation,drawable animation。

本篇使用的方法是在xml中定义效果,以下是想达到的动画的效果。

\

1.首先准备所需图片(逐帧)。

\

2.在res/anim下或res/rawable下新建xml来编写动画效果。内容类似下图:

<animation-list xmlns:android=\"http://schemas.android.com/apk/res/android\"
    android:oneshot=\"false\">
    <item android:drawable=\"@drawable/soundwave_new_1_00040\" android:duration=\"100\" />//duration是每帧图片的时长,单位ms
    <item android:drawable=\"@drawable/soundwave_new_1_00041\" android:duration=\"100\" />
    <item android:drawable=\"@drawable/soundwave_new_1_00042\" android:duration=\"100\" />
    <item android:drawable=\"@drawable/soundwave_new_1_00043\" android:duration=\"100\" />
    <item android:drawable=\"@drawable/soundwave_new_1_00044\" android:duration=\"100\" />
    <item android:drawable=\"@drawable/soundwave_new_1_00045\" android:duration=\"100\" />
    <item android:drawable=\"@drawable/soundwave_new_1_00046\" android:duration=\"100\" />
    <item android:drawable=\"@drawable/soundwave_new_1_00047\" android:duration=\"100\" />
    <item android:drawable=\"@drawable/soundwave_new_1_00048\" android:duration=\"100\" />
    <item android:drawable=\"@drawable/soundwave_new_1_00049\" android:duration=\"100\" />
    <item android:drawable=\"@drawable/soundwave_new_1_00050\" android:duration=\"100\" />
    <item android:drawable=\"@drawable/soundwave_new_1_00051\" android:duration=\"100\" />
    <item android:drawable=\"@drawable/soundwave_new_1_00052\" android:duration=\"100\" />
    <item android:drawable=\"@drawable/soundwave_new_1_00053\" android:duration=\"100\" />
    <item android:drawable=\"@drawable/soundwave_new_1_00054\" android:duration=\"100\" />
    <item android:drawable=\"@drawable/soundwave_new_1_00055\" android:duration=\"100\" />
    <item android:drawable=\"@drawable/soundwave_new_1_00056\" android:duration=\"100\" />
    <item android:drawable=\"@drawable/soundwave_new_1_00057\" android:duration=\"100\" />
    <item android:drawable=\"@drawable/soundwave_new_1_00058\" android:duration=\"100\" />
    <item android:drawable=\"@drawable/soundwave_new_1_00059\" android:duration=\"100\" />
    <item android:drawable=\"@drawable/soundwave_new_1_00060\" android:duration=\"100\" />
    <item android:drawable=\"@drawable/soundwave_new_1_00061\" android:duration=\"100\" />
    <item android:drawable=\"@drawable/soundwave_new_1_00062\" android:duration=\"100\" />
    <item android:drawable=\"@drawable/soundwave_new_1_00063\" android:duration=\"100\" />
    <item android:drawable=\"@drawable/soundwave_new_1_00064\" android:duration=\"100\" />
    <item android:drawable=\"@drawable/soundwave_new_1_00065\" android:duration=\"100\" />
    <item android:drawable=\"@drawable/soundwave_new_1_00066\" android:duration=\"100\" />
    <item android:drawable=\"@drawable/soundwave_new_1_00067\" android:duration=\"100\" />
    <item android:drawable=\"@drawable/soundwave_new_1_00068\" android:duration=\"100\" />
    <item android:drawable=\"@drawable/soundwave_new_1_00069\" android:duration=\"100\" />
</animation-list>

xml保存为scanning_anim.xml.其中,

animation-list//最外层是animition-list控件,可以容纳item,每个item是一帧图片。
android:oneshot=\"false\"//如果为true,表示动画只播放一次停止在最后一帧上,如果设置为false表示动画循环播放。

3.以上xml中定义的动画要以一个imageView作为载体来显示。以下例子用一个类稍稍封装:

public class ScanningAnimationView extends ImageView {
    AnimationDrawable scanningDrawable;
    public ScanningAnimationView(Context context) {
        super(context);
    }
    public ScanningAnimationView(Context context, AttributeSet attrs) {
        super(context, attrs);
        setBackgroundResource(R.anim.scanning_anim);
        scanningDrawable=(AnimationDrawable)this.getBackground();
    }

    public void start() {
        scanningDrawable.start();
    }
    public void stop() {
        scanningDrawable.stop();
    }
}

4.用户直接使用这个封装好的ImageView调用start和stop即可。

调用动画:

public class MainActivity extends ActionBarActivity {
    ScanningAnimationView image;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        image = (ScanningAnimationView)findViewById(R.id.imageView);
        Button startButton = (Button) findViewById(R.id.start);
        Button endButton = (Button)findViewById(R.id.end);
        startButton.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                image.start();
            }
        });

        endButton.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                image.stop();
            }
        });
    }

imageView的布局:

<com.example.nurse.app.util.ScanningAnimationView
    android:layout_width=\"wrap_content\"
    android:layout_height=\"wrap_content\"
    android:id=\"@+id/imageView\"
    android:layout_centerHorizontal=\"true\"
    android:layout_alignParentTop=\"true\"
    android:layout_alignParentStart=\"true\"/>

本篇完。

文章目录
|