安科网

详解Android动画之Tween Animation

ohdajing

ohdajing

2014-03-17

关注 关注

前面讲了动画中的Frame动画，今天就来详细讲解一下Tween动画的使用。

同样，在开始实例演示之前，先引用官方文档中的一段话：

Tween动画是操作某个控件让其展现出旋转、渐变、移动、缩放的这么一种转换过程，我们成为补间动画。我们可以以XML形式定义动画，也可以编码实现。

如果以XML形式定义一个动画，我们按照动画的定义语法完成XML，并放置于/res/anim目录下，文件名可以作为资源ID被引用；如果由编码实现，我们需要使用到Animation对象。

如果用定义XML方式实现动画，我们需要熟悉一下动画XML语法：

ImageView image = (ImageView) findViewById(R.id.image);  

Animation testAnim = AnimationUtils.loadAnimation(this, R.anim.test);  

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

下面重点介绍一下插值器的概念：

首先要了解为什么需要插值器，因为在补间动画中，我们一般只定义关键帧（首帧或尾帧），然后由系统自动生成中间帧，生成中间帧的这个过程可以成为“插值”。插值器定义了动画变化的速率，提供不同的函数定义变化值相对于时间的变化规则，可以定义各种各样的非线性变化函数，比如加速、减速等。下面是几种常见的插值器：

AccelerateDecelerateInterpolator@android:anim/accelerate_decelerate_interpolator先加速再减速
AccelerateInterpolator@android:anim/accelerate_interpolator加速
AnticipateInterpolator@android:anim/anticipate_interpolator先回退一小步然后加速前进
AnticipateOvershootInterpolator@android:anim/anticipate_overshoot_interpolator在上一个基础上超出终点一小步再回到终点
BounceInterpolator@android:anim/bounce_interpolator最后阶段弹球效果
CycleInterpolator@android:anim/cycle_interpolator周期运动
DecelerateInterpolator@android:anim/decelerate_interpolator减速
LinearInterpolator@android:anim/linear_interpolator匀速
OvershootInterpolator@android:anim/overshoot_interpolator快速到达终点并超出一小步最后回到终点

然后我们可以这样使用一个插值器：

public float getInterpolation(float input) {  

    return input;  

}  
public float getInterpolation(float input) {
        return input;
    }
加速减速插值器定义如下：
public float getInterpolation(float input) {  

    return (float)(Math.cos((input + 1) * Math.PI) / 2.0f) + 0.5f;  

}  
public float getInterpolation(float input) {
        return (float)(Math.cos((input + 1) * Math.PI) / 2.0f) + 0.5f;
    }
有兴趣的话，大家可以尝试一下自定义一个插值器。

讲了这么久的概念，下面我们就结合实例来演示一下几种Tween动画的应用。

先来介绍一下旋转动画的使用，布局文件/res/layout/rotate.xml如下：

package com.scott.anim;  
  

import android.app.Activity;  


import android.os.Bundle;  


import android.view.View;  


import android.view.animation.Animation;  


import android.view.animation.AnimationUtils;  


import android.view.animation.LinearInterpolator;  


import android.view.animation.RotateAnimation;  

  

public class RotateActivity extends Activity {  

  

    private int currAngle;  


    private View piechart;  

  

    @Override  


    public void onCreate(Bundle savedInstanceState) {  


        super.onCreate(savedInstanceState);  

        setContentView(R.layout.rotate);  
  
        piechart = findViewById(R.id.piechart);  

        Animation animation = AnimationUtils.loadAnimation(this, R.anim.rotate);  

        piechart.startAnimation(animation);  
    }  
      

    public void positive(View v) {  


        Animation anim = new RotateAnimation(currAngle, currAngle + 180, Animation.RELATIVE_TO_SELF, 0.5f,  


                Animation.RELATIVE_TO_SELF, 0.5f);  


        /** 匀速插值器 */  


        LinearInterpolator lir = new LinearInterpolator();  

        anim.setInterpolator(lir);  

        anim.setDuration(1000);  


        /** 动画完成后不恢复原状 */  


        anim.setFillAfter(true);  


        currAngle += 180;  


        if (currAngle > 360) {  


            currAngle = currAngle - 360;  

        }  
        piechart.startAnimation(anim);  
    }  
      

