Android中的动画

2022-08-22 20:33:10

Android中的动画

Android 平台提供了一套完整的动画框架，在Android3.0之前有两种动画，一种方式是补间动画 Tween Animation、另一种叫逐帧动画 Frame Animation（也称Drawable Animation ）。Android3.0以后增加了属性动画 Property Animation。这样子动画就分成两部分：

Tween Animation、Frame Animation只能用于View，被归类为View Animation。

一、Property Animation（属性动画）

Property Animation可以定义在xml文件中，它用来在设定的时间内修改对象的属性。例如背景颜色和alpha的值。

这些xml文件定义的文件路径如下： res/animator/filename.xml

常用java类： ValueAnimator, ObjectAnimator, or AnimatorSet.

Property Animation定义在android.animation包种。

Property Animation的文件可以以资源的形式引用：

In Java: R.animator.filename

In XML: @[package:]animator/filename

举例看一下Property Animation的xml文件：

[html] view plain copy

print ?

<set
android:ordering=["together" | "sequentially"]]]>
<objectAnimator
android:propertyName="string"
android:duration="int"
android:valueFrom="float | int | color"
android:valueTo="float | int | color"
android:startOffset="int"
android:repeatCount="int"
android:repeatMode=["repeat" | "reverse"]
android:valueType=["intType" | "floatType"]/>
<animator
android:duration="int"
android:valueFrom="float | int | color"
android:valueTo="float | int | color"
android:startOffset="int"
android:repeatCount="int"
android:repeatMode=["repeat" | "reverse"]
android:valueType=["intType" | "floatType"]/>
<set]]>
...
</set>
</set>

文件需要有根元素，可以使用<set>, <objectAnimator>, or <valueAnimator>. <set>可以作为一个集合，而且集合中还可以存在<set>元素。

关于<set>, <objectAnimator>, <valueAnimator>属性的介绍可以参考。

Property Animation的使用：

[html] view plain copy

print ?

AnimatorSetset=(AnimatorSet)AnimatorInflater.loadAnimator(myContext, R.anim.property_animator);
set.setTarget(myObject);
set.start();

java代码使用动画：

<wiz_code_mirror>

 
ObjectAnimator oa = ObjectAnimator.ofFloat(iv, "translationY", new float[]{0,2,4,6,8,10,15,20,25,30,50,80,100,150});

    oa.setDuration(2000);

    oa.setRepeatCount(ObjectAnimator.INFINITE);

    oa.setRepeatMode(ObjectAnimator.RESTART);

    oa.start();

<wiz_code_mirror>

 
AnimatorSet set = new AnimatorSet();

    //顺序播放

    set.playSequentially(oa,oa2);

    //同时播放

    set.playTogether(oa,oa2);

二、View Animation（View动画）

View Animation包含了Tween Animation、Frame Animation。

1、Tween Animation

Tween Animation定义在xml文件中。可以对view实现一系列的转换，例如：移动、渐变、伸缩、旋转。

常用类: AlphaAnimation、RotateAnimation、ScaleAnimation、TranslateAnimation

Android中的动画

Tween Animation只能应用于View对象，而且只支持一部分属性，如支持缩放旋转而不支持背景颜色的改变。而且对于Tween Animation，并不改变属性的值，它只是改变了View对象绘制的位置，而没有改变View对象本身，比如，你有一个Button，坐标（100,100），Width:100,Height:100，而你有一个动画使其移动（200，200），你会发现动画过程中触发按钮点击的区域仍是(100,100)-(200,200)。

举例看一下Tween Animation的xml文件：

[html] view plain copy

print ?

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:androidsetxmlns:android="http://schemas.android.com/apk/res/android"
android:interpolator="@[package:]anim/interpolator_resource"
android:shareInterpolator=["true" | "false"] ]]>
<alpha
android:fromAlpha="float"
android:toAlpha="float"/>
<scale
android:fromXScale="float"
android:toXScale="float"
android:fromYScale="float"
android:toYScale="float"
android:pivotX="float"
android:pivotY="float"/>
<translate
android:fromXDelta="float"
android:toXDelta="float"
android:fromYDelta="float"
android:toYDelta="float"/>
<rotate
android:fromDegrees="float"
android:toDegrees="float"
android:pivotX="float"
android:pivotY="float"/>
<set]]>
...
</set>
</set>

