zoukankan      html  css  js  c++  java
  • Android自定义控件:动画类---插值器Interpolator

    一、概述

    Interpolator属性是Animation类的一个XML属性,所以alpha、scale、rotate、translate、set都会继承得到这个属性。Interpolator被译为插值器,其实我不大能从字面上理解为什么会这样译,其实他是一个指定动画如何变化的东东,跟PS里的动作有点类似:随便拿来一张图片,应用一个动作,图片就会指定变化。

    Interpolator的系统值有下面几个:


    意义如下:

    • AccelerateDecelerateInterpolator   在动画开始与介绍的地方速率改变比较慢,在中间的时候加速
    • AccelerateInterpolator                     在动画开始的地方速率改变比较慢,然后开始加速
    • AnticipateInterpolator                      开始的时候向后然后向前甩
    • AnticipateOvershootInterpolator     开始的时候向后然后向前甩一定值后返回最后的值
    • BounceInterpolator                          动画结束的时候弹起
    • CycleInterpolator                             动画循环播放特定的次数,速率改变沿着正弦曲线
    • DecelerateInterpolator                    在动画开始的地方快然后慢
    • LinearInterpolator                            以常量速率改变
    • OvershootInterpolator                      向前甩一定值后再回到原来位置
    下面看看各个标签在应用上面的每个插值器后会运动轨迹会怎样。

    二、scale标签

    下面先看看Scale标签应用插值器后,都会变成什么样。

    先看下XML代码:(从控件中心点,从0放大到1.4倍,保持结束时的状态)

    [html] view plain copy
     在CODE上查看代码片派生到我的代码片
    1. <?xml version="1.0" encoding="utf-8"?>  
    2. <scale xmlns:android="http://schemas.android.com/apk/res/android"  
    3.     android:interpolator="@android:anim/accelerate_decelerate_interpolator"  
    4.     android:fromXScale="0.0"  
    5.     android:toXScale="1.4"  
    6.     android:fromYScale="0.0"  
    7.     android:toYScale="1.4"  
    8.     android:pivotX="50%"  
    9.     android:pivotY="50%"  
    10.     android:duration="700"   
    11.     android:fillAfter="true"  
    12. />  
    下面一个个看看,每个xml值对应的scale动画是怎样的。


                       AccelerateInterpolator                                                 DecelerateInterpolator                    

    在动画开始的地方速率改变比较慢,然后开始加速                   在动画开始的地方快然后慢

         

                AnticipateInterpolator                                            AnticipateOvershootInterpolator 

          开始的时候向后然后向前甩                                开始的时候向后然后向前甩一定值后返回最后的值

       

                 BounceInterpolator                                                      CycleInterpolator       

                动画结束的时候弹起                             动画循环播放特定的次数,速率改变沿着正弦曲线

       

                            LinearInterpolator                                  OvershootInterpolator  

                          以常量速率改变                                向前甩一定值后再回到原来位置

       

    三、rotate标签

    下面先看看rotate标签应用插值器后,都会变成什么样。

    先看下XML代码:(从控件中心点,从0放大到1.4倍,保持结束时的状态)

    [html] view plain copy
     在CODE上查看代码片派生到我的代码片
    1. <?xml version="1.0" encoding="utf-8"?>  
    2. <rotate xmlns:android="http://schemas.android.com/apk/res/android"  
    3.     android:interpolator="@android:anim/accelerate_decelerate_interpolator"  
    4.     android:fromDegrees="0"  
    5.     android:toDegrees="360"  
    6.     android:pivotX="50%"  
    7.     android:pivotY="50%"  
    8.     android:duration="700"   
    9.     android:fillAfter="true"  
    10. />  
    AccelerateDecelerateInterpolator   在动画开始与介绍的地方速率改变比较慢,在中间的时候加速


                       AccelerateInterpolator                                                 DecelerateInterpolator                    

    在动画开始的地方速率改变比较慢,然后开始加速                   在动画开始的地方快然后慢

          

                AnticipateInterpolator                                            AnticipateOvershootInterpolator 

          开始的时候向后然后向前甩                                开始的时候向后然后向前甩一定值后返回最后的值

       

                 BounceInterpolator                                                      CycleInterpolator       

                动画结束的时候弹起                             动画循环播放特定的次数,速率改变沿着正弦曲线

       

                            LinearInterpolator                                  OvershootInterpolator  

                          以常量速率改变                                向前甩一定值后再回到原来位置

       

    四、alpha标签

    下面先看看alpha标签应用插值器后,都会变成什么样。

    将透明度从0变成1.0,使用不同的插值器看看有什么不同(因为只是透明度的变化,所以基本看不出来有什么不同)

    [html] view plain copy
     在CODE上查看代码片派生到我的代码片
    1. <?xml version="1.0" encoding="utf-8"?>  
    2. <alpha xmlns:android="http://schemas.android.com/apk/res/android"  
    3.     android:interpolator="@android:anim/accelerate_decelerate_interpolator"  
    4.     android:fromAlpha="0.0"  
    5.     android:toAlpha="1.0"  
    6.     android:duration="3000"   
    7.     android:fillAfter="true"  
    8. />  
    AccelerateDecelerateInterpolator   在动画开始与介绍的地方速率改变比较慢,在中间的时候加速

                       AccelerateInterpolator                                                 DecelerateInterpolator                    

    在动画开始的地方速率改变比较慢,然后开始加速                   在动画开始的地方快然后慢

       

                AnticipateInterpolator                                            AnticipateOvershootInterpolator 

          开始的时候向后然后向前甩                                开始的时候向后然后向前甩一定值后返回最后的值

       

                 BounceInterpolator                                                      CycleInterpolator       

                动画结束的时候弹起                             动画循环播放特定的次数,速率改变沿着正弦曲线

       

                            LinearInterpolator                                   OvershootInterpolator  

                          以常量速率改变                                 向前甩一定值后再回到原来位置

       

    五、translate标签

    下面先看看translate标签应用插值器后,都会变成什么样。

    把控件从(0,0)平移到(-200,-200)的位置,保持结束时状态不变,使用不同插值器。

    [html] view plain copy
     在CODE上查看代码片派生到我的代码片
    1. <?xml version="1.0" encoding="utf-8"?>  
    2. <translate xmlns:android="http://schemas.android.com/apk/res/android"  
    3.     android:interpolator="@android:anim/accelerate_decelerate_interpolator"  
    4.     android:fromXDelta="0"     
    5.     android:toXDelta="-200"    
    6.     android:fromYDelta="0"    
    7.     android:toYDelta="-200"    
    8.     android:duration="2000"    
    9.     android:fillAfter="true"  
    10. />  

    AccelerateDecelerateInterpolator   在动画开始与介绍的地方速率改变比较慢,在中间的时候加速

                       AccelerateInterpolator                                                 DecelerateInterpolator                    

    在动画开始的地方速率改变比较慢,然后开始加速                   在动画开始的地方快然后慢

       

                AnticipateInterpolator                                            AnticipateOvershootInterpolator 

          开始的时候向后然后向前甩                                开始的时候向后然后向前甩一定值后返回最后的值

       

                 BounceInterpolator                                                      CycleInterpolator       

                动画结束的时候弹起                             动画循环播放特定的次数,速率改变沿着正弦曲线

       

                            LinearInterpolator                                  OvershootInterpolator  

                          以常量速率改变                                向前甩一定值后再回到原来位置

       


    这篇文章到这就结束了,因为动画比较多,可能看的会有点晕,下面我会给出上面效果所对应的源码,大家可以运行一下。

    如果我的文章能帮到您,请加关注,谢谢。

    源码下载地址:http://download.csdn.net/detail/harvic880925/8038491

    请大家尊重原创者版权,转载请标明出处:http://blog.csdn.net/harvic880925/article/details/40049763 谢谢!

  • 相关阅读:
    June 26th 2017 Week 26th Monday
    June 25th 2017 Week 26th Sunday
    June 24th 2017 Week 25th Saturday
    June 23rd 2017 Week 25th Friday
    June 22nd 2017 Week 25th Thursday
    2018最佳网页设计:就是要你灵感爆棚!!!
    图片素材类Web原型制作分享-Pexels
    想要打动HR的心,UX设计师求职信究竟应该怎么写?
    【UXPA大赛企业专访】Mockplus:“设计替代开发”将成为现实
    2018年最好的医疗网站设计及配色赏析
  • 原文地址:https://www.cnblogs.com/vegetate/p/9997313.html
Copyright © 2011-2022 走看看