zoukankan      html  css  js  c++  java

  • 浅谈Android样式开发之View Animation (视图动画)

    引言

    　　一个用户体验良好的App肯定少不了动画效果。Android为我们提供了2种动画框架，分别是视图动画(View Animation)和属性动画(Property Animation)。视图动画比较简单，只能应用于各种View，可以做一些位置、大小、旋转和透明度的简单转变。属性动画则是在Android 3.0引入的动画体系，提供了更多特性和灵活性，也可以应用于任何对象，而不只是View。本篇先讲视图动画。

    　　视图动画可以通过xml文件定义，xml文件放于res/anim/目录下，根元素可以为：<alpha>, <scale>, <translate>, <rotate>, 或者<set>。其中，<set>标签定义的是动画集，它可以包含多个其他标签，也可以嵌套<set>标签。默认情况下，所有动画会同时播放；如果想按顺序播放，则需要指定startOffset属性；另外，还可以通过设置interpolator改变动画变化的速率，比如匀速、加速。

    alpha渐变动画

    　　<alpha>可以实现透明度渐变的动画效果，也就是淡入淡出的效果，可通过设置下面三个属性来设置淡入或淡出效果：

    • android:duration 动画从开始到结束持续的时长，单位为毫秒
    • android:fromAlpha 动画开始时的透明度，0.0为全透明，1.0为不透明，默认为1.0
    • android:toAlpha 动画结束时的透明度，0.0为全透明，1.0为不透明，默认为1.0

    　　当设置开始时透明度为0.0，结束时为1.0，就能实现淡入效果；相反，当设置开始时透明度为1.0，结束时为0.0，那就能实现淡出效果。示例代码如下：

     1 <?xml version="1.0" encoding="utf-8"?>
 2 <!--渐变动画
 3     formAlpha 开始时的透明度
 4     toAlpha 结束时的透明度
 5     duration 时间间隔
 6     fillAfter 动画结束后View是否保持动画结束时的透明度
 7 -->
 8 <alpha xmlns:android="http://schemas.android.com/apk/res/android"
 9     android:fromAlpha="1.0"
10     android:toAlpha="0.33"
11     android:duration="3000"
12     android:fillAfter="true">
13 </alpha>

    scale缩放动画

    　　<scale>可以实现缩放的动画效果，主要的属性如下：

    • android:duration 动画从开始到结束持续的时长，单位为毫秒
    • android:fromXScale 动画开始时X坐标上的缩放尺寸
    • android:toXScale 动画结束时X坐标上的缩放尺寸
    • android:fromYScale 动画开始时Y坐标上的缩放尺寸

    • android:toYScale 动画结束时Y坐标上的缩放尺寸 PS：以上四个属性，0.0表示缩放到没有，1.0表示正常无缩放，小于1.0表示收缩，大于1.0表示放大

    • android:pivotX 缩放时的固定不变的X坐标，一般用百分比表示，0%表示左边缘，100%表示右边缘

    • android:pivotY 缩放时的固定不变的Y坐标，一般用百分比表示，0%表示顶部边缘，100%表示底部边缘

    　　下面我们来看一个示例(示例对pivotX和pivotY介绍的更加详细):

     1 <?xml version="1.0" encoding="utf-8"?>
 2 <!--
 3     android:fromXScale    起始的X方向上相对自身的缩放比例，浮点值，比如1.0代表自身无变化，0.5代表起始时缩小一倍，2.0代表放大一倍；
 4     android:toXScale      结尾的X方向上相对自身的缩放比例，浮点值；
 5     android:fromYScale    起始的Y方向上相对自身的缩放比例，浮点值，
 6     android:toYScale      结尾的Y方向上相对自身的缩放比例，浮点值；
 7     android:pivotX        缩放起点X轴坐标，可以是数值、百分数、百分数p 三种样式，比如 50、50%、50%p
 8                           1、当为数值时，表示在当前View的左上角，即原点处加上50px，做为起始缩放点；
 9                           2、如果是50%，表示在当前控件的左上角加上自己宽度的50%做为起始点(50%就是View在X方向的中心点)
