Android 渐变动画（Tween animation）

Android 渐变动画（Tween animation）

Android中的渐变动画是通过定义在XML文件中的参数实现的。

今天给大家展示一个例子，例子比较全面，参数可以随意修改。

anim XML

在res目录下的anim目录创建xml文件，记得必须是anim目录。

我创建了两个文件分别为animator.xml和animator2.xml。使用XML文件的好处就是阅读和复用都比较好。

animator.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns: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="1400" />
<set android:interpolator="@android:anim/decelerate_interpolator">
<scale
android:fromXScale="1.4"
android:toXScale="0.0"
android:fromYScale="0.6"
android:toYScale="0.0"
android:pivotX="50%"
android:pivotY="50%"
android:startOffset="700"
android:duration="800"
android:fillBefore="false" />
<rotate
android:fromDegrees="0"
android:toDegrees="-45"
android:toYScale="0.0"
android:pivotX="50%"
android:pivotY="50%"
android:startOffset="700"
android:duration="800" />
</set>
</set>

animator2.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:shareInterpolator="false">
<alpha
android:duration="1400"
android:fromAlpha="0.0"
android:toAlpha="1.0" />
<scale
android:duration="1400"
android:fromXScale="1.0"
android:toXScale="1.0"
android:fromYScale="1.0"
android:toYScale="1.0"
android:pivotX="50%"
android:pivotY="50%" />
<translate
android:duration="1400"
android:fromXDelta="5%"
android:toXDelta="0.0"
android:fromYDelta="5%"
android:toYDelta="0.0" />
<rotate
android:duration="1400"
android:fromDegrees="0"
android:toDegrees="100"
android:pivotX="50%"
android:pivotY="50%" />
</set>

和控件结合

有了anim的动画参数，要和那个控件进行结合呢？我使用了两个ImageView，

首先是layout文件：

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

<ImageView
android:id="@+id/spaceshipImage"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@mipmap/ic_header_stub"
/>

<ImageView
android:id="@+id/spaceshipImage2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@mipmap/ic_header_stub"
/>

</LinearLayout>

使用Animation类来控制layout中的两个图片的动作。

ImageView spaceshipImage = (ImageView) findViewById(R.id.spaceshipImage);
Animation hyperspaceJumpAnimation = AnimationUtils.loadAnimation(this, R.anim.animator);
spaceshipImage.startAnimation(hyperspaceJumpAnimation);

ImageView spaceshipImage2 = (ImageView) findViewById(R.id.spaceshipImage2);
Animation hyperspaceJumpAnimation2 = AnimationUtils.loadAnimation(this, R.anim.animator2);
spaceshipImage2.startAnimation(hyperspaceJumpAnimation2);

这段代码就不上传github了，直接可以摘下来使用。