Android基础篇-补间动画（Tween）

有头发的猿

已于 2022-02-07 11:04:39 修改

阅读量540

点赞数

分类专栏： Android基础文章标签： android 动画 tween

于 2016-11-05 12:33:23 首次发布

本文链接：https://blog.csdn.net/qq_33750826/article/details/53044719

版权

Android基础专栏收录该内容

28 篇文章 3 订阅

订阅专栏

效果图：
这里写图片描述

补间动画重点内容是可以对View进行一系列的动画操作，包括淡入淡出、缩放、平移、旋转四种。

下面的每个动画效果都可以设置一个Interpolator，所以给代码之前这里先讲一下 Interpolator（插值）被用来修饰动画效果，定义动画的变化率，可以使存在的动画效果accelerated(加速)，decelerated(减速),repeated(重复),bounced(弹跳)等。

它可以插入以下值：
AccelerateDecelerateInterpolator 在动画开始与结束的地方速率改变比较慢，在中间的时候加速

AccelerateInterpolator 在动画开始的地方速率改变比较慢，然后开始加速

AnticipateInterpolator 开始的时候向后然后向前甩

AnticipateOvershootInterpolator 开始的时候向后然后向前甩一定值后返回最后的值

BounceInterpolator 动画结束的时候弹起

CycleInterpolator 动画循环播放特定的次数，速率改变沿着正弦曲线

DecelerateInterpolator 在动画开始的地方快然后慢

LinearInterpolator 以常量速率改变

OvershootInterpolator 向前甩一定值后再回到原来位置

代码如下：
activity_main:

<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" >

    <ImageView
        android:id="@+id/iv_image"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1" 
        android:background="@drawable/seven"/>

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

        <Button
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:onClick="alpha_anim"
            android:text="透明动画" />

        <Button
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:onClick="scale_anim"
            android:text="缩放动画" />

        <Button
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:onClick="rotate_anim"
            android:text="旋转动画" />

        <Button
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:onClick="translate_anim"
            android:text="移动动画" />
    </LinearLayout>

</LinearLayout>