10                           3、如果是50%p，那么就是表示在当前的左上角加上父控件宽度的50%做为起始点x轴坐标。
11     android:pivotY        缩放起点Y轴坐标，取值及意义跟android:pivotX一样。
12 -->
13 <scale xmlns:android="http://schemas.android.com/apk/res/android"
14     android:fromXScale="1.0"
15     android:toXScale="0.33"
16     android:fromYScale="1.0"
17     android:toYScale="0.11"
18     android:pivotX="50"
19     android:pivotY="50"
20     android:duration="3000"
21     android:fillAfter="true">
22 </scale>

    　　我们看到pivotX和pivotY有多种用法，不过大多数情况下我们都会使用50%这样的参数，这样缩放的中心点就是View的中心了。

    rotate旋转动画

    　　<rotate>可以实现旋转的动画效果，主要的属性如下：

    • android:duration 动画从开始到结束持续的时长，单位为毫秒
    • android:fromDegrees 旋转开始的角度
    • android:toDegrees 旋转结束的角度
    • android:pivotX 旋转中心点的X坐标，纯数字表示相对于View本身左边缘的像素偏移量；带"%"后缀时表示相对于View本身左边缘的百分比偏移量；带"%p"后缀时表示相对于父View左边缘的百分比偏移量
    • android:pivotY 旋转中心点的Y坐标，纯数字表示相对于View本身顶部边缘的像素偏移量；带"%"后缀时表示相对于View本身顶部边缘的百分比偏移量；带"%p"后缀时表示相对于父View顶部边缘的百分比偏移量

    　　此处pivotX和pivotY使用方式和scale中一致。请看下面的示例：

     1 <?xml version="1.0" encoding="utf-8"?>
 2 <!--
 3     android:fromDegrees     开始旋转的角度位置，正值代表顺时针方向度数，负值代码逆时针方向度数
 4     android:toDegrees       结束时旋转到的角度位置，正值代表顺时针方向度数，负值代码逆时针方向度数
 5     android:pivotX          缩放起点X轴坐标，可以是数值、百分数、百分数p 三种样式，比如 50、50%、50%p
 6     android:pivotY          缩放起点Y轴坐标，可以是数值、百分数、百分数p 三种样式，比如 50、50%、50%p
 7 -->
 8 <rotate xmlns:android="http://schemas.android.com/apk/res/android"
 9     android:fromDegrees="0"
10     android:toDegrees="360"
11     android:pivotX="50%"
12     android:pivotY="50%"
13     android:duration="3000"
14     android:fillAfter="true">
15 </rotate>

    translate平移动画

    　　<translate>可以实现位置移动的动画效果，可以是垂直方向的移动，也可以是水平方向的移动。坐标的值可以有三种格式：从-100到100，以"%"结束，表示相对于View本身的百分比位置；如果以"%p"结束，表示相对于View的父View的百分比位置；如果没有任何后缀，表示相对于View本身具体的像素值。主要的属性如下：

    • android:duration 动画从开始到结束持续的时长，单位为毫秒
    • android:fromXDelta 起始位置的X坐标的偏移量
    • android:toXDelta 结束位置的X坐标的偏移量
    • android:fromYDelta 起始位置的Y坐标的偏移量
    • android:toYDelta 结束位置的Y坐标的偏移量

    　　请看下面示例：

     1 <?xml version="1.0" encoding="utf-8"?>
 2 <!--
 3     android:fromXDelta     起始点X轴坐标，可以是数值、百分数、百分数p 三种样式，比如 50、50%、50%p，具体意义已在scale标签中讲述，这里就不再重讲
 4     android:fromYDelta     起始点Y轴从标，可以是数值、百分数、百分数p 三种样式；
 5     android:toXDelta       结束点X轴坐标
 6     android:toYDelta       结束点Y轴坐标
 7 -->
 8 <translate xmlns:android="http://schemas.android.com/apk/res/android"
 9     android:fromXDelta="0"
