Android 动画之属性动画(三)

Android 动画之属性动画(三)#


Animation Listeners##

前面的两节中都或多或少提到了动画监听 Animation Listeners 这个概念。它用来监听动画的过程,并且提供一些接口让你实现一些逻辑。比如说你想在动画开始的时候进行一些操作,就需要为这个动画设置一个监听器,然后实现你的逻辑,这样,当监听器监听到动画开始,就回去实现你的逻辑

Animator.AnimatorListener

Animator 类当中提供了一个 addListener() 方法,这个方法接收一个接口类 AnimatorListener ,获得该接口后就可以重写以下四个方法:

  • onAnimationStart() - 当动画开始的时候调用
  • onAnimationEnd() - 当动画结束后调用
  • onAnimationRepeat() - 当动画重复播放时调用
  • onAnimationCancel() - 当动画被取消的时候调用,并且在调用完这个方法后,会自动调用 onAnimationEnd() 方法

下面的例子中为每一段代码实现了一个逻辑:弹出对应的文字

    anim.addListener(new Animator.AnimatorListener() {
        @Override
        public void onAnimationStart(Animator animator) {
            Toast.makeText(MainActivity.this, "start", Toast.LENGTH_LONG).show();
        }

        @Override
        public void onAnimationEnd(Animator animator) {
            Toast.makeText(MainActivity.this, "End", Toast.LENGTH_LONG).show();
        }

        @Override
        public void onAnimationCancel(Animator animator) {
            Toast.makeText(MainActivity.this, "Cancel", Toast.LENGTH_LONG).show();
        }

        @Override
        public void onAnimationRepeat(Animator animator) {
            Toast.makeText(MainActivity.this, "rapeat", Toast.LENGTH_LONG).show();
        }
    });
    anim.start();
    
    //添加一个按钮,按钮的功能用于cancel动画
    button.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View view) {
            anim.cancel();
        }
    });

来看运行后效果



按下cancel键后


当然如果你不想把所有方法都重写的话,可以使用 AnimatorListenerAdapter 类,如下

anim.addListener(new AnimatorListenerAdapter() {  
@Override  
public void onAnimationEnd(Animator animation) {  
}  
});  

这样的话就可以选择自己想要重写方法进行重写

ValueAnimator.AnimatorUpdateListener

Animator 类当中提供了一个 addUpdateListener() 方法,这个方法接收一个接口类 AnimatorUpdateListener ,获得该接口后就可以重写 onAnimationUpdate() 方法,这个方法为动画提供每一帧的监听,之前在(一)的时候提到,每一帧其实是用一个 value 值来控制的,所以通常情况下我们都需要在每一帧监听的时候获得这个 value 值,就需要调用 ValueAnimator.getAnimatedValue() 方法来获得。

    ValueAnimator vanim = ValueAnimator.ofInt(0,10,20);
    vanim.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
        @Override
        public void onAnimationUpdate(ValueAnimator valueAnimator) {

   //如果之前的ValueAnimtor指定的是Int的i话,那么返回的Value就是int类型,
   也就是返回值类型与你创建的类型一致
            int value = (int) valueAnimator.getAnimatedValue();
        }
    });

Animating Layout Changes to ViewGroups##

属性动画不仅可以让你对 view 类进行动画操作,同时它还可以用于 viewgroup 类的变化进行动画操作。比如说你有一个 gridLayout ,你需要在里面添加按钮,那么按钮加到 gridLayout 是一个动画的过程,系统会有一个默认的动画。如果想要改变这个默认的动画效果,就可以借助 LayoutTransition 类来为这个 gridLayout 修改动画效果。使用步骤:

  1. 新建一个 LayoutTransition
  2. LayoutTransition 通过调用 setAnimator ( int transitionType, Animator animator ) 设置自定义的动画
  3. 为所需要的 ViewGroup 通过 setLayoutTransition( LayoutTransition ) 添加一个 LayoutTransition

