Anidrod-View Animation动画介绍

心已赠人 2022-08-21 02:27 151阅读 0赞

# 介绍: #

视图动画在古老的Android版本系统中就已经提供了，只能被用来设置View的动画。

视图动画，也叫Tween（补间）动画可以在一个视图容器内执行一系列简单变换（位置、大小、旋转、透明度）。譬如，如果你有一个TextView对象，您可以移动、旋转、缩放、透明度设置其文本，当然，如果它有一个背景图像，背景图像会随着文本变化。

补间动画通过XML或Android代码定义，建议使用XML文件定义，因为它更具可读性、可重用性。

如下是视图动画相关的类继承关系：

<table> 
 <thead> 
  <tr> 
   <th>java类名</th> 
   <th>xml关键字</th> 
   <th>描述信息</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>AlphaAnimation</td> 
   <td> 放置在res/anim/目录下</td> 
   <td>渐变透明度动画效果</td> 
  </tr> 
  <tr> 
   <td>RotateAnimation</td> 
   <td> 放置在res/anim/目录下</td> 
   <td>画面转移旋转动画效果</td> 
  </tr> 
  <tr> 
   <td>ScaleAnimation</td> 
   <td> 放置在res/anim/目录下</td> 
   <td>渐变尺寸伸缩动画效果</td> 
  </tr> 
  <tr> 
   <td>TranslateAnimation</td> 
   <td> 放置在res/anim/目录下</td> 
   <td>画面转换位置移动动画效果</td> 
  </tr> 
  <tr> 
   <td>AnimationSet</td> 
   <td> 放置在res/anim/目录下</td> 
   <td>一个持有其它动画元素alpha、scale、translate、rotate或者其它set元素的容器</td> 
  </tr> 
 </tbody> 
</table>

# Animation说明 #

可以看出来Animation抽象类是所有补间动画类的基类，所以基类会提供一些通用的动画属性方法，如下我们就来详细看看这些属性：

<table> 
 <thead> 
  <tr> 
   <th>xml属性</th> 
   <th>java方法</th> 
   <th>解释</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>android:detachWallpaper</td> 
   <td>setDetachWallpaper(boolean)</td> 
   <td>是否在壁纸上运行</td> 
  </tr> 
  <tr> 
   <td>android:duration</td> 
   <td>setDuration(long)</td> 
   <td>动画持续时间，毫秒为单位</td> 
  </tr> 
  <tr> 
   <td>android:fillAfter</td> 
   <td>setFillAfter(boolean)</td> 
   <td>控件动画结束时是否保持动画最后的状态</td> 
  </tr> 
  <tr> 
   <td>android:fillBefore</td> 
   <td>setFillBefore(boolean)</td> 
   <td>控件动画结束时是否还原到开始动画前的状态</td> 
  </tr> 
  <tr> 
   <td>android:fillEnabled</td> 
   <td>setFillEnabled(boolean)</td> 
   <td>与android:fillBefore效果相同</td> 
  </tr> 
  <tr> 
   <td>android:interpolator</td> 
   <td>setInterpolator(Interpolator)</td> 
   <td>设定插值器（指定的动画效果，譬如回弹等）</td> 
  </tr> 
  <tr> 
   <td>android:repeatCount</td> 
   <td>setRepeatCount(int)</td> 
   <td>重复次数</td> 
  </tr> 
  <tr> 
   <td>android:repeatMode</td> 
   <td>setRepeatMode(int)</td> 
   <td>重复类型有两个值，reverse表示倒序回放，restart表示从头播放</td> 
  </tr> 
  <tr> 
   <td>android:startOffset</td> 
   <td>setStartOffset(long)</td> 
   <td>调用start函数之后等待开始运行的时间，单位为毫秒</td> 
  </tr> 
  <tr> 
   <td>android:zAdjustment</td> 
   <td>setZAdjustment(int)</td> 
   <td>表示被设置动画的内容运行时在Z轴上的位置（top/bottom/normal），默认为normal</td> 
  </tr> 
 </tbody> 
</table>

也就是说，无论我们补间动画的哪一种都已经具备了这种属性，也都可以设置使用这些属性中的一个或多个。

那接下来我们就看看每种补间动画特有的一些属性说明吧。

# AlphaAnimation详解 #

<table> 
 <thead> 
  <tr> 
   <th>xml属性</th> 
   <th>java方法</th> 
   <th>解释</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>android:fromAlpha</td> 
   <td>AlphaAnimation(float fromAlpha, …)</td> 
   <td>动画开始的透明度（0.0到1.0，0.0是全透明，1.0是不透明）</td> 
  </tr> 
  <tr> 
   <td>android:toAlpha</td> 
   <td>AlphaAnimation(…, float toAlpha)</td> 
   <td>动画结束的透明度，同上</td> 
  </tr> 
 </tbody> 
