补间动画

标签：

补间动画:组件由原始状态向终极状态转变时，为了让过渡更自然，而自动生成的动画

常见的补间动画有平移动画、缩放动画、透明度变化动画、旋转动画等

平移动画的演示效果：

缩放动画的展示效果:

透明度变化的动画的展示效果：

旋转动画的展示效果:

一起飞动画的展示效果,一起飞表示所有的动画一起播放:

实现方式

第一步:使用Android Studio创建一个Android工程,并且在drawable文件夹中放一张图片

第二步:修改activity_main.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"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.fyt.tweenanimation.MainActivity"
    android:orientation="vertical">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="平移"
            android:onClick="translation"/>

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="缩放"
            android:onClick="scale"/>

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="透明"
            android:onClick="alpha"/>

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="旋转"
            android:onClick="rotation"/>

    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="一起飞"
            android:onClick="flay"/>

    </LinearLayout>


    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <ImageView
            android:id="@+id/iv"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/gold"
            android:layout_centerInParent="true"/>

    </RelativeLayout>

</LinearLayout>

package com.fyt.tweenanimation;

import android.app.Activity;
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 Activity {

    //用于创建ImageView对象
    private ImageView iv;

    //用于创建旋转动画
    private RotateAnimation ra;

    //用于创建修改透明度的动画
    private AlphaAnimation aa;

    //用于创建缩放动画
    private ScaleAnimation sa;

    //用于创建平移动画
    private TranslateAnimation ta;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        //获得布局文件上的ImageView
        iv = (ImageView) findViewById(R.id.iv);
    }

    //平移按钮响应函数
    public void translation(View view) {

        /***
         * 创建位移动画
         * 第一个参数:表示开始位置的x坐标,其值为iv的真实的x坐标 + 10
         * 第二个参数:表示结束位置的x坐标,其值为iv的真实的x坐标 + 100
         * 第三个参数:表示开始位置的y坐标,其值为iv的真实的y坐标 + 10
         * 第四个参数:表示结束位置的y坐标,其值为iv的真实的y坐标 + 100
         */
        ta = new TranslateAnimation(10, 100, 10, 100);

        /**
         *创建位移动画
         * 第一个参数:Animation.RELATIVE_TO_SELF表示相对于自己
         * 第二个参数:表示开始位置的x坐标,其值为iv的真实的x坐标 + (-1) * iv的宽度
         * 第三个参数:Animation.RELATIVE_TO_SELF表示相对于自己
         * 第四个参数:表示结束位置的x坐标,其值为iv的真实的x坐标 + 2 * iv的宽度
         * 第五个参数:Animation.RELATIVE_TO_SELF表示相对于自己
         * 第六个参数:表示开始位置的y坐标,其值为iv的真实的y坐标 + (-0.5f) * iv的高度
         * 第七个参数:Animation.RELATIVE_TO_SELF表示相对于自己
         * 第八个参数:表示结束位置的y坐标,其值为iv的真实的y坐标 + (1.5f) * iv的高度
         */
        ta = new TranslateAnimation(
                Animation.RELATIVE_TO_SELF,
                -1,
                Animation.RELATIVE_TO_SELF,
                2,
                Animation.RELATIVE_TO_SELF,
                -0.5f,
                Animation.RELATIVE_TO_SELF,
                1.5f);

        //设置动画的播放时间,单位为毫秒
        ta.setDuration(500);

        //设置动画重复播放的次数
        ta.setRepeatCount(1);

        //设置重复模式为相反,表示第二次反着播放平移动画
        ta.setRepeatMode(Animation.REVERSE);

        //播放平移动画
        iv.startAnimation(ta);
    }

    //缩放按钮响应函数
    public void scale(View view) {

        /**
         * 创建缩放动画
         * 第一个参数:iv在x方向上的开始时缩放比例
         * 第二个参数:iv在x方向上的结束时的缩放比例
         * 第三个参数:iv在y方向上的开始时的缩放比例
         * 第四个参数:iv在y方向上的结束时的缩放比例
         * 第五个参数:表示缩放点的x坐标
         * 第六个参数:表示缩放点的y坐标
         */
        sa = new ScaleAnimation(
                0.5f,
                2,
                1.1f,
                3,
                iv.getWidth() / 2,
                iv.getHeight() / 2
        );

        //设置动画的播放时间
        sa.setDuration(200);

        //设置缩放动画重复播放的次数
        sa.setRepeatCount(1);

        //设置重复模式为相反,表示第二次反着播放缩放动画
        sa.setRepeatMode(Animation.REVERSE);

        //设置停在缩放动画的结束位置上
        sa.setFillAfter(true);

        //播放缩放动画
        iv.startAnimation(sa);
    }

    //修改透明度按钮响应函数
    public void alpha(View view) {

        //创建透明度动画
        //第一个参数:起始时iv的透明度,0表示全不透明
        //第二个参数:结束时iv的透明度,0.5f表示半透明
        aa = new AlphaAnimation(0, 0.5f);

        //设置动画的播放时间
        aa.setDuration(1000);

        //播放透明度动画
        iv.startAnimation(aa);
    }

    //旋转按钮响应函数
    public void rotation(View view) {

        //创建旋转动画
        //第一个参数:旋转开始时的角度
        //第二个参数:旋转结束时的角度
        //第三个参数:iv的旋转点的x坐标
        //第四个参数:iv的旋转点的y坐标
        ra = new RotateAnimation(20, 360, iv.getWidth() / 2, iv.getHeight() / 2);

        //设置动画的播放时间
        ra.setDuration(1000);

        //播放旋转动画
        iv.startAnimation(ra);
    }

    //一起飞按钮响应函数
    public void flay(View view) {

        //创建一个动画集合
        AnimationSet set = new AnimationSet(false);

        //将所有的动画添加到动画集合中
        set.addAnimation(ra);
        set.addAnimation(aa);
        set.addAnimation(sa);
        set.addAnimation(ta);

        //播放所有的动画
        iv.startAnimation(set);
    }
}

补间动画

标签：

原文地址：http://blog.csdn.net/u010105970/article/details/51351993