首先要了解为什么需要插值器,因为在补间动画中,我们一般只定义关键帧(首帧或尾帧),然后由系统自动生成中间帧,生成中间帧的这个过程可以成为“插值”。插值器定义了动画变化的速率,提供不同的函数定义变化值相对于时间的变化规则,可以定义各种各样的非线性变化函数,比如加速、减速等。下面是几种常见的插值器:
Interpolator对象 | 资源ID | 功能作用 |
---|---|---|
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 | 快速到达终点并超出一小步最后回到终点 |
插值器使用法:
<set android:interpolator="@android:anim/accelerate_interpolator">
...
</set>
个性化插值器:
如果系统提供的插值器不能满足需要,可以通过修改插值器的属性优化,比如修改AnticipateInterpolator的加速速率,调整CycleInterpolator的循环次数等。
常见的插值器可调整的属性:
<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
使用修改插值器属性法
在/res/anim下创建一个XML文件(以修改overshootInterpolator属性为例)命名为my_overshoot_interpolator.xml
<?xml version="1.0" encoding="utf-8"?>
<overshootInterpolator xmlns:android="http://schemas.android.com/apk/res/android"
android:tension="7.0"/>
引用到自定义的插值器
<scale xmlns:android="http://schemas.android.com/apk/res/android"
android:interpolator="@anim/my_overshoot_interpolator"
.../>
自定义插值器
如果以上的修改系统插值器属性仍无法满足需要,可以自定义插值器。
-------------------------------------------------------------插值器2------------------------------------------------------------------------------
做了些动画,发现动画都有一个Interpolator的属性,它到底是个啥东西?
网上也有很多解释Interpolator的文章,基本上都是停留在直接翻译SDK的意思层面上。看了,也就明白一个大概。
Interpolator英文意思是: 篡改者; 分类机; 校对机
SDK对Interpolator的描述是:An interpolator defines the rate of change of an animation. This allows the basic animation effects (alpha, scale, translate, rotate) to be accelerated, decelerated, repeated, etc。简而言之Interpolator就是一个“变化率”,一个基本动画的“变化率”。
比如:从A到B的一个平移动画,移动,当然后速度的快慢,那么从A到B可以是匀速、匀加速、匀减速、变速完成这段距离。假设距离为S,时间为t,速度为v,都知道S=v*t。
这个Interpolator在这里就是一个速度控制器,控制速度变化。先给一个对Interpolator的大概理解,接下来站在程序员的角度来认识Interpolator。
Interpolator借口只有一个抽象方法getInterpolation(float input),由此SDK中扩展了另外几个常用Interpolator类,分别是:
——AccelerateInterpolator:动画从开始到结束,变化率是一个加速的过程。
——DecelerateInterpolator:动画从开始到结束,变化率是一个减速的过程。
——CycleInterpolator:动画从开始到结束,变化率是循环给定次数的正弦曲线。
——AccelerateDecelerateInterpolator:动画从开始到结束,变化率是先加速后减速的过程。
——LinearInterpolator:动画从开始到结束,变化率是线性变化。
..............
这里给一个简单的实现Interpolator接口的类:
import android.view.animation.Interpolator;
public class MyInterpolator implements Interpolator {
private float mFactor;
private int i;
public MyInterpolator(int i){
this.i = i;
}
@Override
public float getInterpolation(float input) {
switch(i){
case 1:mFactor = input;
break;
case 2:mFactor = input*input*input;
break;
}
return mFactor;
}
}
从上面看来,自定义一个Interpolator就是用input根据所需构造一个函数出来
比如:这里把初始变量为2的时候,把函数改为:mFactor=3*input。这里给出一个测试出来的效果图
这两个图所做的动画都是往下移动100的距离,时间都为3000ms.并且同时做。那为什么绿色的花移动距离是紫色花移动距离的3倍呢?这里来分析一下。
都是以input为变量的一次线性函数,故两者都是匀速运动,此时后者的速度是前者的3倍,所以移动距离也应该是3被。回过头来看,在设置TranslateAniamtion的时候,明明是移动一样的距离啊!这里可以猜测这时设置的距离就不起效果了,也就是Interpolator改变了之前设置的距离。
现在基本上明白了Interpolator到底是做什么的了!
不说了,玩Dota了
----------------------------------------animation----------------------------------------------------------------------------------------------------
Animation的4个基本动画效果
1、AlphaAnimation:淡入淡出效果
[java]
在代码中实现动画效果的方法:
ImageView imageView = (ImageView) findViewById(R.id.imageView1);
AnimationSet animationSet = new AnimationSet(true);
AlphaAnimation alphaAnimation = new AlphaAnimation(0, 1);
alphaAnimation.setDuration(1000);
alphaAnimation.setStartOffset(10000);
animationSet.addAnimation(alphaAnimation);
//animationSet.setStartOffset(10000);
animationSet.setFillBefore(false);
animationSet.setFillAfter(true);
imageView.startAnimation(animationSet);
在XML文件中实现动画效果的方法:
① 在res目录下创建一个anim文件夹,在里面添加一个alpha.xml文件:
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:interpolator="@android:anim/accelerate_interpolator"
android:fillAfter="true"
android:fillBefore="false">
<alpha
android:fromAlpha="1.0"
android:toAlpha="0.0"
android:startOffset="1000"
android:duration="1000" />
</set>
② 在Activity中使用AnimationUtils获取Animation并进行设置:
Animation animation = AnimationUtils.loadAnimation(MainActivity.this, R.anim.alpha);
imageView.startAnimation(animation);
2、ScaleAnimation:缩放效果
[java]
在代码中实现动画效果:
ImageView imageView = (ImageView) findViewById(R.id.imageView1);
AnimationSet animationSet = new AnimationSet(true);
ScaleAnimation scaleAnimation = new ScaleAnimation(1, 0.5f, 1, 0.5f,
Animation.RELATIVE_TO_SELF, 1f,
Animation.RELATIVE_TO_SELF, 1f);
animationSet.addAnimation(scaleAnimation);
animationSet.setDuration(1000);
imageView.startAnimation(animationSet);
在XML文件中实现动画效果的方法:
① 在res的anim文件夹下,创建一个scale.xml文件:
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:interpolator="@android:anim/accelerate_interpolator">
<scale android:fromXScale="1.0"
android:toXScale="0.0"
android:fromYScale="1.0"
android:toYScale="0.0"
android:pivotX="50%"
android:pivotY="50%"
android:duration="2000" />
</set>
② 在Activity中使用AnimationUtils获取Animation并进行设置:
Animation animation = AnimationUtils.loadAnimation(MainActivity.this, R.anim.scale);
imageView.startAnimation(animation);
3、Rotate:旋转效果
[java]
在代码中实现动画效果:
ImageView imageView = (ImageView) findViewById(R.id.imageView1);
AnimationSet animationSet = new AnimationSet(true);
RotateAnimation rotateAnimation = new RotateAnimation(0, 360,
Animation.RELATIVE_TO_PARENT, 0.5f,
Animation.RELATIVE_TO_PARENT, 0.5f);
rotateAnimation.setDuration(1000);
animationSet.addAnimation(rotateAnimation);
imageView.startAnimation(animationSet);
在XML文件中实现动画效果的方法:
① 在res的anim文件夹下,创建一个rotate.xml文件:
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:interpolator="@android:anim/accelerate_interpolator">
<rotate android:fromDegrees="0"
android:toDegrees="+360"
android:pivotX="50%"
android:pivotY="50%"
android:duration="1000" />
</set>
② 在Activity中使用AnimationUtils获取Animation并进行设置:
Animation animation = AnimationUtils.loadAnimation(MainActivity.this, R.anim.rotate);
imageView.startAnimation(animation);
4、 Translate:移动效果
[java]
在代码中实现动画效果:
ImageView imageView = (ImageView) findViewById(R.id.imageView1);
AnimationSet animationSet = new AnimationSet(true);
TranslateAnimation translateAnimation = new TranslateAnimation(
Animation.RELATIVE_TO_SELF, 0f,
Animation.RELATIVE_TO_SELF, 1.0f,
Animation.RELATIVE_TO_SELF, 0f,
Animation.RELATIVE_TO_SELF, 1.0f);
translateAnimation.setDuration(1000);
animationSet.addAnimation(translateAnimation);
imageView.startAnimation(animationSet);
在XML文件中实现动画效果的方法:
① 在res的anim文件夹下,创建一个translate.xml文件:
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:interpolator="@android:anim/accelerate_interpolator">
<translate
android:fromXDelta="0%p"
android:toXDelta="100%p"
android:fromYDelta="0%p"
android:toYDelta="100%p"
android:duration="1000" />
</set>
其中100%p表示相对于父空间的位置
② 在Activity中使用AnimationUtils获取Animation并进行设置:
Animation animation = (Animation) AnimationUtils.loadAnimation(MainActivity.this, R.anim.translate);
imageView.startAnimation(animation);
也可以使用AnimationSet为一个控件添加多个动画,或者在xml文件中添加多个动画标签,以下分别使用代码和XML文件实现相同的效果:
代码中实现:
AnimationSet animationSet = new AnimationSet(false);
AlphaAnimation alpha = new AlphaAnimation(1.0f, 0.0f);
ScaleAnimation scale = new ScaleAnimation(1, 0.5f, 1, 0.5f,
Animation.RELATIVE_TO_SELF, 0.5f,
Animation.RELATIVE_TO_SELF, 0.5f);
animationSet.addAnimation(alpha);
animationSet.addAnimation(scale);
animationSet.setDuration(2000);
animationSet.setStartOffset(1000);
animationSet.setFillAfter(true);
imageView.startAnimation(animationSet);
XML实现:
alpha.xml
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:interpolator="@android:anim/accelerate_interpolator"
android:shareInterpolator="true"
android:fillAfter="true">
<alpha
android:fromAlpha="1.0"
android:toAlpha="0.0"
android:startOffset="1000"
android:fillAfter="true"
android:duration="2000" />
<scale android:fromXScale="1.0"
android:toXScale="0.5"
android:fromYScale="1.0"
android:toYScale="0.5"
android:pivotX="50%"
android:pivotY="50%"
android:startOffset="1000"
android:duration="2000" />
</set>
Activity中的代码:
Animation animation = AnimationUtils.loadAnimation(MainActivity.this, R.anim.alpha);
imageView.startAnimation(animation);
Interpolator的使用
什么是Interpolator
public class
Interpolator
extends Object
Interpolator定义了动画变化的速率或规律,其具体的实现可以使用以下子类:
AccelerateDecelerateInterpolator:
public class
AccelerateDecelerateInterpolator
extends Object
implements Interpolator
An interpolator where the rate of change starts and ends slowly but accelerates through the middle.
AccelerateInterpolater:
public class
AccelerateInterpolator
extends Object
implements Interpolator
An interpolator where the rate of change starts out slowly and and then accelerates.
CycleInterpolator:
public class
CycleInterpolator
extends Object
implements Interpolator
Repeats the animation for a specified number of cycles. The rate of change follows a sinusoidal pattern.
DecelerateInterpolator:
public class
DecelerateInterpolator
extends Object
implements Interpolator
An interpolator where the rate of change starts out quickly and and then decelerates.
LinearInterpolator:
public class
LinearInterpolator
extends Object
implements Interpolator
An interpolator where the rate of change is constant.
这些Interpolator可以在代码或XML文件中定义:
XML文件定义在set标签里或每个动画标签
set标签中定义:
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:interpolator="@android:anim/accelerate_interpolator"
android:shareInterpolator="true"
android:fillAfter="true">
每个动画标签中定义:
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:interpolator="@android:anim/accelerate_interpolator"
android:shareInterpolator="false"
android:fillAfter="true">
<alpha
android:interpolator="@android:anim/accelerate_interpolator"
android:fromAlpha="1.0"
android:toAlpha="0.0"
android:startOffset="1000"
android:fillAfter="true"
android:duration="2000" />
<scale
android:interpolator="@android:anim/accelerate_decelerate_interpolator"
android:fromXScale="1.0"
android:toXScale="0.5"
android:fromYScale="1.0"
android:toYScale="0.5"
android:pivotX="50%"
android:pivotY="50%"
android:startOffset="1000"
android:duration="2000" />
</set>
在代码中设置:
AnimationSet animationSet = new AnimationSet(true);
animationSet.setInterpolator(new AccelerateInterpolator());
或者分别为每个动画设置:
AnimationSet animationSet = new AnimationSet(false);
AlphaAnimation alpha = new AlphaAnimation(1.0f, 0.0f);
alpha.setInterpolator(new AccelerateInterpolator());
ScaleAnimation scale = new ScaleAnimation(1, 0.5f, 1, 0.5f,
Animation.RELATIVE_TO_SELF, 0.5f,
Animation.RELATIVE_TO_SELF, 0.5f);
scale.setInterpolator(new AccelerateDecelerateInterpolator());
Frame-By-Frame Animations的使用
① 准备4张图片run1.png,run2.png,run3.png,run4.png分别放到res的三个drawable文件夹中
② 在res的drawable-ldpi目录下创建一个anim_run.xml文件:
<?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/run1" android:duration="100" />
<item android:drawable="@drawable/run2" android:duration="100" />
<item android:drawable="@drawable/run3" android:duration="100" />
<item android:drawable="@drawable/run4" android:duration="100" />
</animation-list>
③ 在Activity中使用xml文件设置ImageView控件imageView的背景源,并获取AnimationDrawable进行显示动画:
imageView.setBackgroundResource(R.drawable.anim_run);
AnimationDrawable animationDrawable = (AnimationDrawable)imageView.getBackground();
animationDrawable.start();
使用LayoutAnimationController设置ListView的动画
在使用LayoutAnimationController控制ListView控件的样式效果的方法:
① 在res的anim文件夹中创建一个list_anim.xml文件用于控制ListView控件的动画:
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:interpolator="@android:anim/accelerate_interpolator"
android:shareInterpolator="true">
<scale android:fromXScale="0.0"
android:toXScale="1.0"
android:fromYScale="0.0"
android:toYScale="1.0"
android:pivotX="50%"
android:pivotY="50%"
android:duration="1000" />
</set>
② 创建一个布局文件item.xml用于设置ListView的item的样式:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent" android:layout_height="fill_parent"
android:orientation="horizontal" android:paddingLeft="10dip"
android:paddingRight="10dip" android:paddingTop="1dip"
android:paddingBottom="1dip">
<TextView android:id="@+id/user_name" android:layout_width="180dip"
android:layout_height="30dip"
android:textSize="10pt"
android:singleLine="true" />
<TextView android:id="@+id/user_id" android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:textSize="10pt"
android:singleLine="true"/>
</LinearLayout>
③ 在主Activity的布局文件main.xml中添加一个ListView
<ListView
android:id="@id/android:list"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:scrollbars="vertical"
android:layoutAnimation="@anim/anim_layout"
/>
④ 创建一个MainActivity继承ListActivity,并在onCreate方法中添加如下代码:
ListView listView = getListView();
List<HashMap<String, String>> list = new ArrayList<HashMap<String, String>>();
HashMap<String, String> hm1 = new HashMap<String, String>();
hm1.put("user_name", "arthinking");
hm1.put("user_id", "001");
HashMap<String, String> hm2 = new HashMap<String, String>();
hm2.put("user_name", "Jason");
hm2.put("user_id", "002");
list.add(hm1);
list.add(hm2);
SimpleAdapter simpleAdapter = new SimpleAdapter(this, list,
R.layout.item, new String[] { "user_name", "user_id" },
new int[] { R.id.user_name, R.id.user_id });
listView.setAdapter(simpleAdapter);
//通过Animation获取LayoutAnimationController对ListView进行设置
Animation animation = (Animation)AnimationUtils.loadAnimation(MainActivity.this, R.anim.list_anim);
LayoutAnimationController lac = new LayoutAnimationController(animation);
lac.setOrder(LayoutAnimationController.ORDER_NORMAL);
lac.setDelay(0.5f);
listView.setLayoutAnimation(lac);
这样,运行程序,显示的ListView就会按照xml文件中预置的动画效果显示了。
也可以通过xml文件进行设置动画:
① 在以上步骤的基础之上,在res/anim文件夹下创建一个anim_layout.xml文件:
<?xml version="1.0" encoding="utf-8"?>
<layoutAnimation xmlns:android="http://schemas.android.com/a pk/res/android"
android:delay="1"
android:animationOrder="normal"
android:animation="@anim/list_anim" />
② main在布局文件的的ListView添加如下属性:
android:layoutAnimation="@anim/anim_layout"
这样就在把MainActivity的onCreate()方法中的
//通过Animation获取LayoutAnimationController对ListView进行设置
注释后的代码删除了,直接使用xml进行动画的控制。
AnimationListener的使用
① 可以为一个Button添加一个事件:
button.setOnClickListener(new TestAnimationListener());
② 接下来是编写这个TestAnimationListener类,继承AnimationListener,并覆盖里面的三个方法:
//这里获取控件组,R.id.layoutId为main.xml的整体布局标签的id属性值
ViewGroup viewGroup = (ViewGroup)findViewById(R.id.layoutId);
private class RemoveAnimationListener implements AnimationListener{
//该方法在淡出效果执行结束之后被调用
@Override
public void onAnimationEnd(Animation animation) {
//假设这里要在动画执行完之后删除一个TextView
viewGroup.removeView(textView);
}
@Override
public void onAnimationRepeat(Animation animation) {
System.out.println("onAnimationRepeat");
}
@Override
public void onAnimationStart(Animation animation) {
System.out.println("onAnimationStart");
}
}
③ 同样的,在动画效果中添加控件可以按照如下实现
ScaleAnimation scale = new ScaleAnimation(1, 0.5f, 1, 0.5f,
scale.setDuration(1000);
scale.setStartOffset(100);
TextView textView = new TextView(MainActivity.this);
textView.setText("add");
viewGroup.addView(textView, new LayoutParams(LayoutParams.FILL_PARENT, LayoutParams.WRAP_CONTENT));
textView.startAnimation(scale);