</table>

# RotateAnimation详解 #

<table> 
 <thead> 
  <tr> 
   <th>xml属性</th> 
   <th>java方法</th> 
   <th>解释</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>android:fromDegrees</td> 
   <td>RotateAnimation(float fromDegrees, …)</td> 
   <td>旋转开始角度，正代表顺时针度数，负代表逆时针度数</td> 
  </tr> 
  <tr> 
   <td>android:toDegrees</td> 
   <td>RotateAnimation(…, float toDegrees, …)</td> 
   <td>旋转结束角度，正代表顺时针度数，负代表逆时针度数</td> 
  </tr> 
  <tr> 
   <td>android:pivotX</td> 
   <td>RotateAnimation(…, float pivotX, …)</td> 
   <td>缩放起点X坐标（数值、百分数、百分数p，譬如50表示以当前View左上角坐标加50px为初始点、50%表示以当前View的左上角加上当前View宽高的50%做为初始点、50%p表示以当前View的左上角加上父控件宽高的50%做为初始点）</td> 
  </tr> 
  <tr> 
   <td>android:pivotY</td> 
   <td>RotateAnimation(…, float pivotY)</td> 
   <td>缩放起点Y坐标，同上规律</td> 
  </tr> 
 </tbody> 
</table>

# ScaleAnimation详解 #

<table> 
 <thead> 
  <tr> 
   <th>xml属性</th> 
   <th>java方法</th> 
   <th>解释</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>android:fromXScale</td> 
   <td>ScaleAnimation(float fromX, …)</td> 
   <td>初始X轴缩放比例，1.0表示无变化</td> 
  </tr> 
  <tr> 
   <td>android:toXScale</td> 
   <td>ScaleAnimation(…, float toX, …)</td> 
   <td>结束X轴缩放比例</td> 
  </tr> 
  <tr> 
   <td>android:fromYScale</td> 
   <td>ScaleAnimation(…, float fromY, …)</td> 
   <td>初始Y轴缩放比例</td> 
  </tr> 
  <tr> 
   <td>android:toYScale</td> 
   <td>ScaleAnimation(…, float toY, …)</td> 
   <td>结束Y轴缩放比例</td> 
  </tr> 
  <tr> 
   <td>android:pivotX</td> 
   <td>ScaleAnimation(…, float pivotX, …)</td> 
   <td>缩放起点X轴坐标（数值、百分数、百分数p，譬如50表示以当前View左上角坐标加50px为初始点、50%表示以当前View的左上角加上当前View宽高的50%做为初始点、50%p表示以当前View的左上角加上父控件宽高的50%做为初始点）</td> 
  </tr> 
  <tr> 
   <td>android:pivotY</td> 
   <td>ScaleAnimation(…, float pivotY)</td> 
   <td>缩放起点Y轴坐标，同上规律</td> 
  </tr> 
 </tbody> 
</table>

# TranslateAnimation详解 #

<table> 
 <thead> 
  <tr> 
   <th>xml属性</th> 
   <th>java方法</th> 
   <th>解释</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>android:fromXDelta</td> 
   <td>TranslateAnimation(float fromXDelta, …)</td> 
   <td>起始点X轴坐标（数值、百分数、百分数p，譬如50表示以当前View左上角坐标加50px为初始点、50%表示以当前View的左上角加上当前View宽高的50%做为初始点、50%p表示以当前View的左上角加上父控件宽高的50%做为初始点）</td> 
  </tr> 
  <tr> 
   <td>android:fromYDelta</td> 
   <td>TranslateAnimation(…, float fromYDelta, …)</td> 
   <td>起始点Y轴从标，同上规律</td> 
  </tr> 
  <tr> 
   <td>android:toXDelta</td> 
   <td>TranslateAnimation(…, float toXDelta, …)</td> 
   <td>结束点X轴坐标，同上规律</td> 
  </tr> 
  <tr> 
   <td>android:toYDelta</td> 
   <td>TranslateAnimation(…, float toYDelta)</td> 
   <td>结束点Y轴坐标，同上规律</td> 
  </tr> 
 </tbody> 
</table>

# AnimationSet详解 #

AnimationSet继承自Animation，是上面四种的组合容器管理类，没有自己特有的属性，他的属性继承自Animation，所以特别注意，**当我们对set标签使用Animation的属性时会对该标签下的所有子控件都产生影响。**

# Animation实用方法介绍 #