xml文件中必须有一个根元素，使用 <alpha>, <scale>, <translate>, <rotate>, 或者 <set>。<set>作为集合可以包含<alpha>, <scale>, <translate>, <rotate>中的一个或多个，也可以包含<set>。

Tween Animation的各元素属性请参考。

注意：元素属性值中使用%（in percentage relative to the object‘s top edge），%p（in percentage relative to the parent container‘s top edge ）的单位，

给出一个使用Tween Animation的例子

[html] view plain copy

print ?

<setxmlns:androidsetxmlns:android="http://schemas.android.com/apk/res/android"
android:shareInterpolator="false"]]>
<scale
android:interpolator="@android:anim/accelerate_decelerate_interpolator"
android:fromXScale="1.0"
android:toXScale="1.4"
android:fromYScale="1.0"
android:toYScale="0.6"
android:pivotX="50%"
android:pivotY="50%"
android:fillAfter="false"
android:duration="700"/>
<set
android:interpolator="@android:anim/accelerate_interpolator"
android:startOffset="700"]]>
<scale
android:fromXScale="1.4"
android:toXScale="0.0"
android:fromYScale="0.6"
android:toYScale="0.0"
android:pivotX="50%"
android:pivotY="50%"
android:duration="400"/>
<rotate
android:fromDegrees="0"
android:toDegrees="-45"
android:toYScale="0.0"
android:pivotX="50%"
android:pivotY="50%"
android:duration="400"/>
</set>
</set>

这个动画应用于ImageView

[java] view plain copy

print ?

ImageView image =(ImageView) findViewById(R.id.image);
Animation hyperspaceJump =AnimationUtils.loadAnimation(this, R.anim.hyperspace_jump);
image.startAnimation(hyperspaceJump);

在java代码中使用动画：

<wiz_code_mirror>

 
//透明度渐变动画

AlphaAnimation aa = new AlphaAnimation(0.0f, 1.0f);

        //动画播放的时间长度

        aa.setDuration(2000);

        //设置重复播放的次数

        aa.setRepeatCount(Animation.INFINITE);

        //设置重复播放的模式

        aa.setRepeatMode(Animation.REVERSE);

        //让iv播放aa动画

        iv.startAnimation(aa);

//平移动画

//Animation.RELATIVE_TO_SELF    相对于自己，值要填百分比

        //Animation.RELATIVE_TO_PARENT  相对于父控件，值要填百分比

        //Animation.ABSOLUTE            绝对坐标，值要填具体值

        TranslateAnimation ta = new TranslateAnimation(

                Animation.RELATIVE_TO_SELF, //起始x类型

                0,                          //起始x值

                Animation.RELATIVE_TO_SELF, //结束x类型

                1f,                         //结束x值

                Animation.RELATIVE_TO_SELF, //起始y类型

                0,                          //起始y值

                Animation.RELATIVE_TO_SELF, //结束y类型

                1f);                        //结束y值

        //动画播放的时间长度

        ta.setDuration(2000);

        //设置重复播放的次数

        ta.setRepeatCount(Animation.INFINITE);

        //设置重复播放的模式

        ta.setRepeatMode(Animation.REVERSE);

        //让iv播放aa动画

        iv.startAnimation(ta);

//缩放动画

ScaleAnimation sa = new ScaleAnimation(

                0.2f,                       //x轴起始缩放比

                2.0f,                       //x轴结束缩放比

                0.2f,                       //y轴起始缩放比

                2.0f,                       //y轴结束缩放比

                Animation.RELATIVE_TO_SELF, //中心点x类型

                0.5f,                       //中心点x值

                Animation.RELATIVE_TO_SELF, //中心点y类型

                0.5f                        //中心点y值

                );

        //动画播放的时间长度

        sa.setDuration(2000);

        //设置重复播放的次数

        sa.setRepeatCount(Animation.INFINITE);

        //设置重复播放的模式

        sa.setRepeatMode(Animation.REVERSE);

        //让iv播放aa动画

        iv.startAnimation(sa);

