补间动画---- Tween Animation

一、补间动画的分类

      Tween Animation作用对象时View，是一种渐进式动画。它支持四种动画效果：AlphaAnimation，ScaleAnimation， RotateAnimation，TranslateAnimation，他们分别对应Animation的四个子类。

名称	xml根标签	子类	效果
平移动画	translate	TranslateAnimation	移动view
缩放动画	scale	ScaleAnimation	放大缩小view
旋转动画	rotate	RotateAnimation	旋转view
透明度动画	alpha	AlphaAnimation	透明度变化view
view动画集合	set	AnimationSet	四种动画集合

特点：

• 实现方式：xml方式，对象类方式
• xml实现方式，xml文件在res/anim/文件下，根布局分别是alpha，scale，rotate，translate，set
• 对象类实现方式     AlphaAnimation，ScaleAnimation，RotateAnimation，TranslateAnimation，AnimationSet

（2）通用属性

名称	解析
duration	动画持续时间，单位ms
fillAfter	boolean值，动画结束时的状态，当值为true是保持动画结束时的状态，默然为false
fillBefore	boolean值，在动画结束后，保持动画开始状态，优先级比fillAfter低
repeatCount	repeatCount  动画重复次数,默认为0
repeatMode	枚举值：Animation.REVERSE    Animation.RESTARE
startOffset	动画之间的间隔时间
zAdjustment	枚举值Animation.ZORDER_NORMAL(默认 0)，Animation.ZORDER_TOP(1)，Animation.ZORDER_BOTTOM(-1)，代表可以在动画过程中调整z轴的顺序，也就是显示层次，0表示维持当前层次，1表示放在其他内容上面，-1表示放在其他内容下
interpolator	动画差值器

 

二、四种动画和动画集合

1、AlphaAnimation

（1）xml方式（根节点是alpha）

//xml文件定义
<?xml version="1.0" encoding="utf-8"?>
<alpha xmlns:android="http://schemas.android.com/apk/res/android"   
    android:fromAlpha="1.0"                                         
    android:toAlpha="0.0"
    android:duration="500"/>   

//使用
Animation alphaAnimation = AnimationUtils.loadAnimation(this, R.anim.alpha);
new ImageView(this).startAnimation(alphaAnimation);

• fromAlpha   开始时透明度，0.0表示透明，1.0表示不透明
• toAlpha： 结束时透明度

（2）AlphaAnimation类实现

AlphaAnimation alphaAnimation = new AlphaAnimation(1.0f, 0.0f);
alphaAnimation.setDuration(500);
alphaAnimation.setFillAfter(true);
alphaAnimation.setInterpolator(this, android.R.anim.decelerate_interpolator);
new ImageView(this).startAnimation(alphaAnimation);

 

2、ScaleAnimation

（1）xml方式（根节点是scale）

//xml文件定义
<?xml version="1.0" encoding="utf-8"?>
<scale xmlns:android="http://schemas.android.com/apk/res/android"
    android:fromXScale="0.0" 
    android:toXScale="1.5"   
    android:fromYScale="0.0"
    android:toYScale="1.5"
    android:pivotX="50%"    
    android:pivotY="50%"
    android:duration="500"/>

//使用
Animation alphaAnimation = AnimationUtils.loadAnimation(this, R.anim.scale);
new ImageView(this).startAnimation(alphaAnimation);

•     fromXScale    fromYScale  动画X轴Y轴的起始缩放倍数，0.0表示收缩到没有；1.0表示正常无伸缩
•     toXScale     toYScale 动画X轴Y轴结束缩放倍数
•     pivotX      缩放起点X轴坐标，可以是数值，百分比，百分比P

1. 数值（如50），中心点为View的左上角的原点在x方向50的位置,
2. 百分比  （如50%），中心点为View的左上角的原点在x方向加上自身宽度50%
3.  百分比p(50%p)，中心点在当前的左上角加上父控件宽度的50%

（2）ScaleAnimation类实现

Animation scaleAnimation = new ScaleAnimation(0.0f, 1.5f, 0.0f, 1.5f, 
Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f);
参数依次为x起始位置，x结束位置，y起始位置，y结束位置，x轴缩放轴点，y轴缩放轴点
scaleAnimation.setDuration(500);
scaleAnimation.setFillAfter(true);
scaleAnimation.setFillBefore(false);
scaleAnimation.setRepeatCount(3);
scaleAnimation.setRepeatMode(Animation.REVERSE);
scaleAnimation.setStartOffset(0);
scaleAnimation.setInterpolator(this, android.R.anim.decelerate_interpolator);
imageView.startAnimation(scaleAnimation);

 

3、RotateAnimation

（1）xml实现（根节点是rotate）