10     android:fromYDelta="0"
11     android:toXDelta="500"
12     android:toYDelta="800"
13     android:duration="3000"
14     android:fillAfter="true">
15 </translate>

    set动画集合

    　　<set>标签可以将多个动画组合起来，变成一个动画集。比如想将一张图片缩放的同时也做移动，这时候就要用<set>标签组合缩放动画和移动动画了。请看下面示例：

     1 <?xml version="1.0" encoding="utf-8"?>
 2 <set xmlns:android="http://schemas.android.com/apk/res/android">
 3 
 4     <!--渐变-->
 5     <alpha
 6         android:toAlpha="1.0"
 7         android:fromAlpha="0.1"
 8         android:duration="5000"
 9         android:fillAfter="false" />
10 
11     <!--旋转-->
12     <rotate
13         android:fromDegrees="0"
14         android:toDegrees="360"
15         android:pivotX="50%"
16         android:pivotY="50%"
17         android:duration="5000"
18         android:fillAfter="false" />
19 
20     <!--缩放-->
21     <scale
22         android:fromXScale="0.1"
23         android:toXScale="1.0"
24         android:fromYScale="0.1"
25         android:toYScale="1.0"
26         android:pivotX="50%"
27         android:pivotY="50%"
28         android:duration="5000"
29         android:fillAfter="false" />
30 
31 </set>

    　　在上面的代码中，我们看到这个效果整合了渐变、旋转、缩放等动画。组成了一个组合动画。

    　　介绍了这么多，那到底在代码中怎么使用呢？下面我们来看一下使用这些XML文件。主要有两种方式，如下：

    1 /**
2   * 加载动画的两种方式
3   */
4 animation=AnimationUtils.loadAnimation(mContext,R.anim.alpha_anim_after);
5 mainContent.startAnimation(animation);
6             
7 mainContent.startAnimation(AnimationUtils.loadAnimation(mContext,R.anim.alpha_anim_after));

    通用属性介绍

    　　仔细观察不难发现，以上五个标签都有android:duration属性，这是一个通用的属性，而除了android:duration，还有其他的通用属性，接下来看看都有哪些通用属性以及相应的用法：

    • android:duration 动画从开始到结束持续的时长，单位为毫秒
    • android:detachWallpaper 设置是否在壁纸上运行，只对设置了壁纸背景的窗口动画(window animation)有效。设为true，则动画只在窗口运行，壁纸背景保持不变
    • android:fillAfter 设置为true时，动画执行完后，View会停留在动画的最后一帧；默认为false；如果是动画集，需在<set>标签中设置该属性才有效
    • android:fillBefore 设置为true时，动画执行完后，View回到动画执行前的状态，默认即为true
    • android:fillEnabled 设置为true时，android:fillBefore的值才有效，否则android:fillBefore会被忽略
    • android:repeatCount 设置动画重复执行的次数，默认为0，即不重复；可设为-1或infinite，表示无限重复

    • android:repeatMode 设置动画重复执行的模式，可设为以下两个值其中之一：

      • restart 动画重复执行时从起点开始，默认为该值
      • reverse 动画会反方向执行

    • android:startOffset 设置动画执行之前的等待时长，毫秒为单位；重复执行时，每次执行前同样也会等待一段时间

    • android:zAdjustment 表示被设置动画的内容在动画运行时在Z轴上的位置，取值为以下三个值之一：

      • normal 默认值，保持内容在Z轴上的位置不变
      • top 保持在Z周最上层
      • bottom 保持在Z轴最下层

    • android:interpolator 设置动画速率的变化，比如加速、减速、匀速等，需要指定Interpolator资源，后面再详细讲解 PS：<set>标签还有个android:shareInterpolator属性，设置为true时则可将interpolator应用到所有子元素中

    Interpolator

    　　通过interpolator可以定义动画速率变化的方式，比如加速、减速、匀速等，每种interpolator都是 Interpolator 类的子类，Android系统已经实现了多种interpolator，对应也提供了公共的资源ID，如下表：

    Interpolator classResource IDDescription
    AccelerateDecelerateInterpolator @android:anim/accelerate_decelerate_interpolator 在动画开始与结束时速率改变比较慢，在中间的时候加速
    AccelerateInterpolator @android:anim/accelerate_interpolator 在动画开始时速率改变比较慢，然后开始加速
    AnticipateInterpolator @android:anim/anticipate_interpolator 动画开始的时候向后然后往前抛
    AnticipateOvershootInterpolator @android:anim/anticipate_overshoot_interpolator 动画开始的时候向后然后向前抛，会抛超过目标值后再返回到最后的值
    BounceInterpolator @android:anim/bounce_interpolator 动画结束的时候会弹跳
    CycleInterpolator @android:anim/bounce_interpolator 动画循环做周期运动，速率改变沿着正弦曲线
    DecelerateInterpolator @android:anim/decelerate_interpolator 在动画开始时速率改变比较快，然后开始减速
    LinearInterpolator @android:anim/decelerate_interpolator 动画匀速播放
    OvershootInterpolator @android:anim/overshoot_interpolator 动画向前抛，会抛超过最后值，然后再返回

    　　如果系统提供的以上Interpolator还不符合你的效果，也可以自定义。自定义的方式有两种，一种是通过继承 Interpolator 父类或其子类；另一种是通过自定义的xml文件，可以更改上表中Interpolator的属性。自定义的xml文件需存放于res/anim/目录下，根标签与上表相应的有九种如下：

    • <accelerateDecelerateInterpolator> 在动画开始与结束时速率改变比较慢，在中间的时候加速。没有可更改设置的属性，所以设置的效果和系统提供的一样

    • <accelerateInterpolator> 在动画开始时速率改变比较慢，然后开始加速。有一个属性可以设置加速的速率

      • android:factor 浮点值，加速的速率，默认为1

    • <anticipateInterpolator> 动画开始的时候向后然后往前抛。有一个属性设置向后拉的值

      • android:tension 浮点值，向后的拉力，默认为2，当设为0时，则不会有向后的动画了

    • <anticipateOvershootInterpolator> 动画开始的时候向后然后向前抛，会抛超过目标值后再返回到最后的值。可设置两个属性

      • android:tension 浮点值，向后的拉力，默认为2，当设为0时，则不会有向后的动画了
      • android:extraTension 浮点值，拉力的倍数，默认为1.5(2*1.5)，当设为0时，则不会有拉力了

    • <bounceInterpolator> 动画结束的时候会弹跳。没有可更改设置的属性

    • <cycleInterpolator> 动画循环做周期运动，速率改变沿着正弦曲线。有一个属性设置循环次数

      • android:cycles 整数值，循环的次数，默认为1

    • <decelerateInterpolator> 在动画开始时速率改变比较快，然后开始减速。有一个属性设置减速的速率

      • android:factor 浮点值，减速的速率，默认为1

    • <linearInterpolator> 动画匀速播放。没有可更改设置的属性

    • <overshootInterpolator> 动画向前抛，会抛超过最后值，然后再返回。有一个属性

      • android:tension 浮点值，超出终点后的拉力，默认为2

    　　那具体怎么用呢？举个例子看看吧，如下：

    1 <?xml version="1.0" encoding="utf-8"?>