需要注意的是在setAnimator()中的第一个参数 transitionType 决定了动画的类型,一共有四种:

  • APPEARING:元素在容器中显现时需要动画显示

  • CHANGE_APPEARING:由于容器中要显现一个新的元素,其它元素的变化需要动画显示

  • DISAPPEARING:元素在容器中消失时需要动画显示

  • CHANGE_DISAPPEARING:由于容器中某个元素要消失,其它元素的变化需要动画显示

      代码:
      LayoutTransition layoutTransition = new LayoutTransition();
      //设置这个动画为缩放
      ObjectAnimator objectAnimator = ObjectAnimator.ofFloat(null,"scaleX",0f,1f);
      layoutTransition.setAnimator(LayoutTransition.APPEARING,objectAnimator);
      gridContainer.setLayoutTransition(layoutTransition);
    
      //通过点击添加按钮,往gridContainer添加button,这里就涉及到了上面第一种类型的动画:appear
    
      add_button.setOnClickListener(new View.OnClickListener() {
          @Override
          public void onClick(View view) {
              Button newButton = new Button(MainActivity.this);
              newButton.setText(String.valueOf(num++));
              gridContainer.addView(newButton, Math.min(1, gridContainer.getChildCount()));
          }
      });
    

可以看到,按钮出现的时候是以缩放的形式出现的



更多关于 LayoutTransition 请查看文档
https://developer.android.com/reference/android/animation/LayoutTransition.html

Using a TypeEvaluator

在第一篇的时候我们就有讲到 Evaluator 这个类。请复习 Android 动画之属性动画(一)>Evaluator 类。有些时候你需要返回的动画返回的 value 不是系统默认的 Int,Float 或 Color 类型的,那么你就可以自己自定义这个 Evaluator 来返回你所需要的类型!比如说一个坐标点。这也是 属性动画补间动画 强大的精髓所在。

那要如何自己实现呢,首先需要继承 TypeEvaluator 接口,然后重写里面的 evaluate() 方法。

//其实FloatEvaluator也是继承TypeEvaluator,来实现的
public class FloatEvaluator implements TypeEvaluator {
//注意看到fraction参数,在第一篇里面提到的参数
public Object evaluate(float fraction, Object startValue, Object endValue) {
    float startFloat = ((Number) startValue).floatValue();
    return startFloat + fraction * (((Number) endValue).floatValue() - startFloat);
}
}

下面我们来实现一个返回一个坐标点的 Evaluator

首先新建一个点类:Point

public class Point {
private float x;
private float y;
public Point(float x,float y) {
this.x = x;
this.y = y;
}

public float getX(){
    return x;
}
public  float getY(){
    return y;
}
}

然后我们新建一个 PointEvaluator ,在里面要实现的是当我们传入一个初始点和结束点,然后实现平缓从初始点到结束点

public class PointEvaluator implements TypeEvaluator {
float x;
float y;
@Override
public Object evaluate(float fraction, Object s, Object e) {
    Point startPoint = (Point) s;
    Point endPoint = (Point) e;
    float x = startPoint.getX()+fraction*(endPoint.getX()-startPoint.getX());
    float y = startPoint.getY()+fraction*(endPoint.getY()-startPoint.getY());
    Point point = new Point(x,y);
    return point;
}
}

然后我们新建一个view,在view里面有一个绘制一个圆,通过对圆心坐标的动画实现球的动画
代码的思路就是在左上角画一个圆,然后对圆心坐标进行进行动画,为动画监听,每得到一个新的圆心坐标就重新绘制view,下面代码略长,耐心看是很容易看懂的