<?xml version="1.0" encoding="utf-8"?>
<rotate xmlns:android="http://schemas.android.com/apk/res/android"
     android:fromDegrees="0"   
     android:toDegrees="-360" 
     android:pivotX="50%"      
     android:pivotY="50%"
     android:duration="500"/>

//使用
Animation alphaAnimation = AnimationUtils.loadAnimation(this, R.anim.rotate);
new ImageView(this).startAnimation(alphaAnimation);

• fromDegrees 动画开始时的角度
• toDegrees 动画结束时物件的旋转角度,正数代表顺时针
• pivotX 旋转点的X值(距离左侧的偏移量)

（2）RotateAnimation类实现

Animation rotateAnimation = new RotateAnimation(0, 360,
Animation.RELATIVE_TO_SELF, 0.5f, 
Animation.RELATIVE_TO_SELF, 0.5f);
rotateAnimation.setDuration(500);
rotateAnimation.setFillAfter(true);
rotateAnimation.setInterpolator(this, android.R.anim.accelerate_decelerate_interpolator);
imageView.startAnimation(rotateAnimation);

 

4、TranslateAnimation

（1）xml方式（根节点是translate）

<?xml version="1.0" encoding="utf-8"?>
<translate xmlns:android="http://schemas.android.com/apk/res/android"   
    android:fromXDelta="100"   
    android:fromYDelta="0"  
    android:toXDelta="0"   
    android:toYDelta="0" 
    android:duration="500"
    android:interpolator="@android:anim/cycle_interpolator"/>

//使用
Animation alphaAnimation = AnimationUtils.loadAnimation(this, R.anim.translate);
new ImageView(this).startAnimation(alphaAnimation);

• fromXDelta

1. 数字50，表示当前View左上角的X轴坐标+50px。
2. 百分比50%，表示当前View的左上角X轴坐标+此View的长度的50%。
3. 百分数p 50%p，当前View左上角X轴坐标+父控件长度的50%

（2）TranslateAnimation类实现

Animation translateAnimation = new TranslateAnimation(0, 100, 0, 0);
//参数依次：x起始位置； x结束位置；y起始位置；y结束位置
translateAnimation.setDuration(500);
translateAnimation.setInterpolator(this, android.R.anim.cycle_interpolator);
translateAnimation.setFillAfter(true);
imageView.startAnimation(translateAnimation);

 

5、AnimationSet

（1）xml实现（根节点是set）

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <alpha
        android:duration="500"
        android:fromAlpha="1.0"
        android:toAlpha="0.0" />

    <scale
        android:duration="500"
        android:fromXScale="0.0"
        android:fromYScale="0.0"
        android:interpolator="@android:anim/decelerate_interpolator"
        android:pivotX="50%"
        android:pivotY="50%"
        android:repeatCount="1"
        android:repeatMode="reverse"
        android:startOffset="0"
        android:toXScale="1.5"
        android:toYScale="1.5" />
</set>

//使用
AnimationSet animationSet = (AnimationSet) AnimationUtils.loadAnimation(this, R.anim.animationset);
imageView.startAnimation(animationSet);

（2）AnimationSet类实现

AnimationSet animationSet = new AnimationSet(true);

Animation alphaAnimation = new AlphaAnimation(1.0f, 0.1f);
alphaAnimation.setDuration(500);

Animation scaleAnimation = new ScaleAnimation(0.0f, 1.5f, 0.0f, 1.5f, 
Animation.RELATIVE_TO_SELF, 0.5f, 
Animation.RELATIVE_TO_SELF, 0.5f);
scaleAnimation.setDuration(500);
scaleAnimation.setRepeatMode(Animation.REVERSE);
scaleAnimation.setStartOffset(0);
scaleAnimation.setInterpolator(this, android.R.anim.decelerate_interpolator);

animationSet.addAnimation(alphaAnimation);
animationSet.addAnimation(scaleAnimation);
imageView.startAnimation(animationSet);

 

三、Tween Animation动画监听事件

AnimationSet set=new AnimationSet(true);
set.setAnimationListener(new Animation.AnimationListener() {
    @Override
    public void onAnimationStart(Animation animation) {
           //动画开始时调用
    }

    @Override
    public void onAnimationEnd(Animation animation) {
           //动画结束时调用
    }

    @Override
    public void onAnimationRepeat(Animation animation) {
           //动画重复是调用
    }
});

四、自定义动画

     除了系统提供的四种View动画外，我们还可以自定义View动画，继承抽象类Animation，重写initialize方法和applyTransformation方法，在initialize方法中做一些初始化工作，在applyTransformation中进行相应的矩阵变化，可以采用Camera简化矩阵变化的过程。

 

五、View动画----LayoutAnimation

1、LayoutAnimation   

     LayoutAnimation作用于ViewGroup，为ViewGroup指定一个动画，当它的子元素出现时会具有我们定义的动画效果。这种控件一般是ListView和RecyclerView，它们的Item会以一定的动画形式出现。

