补间动画---- Tween Animation

断了今生、忘了曾经 提交于 2020-01-01 13:29:49

一、补间动画的分类

      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

     

标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!