public class myView extends View {                                                                       
Paint mpaint;                                                                                        
Point CurrentPoint = null;                                                                           
float radius;                                                                                        
                                                                                                     
public myView(Context context) {                                                                     
    this(context, null);                                                                             
}                                                                                                    
                                                                                                     
public myView(Context context, AttributeSet attrs) {                                                 
    super(context, attrs);                                                                           
    mpaint = new Paint();                                                                            
    mpaint.setStyle(Paint.Style.FILL);                                                               
    mpaint.setColor(Color.BLUE);                                                                     
    radius = 25f;                                                                                    
} 

//CurrentPoint用来记录当前圆心的位置,用来告诉canvas在哪绘制圆,Currentpoint为空时
则新建一个坐标点,然后设置动画                                                                                                   
                                                                                                     
@Override                                                                                            
protected void onDraw(Canvas canvas) {                                                               
    super.onDraw(canvas);                                                                            
    if (CurrentPoint == null) {                                                                      
        CurrentPoint = new Point(radius, radius);                                                    
        drawCircle(canvas);                                                                          
        setAnimation();                                                                              
    } else {                                                                                         
        drawCircle(canvas);                                                                          
    }                                                                                                
}                                                                                                    
 
//根据当前坐标画圆                                                                                                    
private void drawCircle(Canvas canvas) {                                                             
    canvas.drawCircle(CurrentPoint.getX(), CurrentPoint.getY(), radius, mpaint);                     
}                                                                                                    

//设置动画。每当有新的point返,则通知view重绘                                                                                                     
public void setAnimation() {                                                                         
      ValueAnimator valueAnimator = ValueAnimator.ofObject(new PointEvaluator(),                     
              new Point(radius,radius),
              new Point(getWidth() - radius, getHeight() - radius));        
    valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {                     
        @Override                                                                                    
        public void onAnimationUpdate(ValueAnimator valueAnimator) {                                 
            CurrentPoint = (Point) valueAnimator.getAnimatedValue();                                 
            invalidate();                                                                            
        }                                                                                            
    });                                                                                              
    valueAnimator.setDuration(2000);                                                                 
    valueAnimator.start();                                                                           
}                                                                                                    

}

到此我们已经完成了自定义的 Evaluator ,请自行运行查看效果

Using Interpolators##

前面已经提到过 Interpolators 的作用,这里不再重复。如果你没有找到适合自己的 Interpolators ,那么就可以继承 Interpolators 然后重写 getInterpolation()
方法

以下是系统实现 AccelerateDecelerateInterpolatorLinearInterpolator 的算法:

AccelerateDecelerateInterpolator

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

LinearInterpolator

public float getInterpolation(float input) {
    return input;
}
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 213,752评论 6 493
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 91,100评论 3 387
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 159,244评论 0 349
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 57,099评论 1 286
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,210评论 6 385
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,307评论 1 292
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,346评论 3 412
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,133评论 0 269
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,546评论 1 306
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,849评论 2 328
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,019评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,702评论 4 337
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,331评论 3 319
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,030评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,260评论 1 267
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,871评论 2 365
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,898评论 2 351

推荐阅读更多精彩内容

  • 1 背景 不能只分析源码呀,分析的同时也要整理归纳基础知识,刚好有人微博私信让全面说说Android的动画,所以今...
    未聞椛洺阅读 2,699评论 0 10
  • 写的非常好,强烈推荐给大家 转载请注明出处:http://blog.csdn.net/guolin_blog/ar...
    天天大保建阅读 784评论 0 1
  • 在手机上去实现一些动画效果算是件比较炫酷的事情,因此Android系统在一开始的时候就给我们提供了两种实现动画效果...
    Ten_Minutes阅读 3,870评论 3 11
  • 最近在做个项目,用到了蓝牙打印。一切都是从零开始。踩了很多坑,搞了好几天才搞好,现分享出来,让别人少走弯路!我用的...
    黑森林中的小木屋阅读 1,177评论 7 0
  • 今天是本书的最后一个部分,主要内容是,任何经历都是有价值的,只要你愿意提供你的价值,机会就会出现。而你不需要成为一...
    步履如菲阅读 702评论 0 52