res/anim/alpha_anim.xml (透明动画）

<?xml version="1.0" encoding="utf-8"?>
<alpha xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="5000"
    android:fromAlpha="1.0"
    android:interpolator="@android:anim/linear_interpolator"
    android:toAlpha="0.1" >
    <!-- fromAlpha:设置起始的透明度 -->
    <!-- toAlpha:设置结束的透明度 -->

</alpha>

res/anim/rotate_anim.xml （旋转动画）

<?xml version="1.0" encoding="utf-8"?>
<rotate xmlns:android="http://schemas.android.com/apk/res/android"
    android:fromDegrees="0.0"
    android:pivotX="50%"
    android:pivotY="50%"
    android:interpolator="@android:anim/cycle_interpolator"
    android:toDegrees="180"
    android:duration="5000" >
    <!-- fromDegrees:设置起始的旋转角度 -->
    <!-- toDegrees:设置结束的旋转角度 -->
    

</rotate>

res/anim/scale_anim.xml （缩放动画）

<?xml version="1.0" encoding="utf-8"?>
<scale xmlns:android="http://schemas.android.com/apk/res/android"
    android:pivotX="50%"
    android:pivotY="50%"
    android:fromXScale="1.0"
    android:toXScale="0.1"
    android:fromYScale="1.0"
    android:toYScale="0.1"
    android:duration="5000"
    android:fillAfter="true" >

    
    <!--android:pivotX 設置縮放的x軸坐標  -->
    <!--android:pivotY 設置縮放的y軸坐標  -->
    <!--android:fromXScale 設置縮放的x軸的起始大小  -->
    <!--android:toXScale 設置縮放的x軸的最終大小  -->
    <!--android:fromYScale 設置縮放的y軸的起始大小  -->
    <!--android:fromYScale 設置縮放的x軸的最終大小  -->
</scale>

res/anim/translate_anim.xml （位移动画）

<?xml version="1.0" encoding="utf-8"?>
<translate xmlns:android="http://schemas.android.com/apk/res/android"
    android:fromXDelta="10%" 
    android:fromYDelta="10%"
    android:toXDelta="80%"
    android:toYDelta="80%"
    android:duration="5000"
    android:fillAfter="true"
   >
    <!--android:fromXDelta 設置位移起始的x軸坐標  -->
    <!--android:fromYDelta 設置位移起始的y軸坐標  -->
    <!--android:toXDelta 設置位移结束的x軸坐标  -->
    <!--android:toYDelta 設置位移结束的Y軸坐标  -->

</translate>

MainActivity

import android.os.Bundle;
import android.app.Activity;
import android.view.View;
import android.view.animation.AlphaAnimation;
import android.view.animation.Animation;
import android.view.animation.Animation.AnimationListener;
import android.view.animation.AnimationUtils;
import android.view.animation.CycleInterpolator;
import android.view.animation.LinearInterpolator;
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 iv_image;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        iv_image = (ImageView) findViewById(R.id.iv_image);

    }

    public void alpha_anim(View view) {
        //加载动画
        Animation animation = AnimationUtils.loadAnimation(this,
                R.anim.alpha_anim);
        // 表示动画播放结束后，是否保存最后的状态
        animation.setFillAfter(true);
        animation.setAnimationListener(animationListener);
        iv_image.startAnimation(animation);
    }

    private AnimationListener animationListener = new AnimationListener() {

        //动画开始时做的事情
        @Override
        public void onAnimationStart(Animation animation) {
            // TODO Auto-generated method stub

        }

        //替换该动画
        @Override
        public void onAnimationRepeat(Animation animation) {
            // TODO Auto-generated method stub

        }

        //动画结束时可以做的事情
        @Override
        public void onAnimationEnd(Animation animation) {
            // TODO Auto-generated method stub
            rotate_anim(iv_image);
        }
    };

    /**
     * 通过java代码实现透明动画的效果
     * */
    public void alpha_java(View v) {
        AlphaAnimation animation = new AlphaAnimation(0.0f, 1.0f);
        animation.setDuration(3000);
        animation.setFillAfter(true);
        animation.setInterpolator(new LinearInterpolator());
        iv_image.startAnimation(animation);
    }

    public void scale_anim(View view) {
        scale_xml();
        // scale_java();
    }

     /**
     * 通过xml代码实现缩放动画的效果
     * */
    public void scale_xml() {
        Animation animation = AnimationUtils.loadAnimation(this,
                R.anim.scale_anim);
        animation.setInterpolator(new CycleInterpolator(1.0f));
        iv_image.startAnimation(animation);
    }


    /**
     * 通过java代码实现缩放动画的效果
     * */
    public void scale_java() {
        ScaleAnimation animation = new ScaleAnimation(1.0f, 0.1f, 1.0f, 0.1f,
                iv_image.getWidth() / 2, iv_image.getHeight() / 2);
        animation.setDuration(5000);
        animation.setInterpolator(new LinearInterpolator());
        animation.setFillAfter(true);
        iv_image.startAnimation(animation);
    }

    
    public void rotate_anim(View view) {
        rotate_xml();
        // rotate_java();
    }

    /**
     * 通过xml代码实现旋轉动画的效果
     * */
    public void rotate_xml() {
        Animation animation = AnimationUtils.loadAnimation(this,
                R.anim.rotate_anim);
        animation.setFillAfter(true);
        iv_image.startAnimation(animation);
    }

    /**
     * 通过java代码实现旋轉动画的效果
     * */
    public void rotate_java() {
        RotateAnimation animation = new RotateAnimation(0.0f, 720.0f,
                iv_image.getWidth() / 2, iv_image.getHeight() / 2);
        animation.setDuration(5000);
        // 保存結束后的狀態
        animation.setFillAfter(true);
        animation.setInterpolator(new LinearInterpolator());
        iv_image.startAnimation(animation);
    }

    public void translate_anim(View view) {
        Animation animation = AnimationUtils.loadAnimation(this,
                R.anim.translate_anim);
        animation.setInterpolator(new LinearInterpolator());
        iv_image.startAnimation(animation);
    }
    
    /**
     * 通过xml代码实现位移动画的效果
     * */
    public void translate_xml() {
        Animation animation = AnimationUtils.loadAnimation(this,
                R.anim.translate_anim);
        animation.setInterpolator(new LinearInterpolator());
        iv_image.startAnimation(animation);
    }


    /**
     * 通过java代码实现位移动画的效果
     * */
    public void translate_java() {
        TranslateAnimation animation = new TranslateAnimation(
                iv_image.getWidth() / 2, iv_image.getWidth() / 5,
                iv_image.getWidth() / 2, iv_image.getWidth() / 5);
        animation.setDuration(5000);
        animation.setFillAfter(true);
        animation.setInterpolator(new LinearInterpolator());
        iv_image.startAnimation(animation);
    }

}

此动画从java与xml两方面进行了实现，还是比较详细的，不会的小伙伴赶快敲起来吧

有头发的猿

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
Android基础篇-补间动画（Tween）

效果图：补间动画重点内容是可以对View进行一系列的动画操作，包括淡入淡出、缩放、平移、旋转四种。下面的每个动画效果都可以设置一个Interpolator，所以给代码之前这里先讲一下 Interpolator（插值）被用来修饰动画效果，定义动画的变化率，可以使存在的动画效果accelerated(加速)，decelerated(减速),repeated(重复),bounced(弹跳)等。它可以
复制链接

扫一扫