<table> 
 <thead> 
  <tr> 
   <th>Animation类的方法</th> 
   <th>解释</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>reset()</td> 
   <td>重置Animation的初始化</td> 
  </tr> 
  <tr> 
   <td>cancel()</td> 
   <td>取消Animation动画</td> 
  </tr> 
  <tr> 
   <td>start()</td> 
   <td>开始Animation动画</td> 
  </tr> 
  <tr> 
   <td>setAnimationListener(AnimationListener listener)</td> 
   <td>给当前Animation设置动画监听</td> 
  </tr> 
  <tr> 
   <td>hasStarted()</td> 
   <td>判断当前Animation是否开始</td> 
  </tr> 
  <tr> 
   <td>hasEnded()</td> 
   <td>判断当前Animation是否结束</td> 
  </tr> 
 </tbody> 
</table>

# View实用动画方法介绍 #

<table> 
 <thead> 
  <tr> 
   <th>View类的常用动画操作方法</th> 
   <th>解释</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>startAnimation(Animation animation)</td> 
   <td>对当前View开始设置的Animation动画</td> 
  </tr> 
  <tr> 
   <td>clearAnimation()</td> 
   <td>取消当View在执行的Animation动画</td> 
  </tr> 
 </tbody> 
</table>

# XML例子 #

创建res/anim文件夹，在此路径下创建名为custom\_anim.xml文件，内容如下：

<?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动画**

ImageView spaceshipImage = (ImageView) findViewById(R.id.spaceshipImage);
    Animation hyperspaceJumpAnimation = AnimationUtils.loadAnimation(this, R.anim.custom_anim);
    spaceshipImage.startAnimation(hyperspaceJumpAnimation);

# java代码例子 #

在布局文件activity\_main.xml中，添加一个ImageView元素，id设置为imageView。并在java中获取它，并对它设置动画，java代码如下：

public class MainActivity extends AppCompatActivity {
        
    
        private ImageView imageView;
    
        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_main);
    
            imageView = (ImageView) findViewById(R.id.imageView);
            imageView.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View v) {
                    Animation set = getAnimationSet();
                    v.startAnimation(set);
                    imageView.startAnimation(set);
                }
            });
        }
    
        private Animation getAnimationSet(){
            AnimationSet set = new AnimationSet(true);
            Animation alphaAnim = getAlphaAnimation();
            set.addAnimation(alphaAnim);
            Animation scalegetAnim = getScaleAnimation();
            set.addAnimation(scalegetAnim);
            Animation rotateAnim = getRotateAnimation();
            set.addAnimation(rotateAnim);
            Animation translateAnim = getTranslateAnimation();
            translateAnim.setStartOffset(1000);
            set.addAnimation(translateAnim);
            return set;
        }
    
        private Animation getAlphaAnimation(){
            AlphaAnimation animation = new AlphaAnimation((float)1.0, (float)0.8);
            animation.setInterpolator(new DecelerateInterpolator());
            animation.setDuration(1000);
            return animation;
        }
    
        private Animation getTranslateAnimation(){
            TranslateAnimation animation = new
                    TranslateAnimation(
                    Animation.RELATIVE_TO_SELF, 0.0f,
                    Animation.RELATIVE_TO_SELF, 1.0f,
                    Animation.RELATIVE_TO_SELF, 0.0f,
                    Animation.RELATIVE_TO_SELF, 1.0f);
            animation.setInterpolator(new DecelerateInterpolator());
            animation.setDuration(1000);
            return animation;
        }
    
        private Animation getRotateAnimation(){
            RotateAnimation animation = new RotateAnimation(0, 360,
                    Animation.RELATIVE_TO_SELF, 0.5f,
                    Animation.RELATIVE_TO_SELF, 0.5f);
            animation.setInterpolator(new DecelerateInterpolator());
            animation.setDuration(1000);
            return animation;
        }
    
        private Animation getScaleAnimation(){
            Animation animation = new ScaleAnimation(1.0f, 0.5f, 1.0f, 0.5f,
                    Animation.RELATIVE_TO_SELF, 0.5f,
                    Animation.RELATIVE_TO_SELF, 0.5f);
            animation.setInterpolator(new DecelerateInterpolator());
            animation.setDuration(1000);
            return animation;
        }
    }

# 注意事项： #

**特别特别注意：补间动画执行之后并未改变View的真实布局属性值。切记这一点，譬如我们在Activity中有一个Button在屏幕上方，我们设置了平移动画移动到屏幕下方然后保持动画最后执行状态呆在屏幕下方，这时如果点击屏幕下方动画执行之后的Button是没有任何反应的，而点击原来屏幕上方没有Button的地方却响应的是点击Button的事件。**