//旋转动画

RotateAnimation ra = new RotateAnimation(

                0, 

                360, 

                Animation.RELATIVE_TO_SELF, 

                0.5f, 

                Animation.RELATIVE_TO_SELF, 

                0.5f);

        //动画播放的时间长度

        ra.setDuration(2000);

        //设置重复播放的次数

        ra.setRepeatCount(Animation.INFINITE);

        //设置重复播放的模式

        ra.setRepeatMode(Animation.REVERSE);

        //让iv播放aa动画

        iv.startAnimation(ra);

2、Interpolators

插值器可以让动画按照一定的频率运动，实现加速、加速、重复、回弹等效果。常用插值器及使用。

Android中的动画

3、Custom interpolators

如果系统提供的插值器不能满足需要，可以通过修改插值器的属性优化，比如修改AnticipateInterpolator的加速速率，调整CycleInterpolator的循环次数等。

个性化插值器语法：

[html] view plain copy

print ?

<?xml version="1.0" encoding="utf-8"?>
<InterpolatorName xmlns:android="http://schemas.android.com/apk/res/android"
android:attribute_name="value"
/>

常见的插值器可调整的属性：

<accelerateDecelerateInterpolator> 无

<accelerateInterpolator> android:factor 浮点值，加速速率，默认为1

<anticipateInterploator> android:tension 浮点值，起始点后退的张力、拉力数，默认为2

<anticipateOvershootInterpolator> android:tension 同上 android:extraTension 浮点值，拉力的倍数，默认为1.5（2 * 1.5）

<bounceInterpolator> 无

<cycleInterplolator> android:cycles 整数值，循环的个数，默认为1

<decelerateInterpolator> android:factor 浮点值，减速的速率，默认为1

<linearInterpolator> 无

<overshootInterpolator> 浮点值，超出终点后的张力、拉力，默认为2

举个个性化插值器的例子：

XML 文件存放在：res/anim/my_overshoot_interpolator.xml:

[html] view plain copy

print ?

<?xml version="1.0" encoding="utf-8"?>
<overshootInterpolator xmlns:android="http://schemas.android.com/apk/res/android"
android:tension="7.0"
/>

个性化插值器使用：

[html] view plain copy

print ?

<scale xmlns:android="http://schemas.android.com/apk/res/android"
android:interpolator="@anim/my_overshoot_interpolator"
android:fromXScale="1.0"
android:toXScale="3.0"
android:fromYScale="1.0"
android:toYScale="3.0"
android:pivotX="50%"
android:pivotY="50%"
android:duration="700" />

4、Frame animation

帧动画是一系列的图片按顺序显示。

文件路径：

res/drawable/filename.xml

Property Animation、Tween Animation、Frame Animation的文件路径都是不一样的。

Java中使用AnimationDrawable.

[html] view plain copy

print ?

<?xml version="1.0" encoding="utf-8"?>
<animation-list xmlns:android="http://schemas.android.com/apk/res/android"
android:oneshot=["true" | "false"] >
<item
android:drawable="@[package:]drawable/drawable_resource_name"
android:duration="integer" />
</animation-list>

元素属性的解释：

Android中的动画

举个例子：

用布局文件xml实现

[html] view plain copy

print ?

<?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/rocket_thrust1" android:duration="200" />
<item android:drawable="@drawable/rocket_thrust2" android:duration="200" />
<item android:drawable="@drawable/rocket_thrust3" android:duration="200" />
</animation-list>

Frame Animation使用，首先设置为背景，然后再播放。

[java] view plain copy

print ?

ImageView rocketImage = (ImageView) findViewById(R.id.rocket_image);
rocketImage.setBackgroundResource(R.drawable.rocket_thrust);
rocketAnimation = (AnimationDrawable) rocketImage.getBackground();
rocketAnimation.start();