    public void negative(View v) {  


        Animation anim = new RotateAnimation(currAngle, currAngle - 180, Animation.RELATIVE_TO_SELF, 0.5f,  


                Animation.RELATIVE_TO_SELF, 0.5f);  


        /** 匀速插值器 */  


        LinearInterpolator lir = new LinearInterpolator();  

        anim.setInterpolator(lir);  

        anim.setDuration(1000);  


        /** 动画完成后不恢复原状 */  


        anim.setFillAfter(true);  


        currAngle -= 180;  


        if (currAngle < -360) {  


            currAngle = currAngle + 360;  

        }  
        piechart.startAnimation(anim);  
    }  
}  
package com.scott.anim;

import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.view.animation.Animation;
import android.view.animation.AnimationUtils;
import android.view.animation.LinearInterpolator;
import android.view.animation.RotateAnimation;

public class RotateActivity extends Activity {

	private int currAngle;
	private View piechart;

	@Override
	public void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.rotate);

		piechart = findViewById(R.id.piechart);
		Animation animation = AnimationUtils.loadAnimation(this, R.anim.rotate);
		piechart.startAnimation(animation);
	}
	
	public void positive(View v) {
		Animation anim = new RotateAnimation(currAngle, currAngle + 180, Animation.RELATIVE_TO_SELF, 0.5f,
				Animation.RELATIVE_TO_SELF, 0.5f);
		/** 匀速插值器 */
		LinearInterpolator lir = new LinearInterpolator();
		anim.setInterpolator(lir);
		anim.setDuration(1000);
		/** 动画完成后不恢复原状 */
		anim.setFillAfter(true);
		currAngle += 180;
		if (currAngle > 360) {
			currAngle = currAngle - 360;
		}
		piechart.startAnimation(anim);
	}
	
	public void negative(View v) {
		Animation anim = new RotateAnimation(currAngle, currAngle - 180, Animation.RELATIVE_TO_SELF, 0.5f,
				Animation.RELATIVE_TO_SELF, 0.5f);
		/** 匀速插值器 */
		LinearInterpolator lir = new LinearInterpolator();
		anim.setInterpolator(lir);
		anim.setDuration(1000);
		/** 动画完成后不恢复原状 */
		anim.setFillAfter(true);
		currAngle -= 180;
		if (currAngle < -360) {
			currAngle = currAngle + 360;
		}
		piechart.startAnimation(anim);
	}
}
然后，看一下渐变动画，布局文件/res/layout/alpha.xml如下：
package com.scott.anim;  
  

import android.app.Activity;  


import android.os.Bundle;  


import android.util.Log;  


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.widget.ImageView;  

  

public class AlphaActivity extends Activity implements AnimationListener {  

      

    private ImageView splash;  

      

    @Override  


    protected void onCreate(Bundle savedInstanceState) {  


        super.onCreate(savedInstanceState);  

        setContentView(R.layout.alpha);  
          
        splash = (ImageView) findViewById(R.id.splash);  

        Animation anim = AnimationUtils.loadAnimation(this, R.anim.alpha);  


        anim.setAnimationListener(this);  

        splash.startAnimation(anim);  
    }  
      

    public void alpha(View view) {  


        Animation anim = new AlphaAnimation(1.0f, 0.0f);  


        anim.setDuration(3000);  


        anim.setFillAfter(true);  

        splash.startAnimation(anim);  
    }  
  

    @Override  


    public void onAnimationStart(Animation animation) {  


        Log.i("alpha", "onAnimationStart called.");  

    }  
  

    @Override  


    public void onAnimationEnd(Animation animation) {  


        Log.i("alpha", "onAnimationEnd called");  

    }  
  

    @Override  


    public void onAnimationRepeat(Animation animation) {  


        Log.i("alpha", "onAnimationRepeat called");  

    }  
}  
package com.scott.anim;

import android.app.Activity;
import android.os.Bundle;
import android.util.Log;
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.widget.ImageView;