属性名	解析
delay	子元素动画时间延迟
animationOrder（order）	动画顺序：normal，reverse，random
animation（layoutAnimation）	子元素入场动画 ，xml文件在res/anim下

2、实现

第一步：定义item动画

<set
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="400">

    <translate
        android:interpolator="@android:anim/decelerate_interpolator"
        android:fromXDelta="100%p"
        android:toXDelta="0" />

    <alpha
        android:fromAlpha="0.5"
        android:toAlpha="1"
        android:interpolator="@android:anim/accelerate_decelerate_interpolator" />

</set>

第二步：定义layoutAnimation

<?xml version="1.0" encoding="utf-8"?>
<layoutAnimation
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:delay="15%"
    android:animationOrder="normal"
    android:animation="@anim/anim_layout_item"/>

第三步：使用

使用方式一：

<android.support.v7.widget.RecyclerView
    android:id="@+id/recycle"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layoutAnimation="@anim/anim_layout"/>

使用方式二：

LayoutAnimationController controller =
                AnimationUtils.loadLayoutAnimation(context, R.anim.layout_animation_fall_down);
recyclerView.setLayoutAnimation(controller);
recyclerView.scheduleLayoutAnimation();

第四步：备注

数据刷新时：recyclerView.scheduleLayoutAnimation();刷新动画。

 

六、Activity切换效果

1、实现解析

      使用方法overridePendingTransition(int enterAnim,int outAnim)，这个方法必须在startActivity(intent)或者finish()之后被调用才能生效。enterAnim为activity被打开时的动画，outAnim为activity被暂停时的动画

2、用法

   打开新的activity时

Intent intent=new Intent(this,MainActivity.class);
startActivity(intent);
overridePendingTransition(R.anim.enter_anim,R.anim_out_anim);

  activity退出时

@override
public  void  finish(){
   super.finish();
   overridePendingTransition(R.anim.enter_anim,R.anim.out_anim);
}

 

七、插值器----Interpolator

1、系统内置的插值器

插值器名字	解析	对应的xml
AccelerateDecelerateInterpolator	加速减速插值器，开始结尾慢中间快	@android:anim/accelerate_decelerate_interpolator
AccelerateInterpolator	加速插值器，越来越快	@android:anim/accelerate_interpolator
DeceleateInterpolator	减速插值器，越来越慢	@android:anim/decelerate_interpolator
AnticipateInterpolator	反向，先反向改变，然后再加速反向回来	@android:anim/anticipate_interpolator
AnticipateOvershootInterpolator	反向加超越，先反向改变，再加速回来，会超出目的的值然后缓慢移动至目的值	@android:anim/anticipate_overshoot_interpolator
BounceInterpolator	跳跃，快到目的值时会跳跃，类似跳跳球落到地面的效果	@android:anim/bounce_interpolator
CycleInterpolator	循环，值的改变为一正弦函数	@android:anim/cycle_interpolator
LinearInterpolator	线性插值器，匀速动画	@android:anim/linear_interpolator
OvershootInterpolator	超越，超出目的值最后改变到目的值	@android:anim/overshoot_interpolator

2、自定义插值器

（1）动画插值器采用策略设计模式，都是继承了BaseInterpolatpor类，而BaseInterpolatpor都实现了Interpolator接口代码如下：

/**
 * An abstract class which is extended by default interpolators.
 */
abstract public class BaseInterpolator implements Interpolator {
    private @Config int mChangingConfiguration;
    /**
     * @hide
     */
    public @Config int getChangingConfiguration() {
        return mChangingConfiguration;
    }

    /**
     * @hide
     */
    void setChangingConfiguration(@Config int changingConfiguration) {
        mChangingConfiguration = changingConfiguration;
    }
}

Interpolator接口并未做任何操作，只是实现了实现了TimeInterpolator接口

public interface Interpolator extends TimeInterpolator {
    // A new interface, TimeInterpolator, was introduced for the new android.animation
    // package. This older Interpolator interface extends TimeInterpolator so that users of
    // the new Animator-based animations can use either the old Interpolator implementations or
    // new classes that implement TimeInterpolator directly.
}

TimeInterpolator中有个方法，getInterpolation(float input) 参数为动画的进度(0-1)，取 0 时表示动画刚开始，取 1 时表示动画结束，取 0.5 时表示动画中间的位置，其他类推；返回值：表示当前实际想要显示的进度。取值可以超过 1 也可以小于 0，超过 1 表示已经超过目标值，小于 0 表示小于开始位置所有的实现类都要实现这个方法。

（2）自定义实现

public class CustomInterpolator implements Interpolator {
    @Override
    public float getInterpolation(float input) {
        Log.e("msg","input"+input);
        return 2.0f*input-1.0f;
    }
}

八、Tween  Animation实现原理

 

直通车之------Frame  Animation

直通车之------Property Animation