android系统控件动画程序员

Android基础动画之Tween Animation和Fram

2017-02-21  本文已影响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();
上一篇下一篇

猜你喜欢

热点阅读