public class AlphaActivity extends Activity implements AnimationListener {
	
	private ImageView splash;
	
	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.alpha);
		
		splash = (ImageView) findViewById(R.id.splash);
		Animation anim = AnimationUtils.loadAnimation(this, R.anim.alpha);
		anim.setAnimationListener(this);
		splash.startAnimation(anim);
	}
	
	public void alpha(View view) {
		Animation anim = new AlphaAnimation(1.0f, 0.0f);
		anim.setDuration(3000);
		anim.setFillAfter(true);
		splash.startAnimation(anim);
	}

	@Override
	public void onAnimationStart(Animation animation) {
		Log.i("alpha", "onAnimationStart called.");
	}

	@Override
	public void onAnimationEnd(Animation animation) {
		Log.i("alpha", "onAnimationEnd called");
	}

	@Override
	public void onAnimationRepeat(Animation animation) {
		Log.i("alpha", "onAnimationRepeat called");
	}
}
接着看一下位移动画，布局文件/res/layout/translate.xml如下：
package com.scott.anim;  
  

import android.app.Activity;  


import android.os.Bundle;  


import android.view.View;  


import android.view.animation.Animation;  


import android.view.animation.AnimationUtils;  


import android.view.animation.OvershootInterpolator;  


import android.view.animation.TranslateAnimation;  


import android.widget.ImageView;  

  

public class TranslateActivity extends Activity {  

      

    private ImageView trans_iamge;  

      

    @Override  


    protected void onCreate(Bundle savedInstanceState) {  


        super.onCreate(savedInstanceState);  

        setContentView(R.layout.tanslate);  
        trans_iamge = (ImageView) findViewById(R.id.trans_image);  

        Animation anim = AnimationUtils.loadAnimation(this, R.anim.translate);  


        anim.setFillAfter(true);  

        trans_iamge.startAnimation(anim);  
    }  
      

    public void translate(View view) {  


        Animation anim = new TranslateAnimation(200, 0, 300, 0);  


        anim.setDuration(2000);  


        anim.setFillAfter(true);  


        OvershootInterpolator overshoot = new OvershootInterpolator();  

        anim.setInterpolator(overshoot);  
        trans_iamge.startAnimation(anim);  
    }  
}  
package com.scott.anim;

import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.view.animation.Animation;
import android.view.animation.AnimationUtils;
import android.view.animation.OvershootInterpolator;
import android.view.animation.TranslateAnimation;
import android.widget.ImageView;

public class TranslateActivity extends Activity {
	
	private ImageView trans_iamge;
	
	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.tanslate);
		trans_iamge = (ImageView) findViewById(R.id.trans_image);
		Animation anim = AnimationUtils.loadAnimation(this, R.anim.translate);
		anim.setFillAfter(true);
		trans_iamge.startAnimation(anim);
	}
	
	public void translate(View view) {
		Animation anim = new TranslateAnimation(200, 0, 300, 0);
		anim.setDuration(2000);
		anim.setFillAfter(true);
		OvershootInterpolator overshoot = new OvershootInterpolator();
		anim.setInterpolator(overshoot);
		trans_iamge.startAnimation(anim);
	}
}
最后，我们再来看以下缩放动画，布局文件/res/layout/scale.xml如下：
package com.scott.anim;  
  

import android.app.Activity;  


import android.os.Bundle;  


import android.view.View;  


import android.view.animation.Animation;  


import android.view.animation.AnimationUtils;  


import android.view.animation.BounceInterpolator;  


import android.view.animation.ScaleAnimation;  


import android.widget.ImageView;  

  

public class ScaleActivity extends Activity {  

      

    private ImageView scale_iamge;  

      

    @Override  


    protected void onCreate(Bundle savedInstanceState) {  


        super.onCreate(savedInstanceState);  

        setContentView(R.layout.scale);  
        scale_iamge = (ImageView) findViewById(R.id.scale_image);  

        Animation anim = AnimationUtils.loadAnimation(this, R.anim.scale);  


        anim.setFillAfter(true);  

        scale_iamge.startAnimation(anim);  
    }  
      