用纯代码方式实现一个动画，我们可以这样写（常用类：AnimationDrawable）：

[java] view plain copy

AnimationDrawable anim = new AnimationDrawable();
for (int i = 1; i <= 4; i++) {
int id = getResources().getIdentifier("f" + i, "drawable", getPackageName());
Drawable drawable = getResources().getDrawable(id);
anim.addFrame(drawable, 300);
}
anim.setOneShot(false);
image.setBackgroundDrawable(anim);
anim.start();
来源： http://blog.csdn.net/liuhe688/article/details/6657776

更多，2D Graphics: Frame Animation

使用Frame Animation注意一下问题：

要在代码中调用Imageview的setBackgroundResource方法，如果直接在XML布局文件中设置其src属性当触发动画时会FC。
在动画start()之前要先stop()，不然在第一次动画之后会停在最后一帧，这样动画就只会触发一次。
最后一点是SDK中提到的，不要在onCreate中调用start，因为AnimationDrawable还没有完全跟Window相关联，如果想要界面显示时就开始动画的话，可以在onWindowFoucsChanged()中调用start()。
来源： http://blog.csdn.net/xyz_lmn/article/details/38667899

三、ViewPropertyAnimator

ViewPropertyAnimator 提供了一种可以使多个属性同时做动画的简单方法，而且它在内部只使用一个 Animator。当它计算完这些属性的值之后，它直接把那些值赋给目标 View 并 invalidate 那个对象，而它完成这些的方式比普通的 ObjectAnimator 更加高效。

废话少说：让我们看看代码。对于一个我们之前见过的 View 淡出动画，如果使用 ViewPropertyAnimator 的话应该是这样：

<wiz_code_mirror>

 
myView.animate().alpha(0);

1

1

很好，它非常简短而且可读性非常好。而且它非常容易将多个动画结合起来。例如，我们可以同时移动这个 View 的 x 值和 y 值到 (500, 500) 这个位置：

<wiz_code_mirror>

 
myView.animate().x(500).y(500);

animate()：整个系统从调用 View 的这个叫做 animate() 的新方法开始。这个方法会返回一个 ViewPropertyAnimator 对象，你可以通过调用这个对象的方法来设置需要做动画的属性。
自动开始：注意我们没有显式调用过 start() 方法。在新的 API 中，启动动画是隐式的。当你声明完，动画就开始了。同时开始。这里有一个细节，就是这些动画实际上会在下一次界面刷新的时候启动，ViewPropertyAnimator 正是通过这个机制来将所有的动画结合在一起的。如果你继续声明动画，它就会继续将这些动画添加到将在下一帧开始的动画的列表中。而当你声明完毕并结束对 UI 线程的控制之后，事件队列机制开始起作用（kicks in）动画也就开始了。
流畅（Fluent）：ViewPropertyAnimator 拥有一个流畅的接口（Fluent interface），它允许你将多个方法调用很自然地串在一起并把一个多属性的动画写成一行代码。所有的调用（比如 x()、y()）都会返回一个 ViewPropertyAnimator 实例，所以你可以把其他的方法调用串在一起。
来源： http://blog.csdn.net/zhaoshecsdn/article/details/46673821

Android中的炫酷效果

一、android开源框架 Brvah

Android开源框架BRVAH由来篇

http://www.jcodecraeer.com/a/anzhuokaifa/androidkaifa/2016/0622/4376.html

二、材质化设计

1. 世界观（3D魔法卡片）
2. 原则（符合直觉，动画，活泼）
3. 实现（主题，控件，动画）

Android中的动画

码农公寓

Android中的动画

一、Property Animation（属性动画）

二、View Animation（View动画）

1、Tween Animation

2、Interpolators

3、Custom interpolators

4、Frame animation

三、ViewPropertyAnimator

Android中的炫酷效果

一、android开源框架 Brvah

Android开源框架BRVAH由来篇

二、材质化设计

相关文章