美文网首页android系统控件动画程序员
Android基础动画之Tween Animation和Fram

Android基础动画之Tween Animation和Fram

作者: 饱醉豚我去年买了个表 | 来源:发表于2017-02-21 16:00 被阅读193次

    官网介绍:
    https://developer.android.com/guide/topics/resources/animation-resource.html
    Android动画可分为两大类:

    1. API在11之前主要是:Tween Animation(补间动画)和Frame Animation(帧动画)
    2. API在11之后又添加了属性动画,在11之前的低版本是不能使用属性动画的,不过可以通过Jake大神的兼容库来使用它
      https://github.com/JakeWharton/NineOldAndroids )。
      这篇文章主要介绍补间动画和帧动画!

    补间动画(Tween Animation):

    <?xml version="1.0" encoding="utf-8"?>
    <set xmlns:android="http://schemas.android.com/apk/res/android"
         android:interpolator="@[package:]anim/*interpolator_resource*" 
         android:shareInterpolator=["true" | "false"] >    
    <alpha
          android:fromAlpha="float"       
          android:toAlpha="float" />    
    <scale  
          android:fromXScale="float"        
          android:toXScale="float"        
          android:fromYScale="float"        
          android:toYScale="float"        
          android:pivotX="float"        
          android:pivotY="float" />    
    <translate 
          android:fromXDelta="float"        
          android:toXDelta="float"        
          android:fromYDelta="float"        
          android:toYDelta="float" />    
    <rotate      
          android:fromDegrees="float"       
          android:toDegrees="float"        
          android:pivotX="float"        
          android:pivotY="float" />    
    <set 
     ...    
    </set>
    </set>
    

    这个XML文件只能有一个根元素,<alpha>, <scale>, <translate>, <rotate>中的一个,或者是<set>作为根元素并可以包含上述四种动画元素,<set>中还可以继续嵌套<set>。

    元素:

    1.<set>

    包含其他动画元素(<alpha>, <scale>, <translate>, <rotate>),也可以再嵌套<set>元素
    属性:

    android:interpolator

    Interpolator 被用来修饰动画效果,定义动画的变化率,可以使存在的动画效果accelerated(加速),decelerated(减速),repeated(重复),bounced(弹跳)等。
    1.AccelerateDecelerateInterpolator 在动画开始与结束的地方速率改变比较慢,在中间的时候加速
    2.AccelerateInterpolator 在动画开始的地方速率改变比较慢,然后开始加速
    3.AnticipateInterpolator 开始的时候向后然后向前甩
    4.AnticipateOvershootInterpolator 开始的时候向后然后向前甩一定值后返回最后的值
    5.BounceInterpolator 动画结束的时候弹起
    6.CycleInterpolator 动画循环播放特定的次数,速率改变沿着正弦曲线
    7.DecelerateInterpolator 在动画开始的地方快然后慢
    8.LinearInterpolator 以常量速率改变
    9.OvershootInterpolator 向前甩一定值后再回到原来位置
    更多介绍:https://my.oschina.net/banxi/blog/135633

    android:shareInterpolator

    如果设置android:shareInterpolator="true"则表示所有的子元素共用一个Interpolator

    2.<alpha>

    淡入淡出动画效果

    android:fromAlpha

    起始透明度(0.0~1.0),0.0表示完全透明,1.0表示不透明

    android:toAlpha

    结束透明度(0.0~1.0),0.0表示完全透明,1.0表示不透明

    3.<scale>

    缩放动画

    android:fromXScale

    起始x轴坐标,1.0表示没有变化

    android:toXScale

    终止x轴坐标,1.0表示没有变化

    android:fromYScale

    起始y轴坐标,1.0表示没有变化

    android:toYScale

    终止y轴坐标,1.0表示没有变化

    android:pivotX

    pivotX表示缩放的中轴点X坐标,距离自身左边缘的位置
    android:pivotX="50"这种方法使用绝对位置定位,相当于代码中的 Animation.ABSOLUTE
    android:pivotX="50%"这种方法相对于控件本身定位,相当于代码中的 Animation.RELATIVE_TO_SELF
    android:pivotX="50%p" 这种方法相对于控件 的父控件定位,相当于代码中上 Animation.RELATIVE_TO_PARENT
    pivotX表示相对于物件的X坐标的位置,从0%-100%中取值,50%为图片的X方向坐标上的中点位置

    android:pivotY

    同理,pivotY表示缩放的中轴点Y坐标,距离自身上边缘的位置

    3.<translate>

    移动动画,支持下面的三种格式:
    -100%~100%:表示相对于自身的百分比
    -100%p~100%p:表示相对于父控件的百分比
    -100~100:表示移动的绝对值

    android:fromXDelta

    起始X轴坐标

    android:toXDelta

    终止的X轴坐标

    android:fromYDelta

    起始Y轴坐标

    android:toYDelta

    终止Y轴坐标

    4.<rotate>

    旋转动画

    android:fromDegrees

    起始位置的角度

    android:toDegrees

    结束位置的角度

    android:pivotX

    旋转中心的X轴坐标:
    1)当值为"50",表示使用绝对位置定位
    2)当值为"50%",表示使用相对于控件本身定位
    3)当值为"50%p",表示使用相对于控件的父控件定位

    android:pivotY

    旋转中心的Y轴坐标

    EXAMPLE:

    XML文件保存路径:

    <set xmlns:android="http://schemas.android.com/apk/res/android"   
         android:shareInterpolator="false">    
        <scale 
         android:interpolator="@android:anim/accelerate_decelerate_interpolator" 
         android:fromXScale="1.0"        
         android:toXScale="1.4"        
         android:fromYScale="1.0"        
         android:toYScale="0.6"        
         android:pivotX="50%"        
         android:pivotY="50%"        
         android:fillAfter="false"        
         android:duration="700" />    
         <set        
            android:interpolator="@android:anim/accelerate_interpolator"  
            <-- android:startOffset表示延迟执行-->
            android:startOffset="700">        
            <scale            
            android:fromXScale="1.4"            
            android:toXScale="0.0"            
            android:fromYScale="0.6"            
            android:toYScale="0.0"            
            android:pivotX="50%"            
            android:pivotY="50%"            
            android:duration="400" />        
            <rotate            
            android:fromDegrees="0"            
            android:toDegrees="-45"            
            android:toYScale="0.0"            
            android:pivotX="50%"            
            android:pivotY="50%"            
            android:duration="400" />    
         </set>
    </set>
    

    android:startOffset="700"表示延迟700ms执行动画

    动画作用在ImageView上:

    ImageView image = (ImageView) findViewById(R.id.image);
    Animation hyperspaceJump = AnimationUtils.loadAnimation(this, R.anim.hyperspace_jump);
    image.startAnimation(hyperspaceJump);
    

    帧动画(Frame animation)

    帧动画是在XML中定义的顺序显示一系列图片的动画(像放电影一样)
    文件地址:
    res/drawable/filename.xml 文件名将被用来作为 resource ID.

    <?xml version="1.0" encoding="utf-8"?>
    <animation-list
       xmlns:android="http://schemas.android.com/apk/res/android" 
       android:oneshot=["true" | "false"] >    
    <item
       android:drawable="@[package:]drawable/drawable_resource_name"   
       android:duration="*integer*" />
    </animation-list>
    

    元素

    <animation-list>

    <animation-list>必须是根元素,其内部包含若干个<item>元素

    android:oneshot:

    "true" 表示动画只会被执行一次
    "false" 表示动画只会被循环执行

    <item>

    单帧动画,必须是 <animation-list>的子元素

    android:drawable:

    图片资源,用于绘制一帧动画

    android:duration:

    帧动画的持续时间,以毫秒为单位

    例子

    文件保存在:res/anim/rocket.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/rocket_thrust1" 
        android:duration="200" />
        <item 
        android:drawable="@drawable/rocket_thrust2"
        android:duration="200" />    
        <item 
        android:drawable="@drawable/rocket_thrust3" 
        android:duration="200" />
    </animation-list>
    

    应用程序将设置这个动画作为View的背景,然后播放此动画。

    ImageView rocketImage = (ImageView) findViewById(R.id.rocket_image);
    rocketImage.setBackgroundResource(R.drawable.rocket_thrust);
    rocketAnimation = (AnimationDrawable) rocketImage.getBackground();
    rocketAnimation.start();
    

    相关文章

      网友评论

        本文标题:Android基础动画之Tween Animation和Fram

        本文链接:https://www.haomeiwen.com/subject/cujfuttx.html