    public void sclae(View view) {  


        Animation anim = new ScaleAnimation(2.0f, 1.0f, 2.0f, 1.0f,   


                Animation.RELATIVE_TO_SELF, 0.5f,   


                Animation.RELATIVE_TO_SELF, 0.5f);  


        anim.setDuration(2000);  


        anim.setFillAfter(true);  


        BounceInterpolator bounce = new BounceInterpolator();  

        anim.setInterpolator(bounce);  
        scale_iamge.startAnimation(anim);  
    }  
}  
package com.scott.anim;

import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.view.animation.Animation;
import android.view.animation.AnimationUtils;
import android.view.animation.BounceInterpolator;
import android.view.animation.ScaleAnimation;
import android.widget.ImageView;

public class ScaleActivity extends Activity {
	
	private ImageView scale_iamge;
	
	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.scale);
		scale_iamge = (ImageView) findViewById(R.id.scale_image);
		Animation anim = AnimationUtils.loadAnimation(this, R.anim.scale);
		anim.setFillAfter(true);
		scale_iamge.startAnimation(anim);
	}
	
	public void sclae(View view) {
		Animation anim = new ScaleAnimation(2.0f, 1.0f, 2.0f, 1.0f, 
				Animation.RELATIVE_TO_SELF, 0.5f, 
				Animation.RELATIVE_TO_SELF, 0.5f);
		anim.setDuration(2000);
		anim.setFillAfter(true);
		BounceInterpolator bounce = new BounceInterpolator();
		anim.setInterpolator(bounce);
		scale_iamge.startAnimation(anim);
	}
}
几种动画运行效果如下图所示：

详解Android动画之Tween Animation详解Android动画之Tween Animation

详解Android动画之Tween Animation详解Android动画之Tween Animation

animation android动画详解 动画 插值 动漫 xml语言 td

ohdajing

ohdajing

0 关注 0 粉丝 0 动态

关注 关注

相关推荐

Android中xml设置Animation动画效果详解

在Android中，Animation动画效果的实现可以通过两种方式进行实现，一种是tweened animation渐变动画，另一种是frame by frame animation画面转换动画。在res文件夹下新建一个anim的文件夹，并在其中建立一个

GoAheadY 2011-04-11

CSS-动画animation

动画可以通过设置多个节点来精确控制一个或一组动画，常用来实现复杂的动画效果。

sdbxpjzq 2020-04-21

css动画 animation

animation-name:textgo;(动画名)animation-duration:3s;animation-timing-function:速度曲线// animation-iteration-count:动画次数//animation-dire

冰蝶 2020-04-20

css3动画添加间隔

因项目需要，需要在元素上实现动画效果，并且需要有动画间隔。坑爹的是animation-delay只有在第一次动画开始的时候才起效。// item解释：这是个包含组件的style信息的对象，属性就是style的各个属性，里面还有一个id，id就是我要设置的组

vavid 2020-04-20

css3动画属性-animation

　　　　CSS动画简单说就是在一段固定的动画时间内暗中在某一频率内改变其CSS某个或某些值,从而达到视觉上的转换动画效果。Animations的很多方面都是可以控制的，包括动画运行时间，开始值和结束值，还有动画的暂停和延迟其开始时间等。　　　　所有动画属性

aSuncat 2020-03-01

5.6 CSS3 animation动画

backwards 在 animation-delay 所指定的一段时间内，在动画显示之前，应用开始属性值

lanzhusiyu 2020-02-23

android 动画基础绘——view 动画(二)[补]

回顾第一篇关于view 动画的，我介绍到view的动画都是针对元素本身的。当我们开发view动画的时候，我们看到几个元素在做相同规律的变化，如果我们去一个个设置的话，当然是可以的，但是呢一个代码不美观。同样我们看到，我们进入下一个页面的时候，那么有一个切换

csdnuuu 2020-02-14

CSS3(4)---动画(animation)

过渡 只能指定属性的 开始值 与 结束值，然后在这两个属性值之间进行平滑过渡来实现动画效果，因此只能实现简单的动画效果。animation:动画名称 动画时间 运动曲线 何时开始 播放次数 是否反方向;animation-timing-functio