2 <anticipateOvershootInterpolator 
3     xmlns:android="http://schemas.android.com/apk/res/android"
4     android:tension="3"
5     android:extraTension="2" />

    　　接着，将其设置到要应用的动画的android:interpolator属性即可。

    写在最后

    　　视图动画的应用主要就这些了，比较简单，当然也有其局限性。比如只能应用于View，也只能做渐变、缩放、旋转和移动，以及这些动画的组合。

    　　注意点：

    　　视图动画相比属性动画，最致命的缺陷是它无法真正改变一个View的属性。例如我们有一个Button控件，通过视图动画平移了200个像素，现在我们点击Button按钮无法触发事件，因为视图动画没有真正改变Button的位置，如果我们点击Button原来的位置还是可以触发事件。这些缺陷都可以使用属性动画来解决。
  • 相关阅读:
    Android中Handler原理
    微软柯塔娜（Cortana）的一句名言
    C# 单例模式的五种写法
    HTTP Status 404
    PLSQL中显示Cursor、隐示Cursor、动态Ref Cursor差别
    Android 开发之集成百度地图的定位与地图展示
    iOS知识点汇总
    优化报表系统结构之报表server计算
    淘宝中间的一像素线（手机端）
    解决yum升级的问题“There was a problem importing one of the Python modules”
  • 原文地址：https://www.cnblogs.com/dreamGong/p/6182618.html
Copyright © 2011-2022 走看看