CaiKanXP 2020-01-12

CSS3(4)---动画(animation)

过渡 只能指定属性的 开始值 与 结束值，然后在这两个属性值之间进行平滑过渡来实现动画效果，因此只能实现简单的动画效果。animation:动画名称 动画时间 运动曲线 何时开始 播放次数 是否反方向;animation-timing-functio

lanzhusiyu 2020-01-05

CSS动画Animation

之前说的过渡也是属于动画的范围，只不过它只能是开始到过渡这两个点，中间由浏览器去完成，而动画允许开发者一帧一帧的去编码。from就是之前的状态，to是之后的状态，嗯，这个其实和过渡没啥区别，这是第一种写法。animation: name duration

zengni 2019-12-25

css动画

使用css实现动画有两种方式，animation和transition。transition-property规定设置过渡效果的 CSS 属性的名称transition-duration规定完成过渡效果需要多少秒或毫秒transition-timing-f

waterv 2019-12-10

css3动画系列之@keyframes规则

html5+css3出现以后，很多优秀的动画效果因为个别主流浏览器不支持的原因，被使用的很少，现在很多做微营销的公司，很多产品是在微信里浏览和使用，微信默认浏览器支持的都是webkit内核，所有很多css3的特性都是支持的，可以大胆使用，尤其是一些动画样式

sorryericsson 2014-01-16

CSS3 animation动画与transition过渡比较

动画以低速开始，然后加快，在结束前变慢。动画以低速结束。可能的值是从 0 到 1 的数值。animation动画比transition过渡多了下面的属性。动画应该正常播放。alternate:动画先正后反播放。animation-fill-mode : n

somboy 2019-11-06

纯CSS实现放烟花效果

// 40upx -30upx 0 #FF7F50, 70upx -10upx 0 #00FFFF, 130upx -20upx 0 #9932CC, 230upx 0 0 #00FFFF,//

沈宫新 2020-06-11

炫酷的字体效果

<!DOCTYPE html>. padding: 0;margin: 0;width: 100vh;height: 100vh;display: flex;justify-content: center;align-items: center

ShylaDong 2020-02-25

css基础面试题

页面被加载时，link会同时被加载，而@import引用的css会等到页面加载结束后加载。link是html标签，因此没有兼容性，而@import只有IE5以上才能识别。align-self：允许单个项目与其他项目不一样的对齐方式，可以覆盖align-it

wangjie 2020-02-12

python isinstance函数（21）

isinstance() 函数是python中的一个内置函数，主要用于检测变量类型，返回值是bool值 ，在python内置函数中，与该函数相似的还有另外一个内置函数 type()。classinfo :可以是直接或者间接类名、基本类型或者由它们组成的元组

wangqing 2019-12-28

css3动画系列之animation 属性

animation与@keyframes同时使用才可起作用,这里详细介绍下animation的所有用法：。规定需要绑定到选择器的 keyframe 的名称。默认值是 0，意味着没有动画效果。animation-timing-function 规定动画的速度

我就是停不下来 2014-01-16

CSS3新特性之animation(纯CSS实现轮播图)

---->是为了消除每个li换行所带来的间距问题

切慕溪水 2019-11-17

html5 canvas结合js实现的非常酷的ascii animation动画特效

原文：html5 canvas结合js实现的非常酷的ascii animation动画特效

风火一回一生不毁 2014-05-29
ohdajing

ohdajing

W3CSchool教程
HTML 教程
CSS 教程
Bootstrap 教程
Javascript 教程
jQuery 教程
后端教程
C 教程
Java 教程
PHP 教程
Python 教程
Go 教程
移动开发
Android 教程
Swift 教程
Kotlin 教程
jQuery Mobile 教程
ionic 教程
关于我们
新闻动态
联系方式
招聘英才
安科实验室
帮助与反馈

安科网(Ancii)，中国第一极客网

Copyright © 2013 - 2019 Ancii.com

京ICP备18063983号 京公网安备11010802014868号