动画机制-《Android群英传》

﹏ヽ暗。殇╰゛Y 2022-06-05 10:24 134阅读 0赞

动画分为视图动画和属性动画框架。

*  视图动画：  
    
    
     *  提供AlphaAnimation、RotateAnimation、TranslateAnimation、ScaleAnimation四种动画方式
     *  提供动画合集AnimationSet，用于动画混合
     *  缺点显著：不具备交互性，只能做普通的动画效果
     *  优点：效率高、使用方便
 *  属性动画框架：更加丰富的动画效果。

# 常见问题 #

1.  视图动画和属性动画优缺点
2.  视图动画的使用
3.  属性动画的使用
4.  ObjectAnimator、AnimatorSet、PropertyValuesHolder、ValueAnimator的作用
5.  如何利用xml使用属性动画
6.  动画事件有哪些？
7.  布局动画是什么？
8.  插值器Interpolators的作用
9.  SVG是什么？
10. SVG和Bitmap的区别
11. 如何在Android中使用SVG(VectorDrawable和VectorDrawable)？

*  常见问题
 *  1-视图动画实例
    
     *  1-布局
     *  2-Activity
 *  2-属性动画
    
     *  1-实例
     *  2-没有getset方法
     *  3-PropertyValuesHolder
     *  4-ValueAnimator
        
         *  1-实例数字自动增加0100
     *  5-动画监听
     *  6-AnimationSet
     *  7-在XML中使用属性动画
        
         *  XML文件
         *  从XML中加载animator
     *  8-View直接使用animate
 *  3-布局动画
 *  4-Interpolators插值器
 *  5-自定义动画
 *  6-Android 5x SVG矢量动画机制
    
     *  1-SVG是什么Scalable Vetor Graphics
     *  2-SVG和Bitmap区别
     *  3-SVG编辑器
     *  4-Android中使用SVG
        
         *  1-VectorDrawable实例
         *  2-AnimatedVectorDrawable实例动画效果
     *  5-SVG做简单动画
        
         *  1-绘制初始两条线
         *  2-动画效果ObjectAnimator
         *  3-粘合静态矢量图和动态动画
         *  4-使用
     *  6-SVG轨迹动画

# 1-视图动画实例 #

展现4种动画效果

## 1-布局 ##

<?xml version="1.0" encoding="utf-8"?>
    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" android:layout_weight="3" tools:context="com.example.administrator.featherdemos.Activity.AnimationSetActivity">
    
        <LinearLayout android:layout_width="match_parent" android:layout_height="0dp" android:orientation="horizontal" android:layout_weight="1" android:weightSum="2">
    
            <ImageView android:id="@+id/animationset_imageview1" android:layout_width="0dp" android:layout_height="wrap_content" android:src="@drawable/jide" android:layout_weight="1" android:layout_centerInParent="true"/>
    
            <ImageView android:id="@+id/animationset_imageview2" android:layout_width="0dp" android:layout_height="wrap_content" android:src="@drawable/jide" android:layout_weight="1" android:layout_centerInParent="true"/>
    
        </LinearLayout>
    
        <LinearLayout android:layout_width="match_parent" android:layout_height="0dp" android:orientation="horizontal" android:layout_weight="1" android:weightSum="2">
    
            <ImageView android:id="@+id/animationset_imageview3" android:layout_width="0dp" android:layout_height="wrap_content" android:src="@drawable/jide" android:layout_weight="1" android:layout_centerInParent="true"/>
    
            <ImageView android:id="@+id/animationset_imageview4" android:layout_width="0dp" android:layout_height="wrap_content" android:src="@drawable/jide" android:layout_weight="1" android:layout_centerInParent="true"/>
    
        </LinearLayout>
    
        <ImageView android:id="@+id/animationset_set_imageview" android:layout_width="match_parent" android:layout_height="0dp" android:src="@drawable/jide" android:layout_weight="1" />
    </LinearLayout>

## 2-Activity ##

public class AnimationSetActivity extends Activity { 
    
        ImageView imageView1;
        ImageView imageView2;
        ImageView imageView3;
        ImageView imageView4;
        ImageView imageView;
        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_animation_set);
    
            imageView1 = (ImageView) findViewById(R.id.animationset_imageview1);
            imageView2 = (ImageView) findViewById(R.id.animationset_imageview2);
            imageView3 = (ImageView) findViewById(R.id.animationset_imageview3);
            imageView4 = (ImageView) findViewById(R.id.animationset_imageview4);
            imageView = (ImageView) findViewById(R.id.animationset_set_imageview);
            //透明度
            AlphaAnimation alphaAnimation = new AlphaAnimation(0, 1);
            alphaAnimation.setDuration(2000);
            imageView1.setAnimation(alphaAnimation);
            //旋转
            RotateAnimation rotateAnimation = new RotateAnimation(0, 10);
            rotateAnimation.setDuration(2000);
            imageView2.setAnimation(rotateAnimation);
            //缩放
            ScaleAnimation scaleAnimation = new ScaleAnimation(0.5f, 1, 0.5f, 1);
            scaleAnimation.setDuration(2000);
            imageView3.setAnimation(scaleAnimation);
            //平移
            TranslateAnimation translateAnimation = new TranslateAnimation(0, 50, 0, 50);
            translateAnimation.setDuration(2000);
            imageView4.setAnimation(translateAnimation);
    
            /* * 动画集合，可以混合多种动画效果。 * */
            AnimationSet animationSet = new AnimationSet(true);
            animationSet.setDuration(3000);
            animationSet.addAnimation(alphaAnimation);
            animationSet.addAnimation(rotateAnimation);
            imageView.setAnimation(animationSet);
        }
    }

# 2-属性动画 #

Animator框架中最多的就是AnimatorSet和ObjectAnimator。ObjectAnimator控制一个对象的一个属性，将多个ObjectAnimator组合成AnimatorSet形成动画。

<table> 
 <thead> 
  <tr> 
   <th>属性值</th> 
   <th>作用</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>translationX、translationY</td> 
   <td>控制View从左上角偏移的位置</td> 
  </tr> 
  <tr> 
   <td>rotation、rotationX、rotationY</td> 
   <td>控制View围绕支点做2D和3D旋转</td> 
  </tr> 
  <tr> 
   <td>scaleX、scaleY</td> 
   <td>围绕支点2D缩放</td> 
  </tr> 
  <tr> 
   <td>pivotX、pivotY</td> 
   <td>控制支点位置，默认为View中心</td> 
  </tr> 
  <tr> 
   <td>x、y</td> 
   <td>描述View的最终位置</td> 
  </tr> 
  <tr> 
   <td>alpha</td> 
   <td>透明度，默认1不透明，0为完全透明</td> 
  </tr> 
 </tbody> 
</table>

*  要操作的View的属性，必须要有get和set方法。
 *  如果没有get、set方法，需要使用装饰者模式包装获得get、set；或者通过后面的ValueAnimator实现。

## 1-实例 ##

ImageView imageView = (ImageView) findViewById(R.id.animator_imageview);
    
    ObjectAnimator objectAnimator = ObjectAnimator.ofFloat(imageView,
                    "translationY", 300);
            objectAnimator.setDuration(2000);
            objectAnimator.start();

## 2-没有get、set方法 ##

实现包装类

private class WrapperView{ 
            private View view;
            public WrapperView(View view){
                this.view = view;
            }
            public int getWidth(){
                return view.getLayoutParams().width;
            }
            public void setWidth(int width){
                view.getLayoutParams().width = width;
                view.requestLayout();
            }
        }

使用包装类实现属性动画

WrapperView wrapperView = new WrapperView(imageView);
    ObjectAnimator.ofInt(wrapperView, "width", 500).setDuration(2000).start();

## 3-PropertyValuesHolder ##

类似于AnimationSet的作用，将多种效果共同作用于对象。

PropertyValuesHolder pvh1 = PropertyValuesHolder.ofFloat("translationY", 200);
    PropertyValuesHolder pvh2 = PropertyValuesHolder.ofFloat("scaleX", 1f, 0, 1f);
    PropertyValuesHolder pvh3 = PropertyValuesHolder.ofFloat("scaleY", 1f, 0, 1f);
    ObjectAnimator.ofPropertyValuesHolder(imageView, pvh1, pvh2, pvh3).setDuration(1000).start();

## 4-ValueAnimator ##

ObjectAnimator的父类，提供数值变化和监听，本身不完成动画，通过得到的数值可以去进行一定变换。

ValueAnimator valueAnimator = ValueAnimator.ofFloat(0, 100);
            valueAnimator.setTarget(imageView);
            valueAnimator.setDuration(1000);
            valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
                @Override
                public void onAnimationUpdate(ValueAnimator valueAnimator) {
                    Float value = (Float) valueAnimator.getAnimatedValue();
                    //使用数值去完成数值的变换
                }
            });

### 1-实例：数字自动增加(0~100) ###

TextView textView = (TextView) findViewById(R.id.count_textview);
    
    textView.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View view) {
                //数值动画从0~100增长
                    ValueAnimator valueAnimator = ValueAnimator.ofInt(0, 100);
                    valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
                        @Override
                        public void onAnimationUpdate(ValueAnimator valueAnimator) {
                            //使用获取的数值，显示在TextView(数值自动增长)
                            textView.setText((Integer) valueAnimator.getAnimatedValue()+"");
                        }
                    });
                //动画在3s内完成
                    valueAnimator.setDuration(3000);
                    valueAnimator.start();
       }
    });

## 5-动画监听 ##

有start、repeat、end、cancel四个过程，可以监听。

//监听全部步骤
    objectAnimator.addListener(new Animator.AnimatorListener() {
                @Override
                public void onAnimationStart(Animator animator) {
    
                }
    
                @Override
                public void onAnimationEnd(Animator animator) {
    
                }
    
                @Override
                public void onAnimationCancel(Animator animator) {
    
                }
    
                @Override
                public void onAnimationRepeat(Animator animator) {
    
                }
            });
    //选择性监听
    objectAnimator.addListener(new AnimatorListenerAdapter() {
                @Override
                public void onAnimationEnd(Animator animation) {
                    super.onAnimationEnd(animation);
                }
            });

## 6-AnimationSet ##

可以和PropertyValuesHolder将动画融合，在此基础上还可以控制动画的顺序。

ObjectAnimator objectAnimator1 = ObjectAnimator.ofFloat(imageView,"translationY", 300);
            ObjectAnimator objectAnimator2 = ObjectAnimator.ofFloat(imageView,"scaleX", 1f, 0, 1f);
            AnimatorSet animatorSet = new AnimatorSet();
            animatorSet.playTogether(objectAnimator1, objectAnimator2);
            animatorSet.setDuration(2000);
            animatorSet.start();

## 7-在XML中使用属性动画 ##

*  需要在res文件夹中创建`animator`文件夹！！

### XML文件 ###

在X轴上缩放，从1.0>0.5

<?xml version="1.0" encoding="utf-8"?>
    <objectAnimator xmlns:android="http://schemas.android.com/apk/res/android" android:duration="1000" android:propertyName="scaleX" android:valueFrom="1.0" android:valueTo="0.5" android:valueType="floatType">
    
    </objectAnimator>

### 从XML中加载animator ###

Animator animator = AnimatorInflater.loadAnimator(this, R.animator.scalex);
            animator.setTarget(imageView);
            animator.start();

## 8-View直接使用animate() ##

是属性动画的一种简写形式。

imageView.animate() //获得animator
                    .alpha(0)
                    .y(300)
                    .setDuration(3000)
                    .withStartAction(new Runnable() {
                        @Override
                        public void run() {
                        }
                    })
                    .withEndAction(new Runnable() {
                        @Override
                        public void run() {
                            //结束动作后，在UI线程操作
                            runOnUiThread(new Runnable() {
                                @Override
                                public void run() {
                                }
                            });
                        }
                    })
                    .start(); //开始

# 3-布局动画 #

通过给ViewGroup设置布局动画，达到View逐渐呈现的过渡效果。  
`android:animateLayoutChanges="true"`者可以给布局添加系统默认的效果。  
如果要自定义过渡效果，需要通过`LayoutAnimationController`类来自定义，本质是给布局一个视图动画，在View出现时产生过渡效果。

LinearLayout mLinear  = (LinearLayout) findViewById(R.id.mLinear);
    //设置过渡动画
    ScaleAnimation sa = new ScaleAnimation(0,1,0,1);
     sa.setDuration(1000);
    //设置布局动画的显示属性
    //第一个参数，是需要作用的动画，而第二个参数，则是每个子View显示的delay时间
    LayoutAnimationController lac = new LayoutAnimationController(sa,0.5f);        lac.setOrder(LayoutAnimationController.ORDER_NORMAL);
    //为ViewGroup设置布局动画
    mLinear.setLayoutAnimation(lac);

当delay的时间不为0时，可以设置子View显示的顺序：

*  LayoutAnimationController.ORDER\_NORMAL——顺序
 *  LayoutAnimationController.ORDER\_RANDOM——随机
 *  LayoutAnimationController.ORDER\_REVERSE——反序

# 4-Interpolators（插值器） #

插值器可以定义动画的变换速率。可以直接把插值器理解为动画变换的加速度。例如一个位移动画，如果使用线性插值器，那么在持续时间内，单位时间所移动的距离都是一样的；如果使用加速度插值器，那么单位时间内所移动的距离将越来越快。

`Interpolator属性实际上是Animation类的一个XML属性，有很多系统值。`

[转载-Interpolator详细讲解][-Interpolator]

# 5-自定义动画 #

具体内容参考原著或者网上博客。  
[转载：复杂自定义动画实现][Link 1]

# 6-Android 5.x SVG矢量动画机制 #

## 1-SVG是什么?(Scalable Vetor Graphics) ##

*  可伸缩矢量图
 *  定义用于网络的基于矢量的图形
 *  使用XML格式定义图形
 *  图像缩放不会影响质量
 *  万维网联盟标准
 *  与DOM和XSL之类的W3C标准是一个整体

## 2-SVG和Bitmap区别 ##

*  Bitmap是通过每个像素点上存储色彩信息来表示图像。  
    SCG是一个绘图标准。
 *  Bitmap放大不会失真。Bitmap需要为不同分辨率设计多套图表，SVG不需要。

## 3-SVG编辑器 ##

SVG写法固定复杂，可以通过SVG编辑器完成。将图形编辑好后，可以使用编辑器转换为SVG代码。

## 4-Android中使用SVG ##

*  VectorDrawable：创建基于XML的SVG图形
 *  AnimatedVectorDrawable：实现动画效果

### 1-VectorDrawable实例 ###

在`res`右击，选择最上面的`New`，选择`Vector Asset`。  
使用系统默认矢量图或者阿里矢量图库下载的矢量图。  
创建好后`ic_cake_black_24dp.xml`如下：(我用系统默认图标)

使用矢量图：

### 2-AnimatedVectorDrawable实例：动画效果 ###

创建`animated-vector`标签的文件`ic_cake_anim_vector`:

<animated-vector xmlns:android="http://schemas.android.com/apk/res/android" android:drawable="@drawable/ic_cake_black_24dp">
       <target android:animation="@animator/scalex" android:name="test">
       </target>
    </animated-vector>

*  android:drawable需要使用矢量图
 *  android:animation中为objectAnimator的动画效果
 *  android:name为矢量图中(在上个实例里)

--------------------

布局中引用：

--------------------

开启动画：

ImageView imageView = (ImageView) findViewById(R.id.svg_anim_imageview);
    ((Animatable)imageView.getDrawable()).start();

*  AnimatedVectorDrawable将静态的VectorDrawable和动态的ObjectAnimator连接起来。

## 5-SVG做简单动画 ##

将一个横线从中间折断变成“X”的效果

### 1-绘制初始两条线 ###

vector\_two\_line.xml

<?xml version="1.0" encoding="utf-8"?>
    <vector xmlns:android="http://schemas.android.com/apk/res/android" android:width="200dp" android:height="200dp" android:viewportWidth="100" android:viewportHeight="100">
        <group>
            <path android:name="path1" android:pathData="M 20,80 L 50,80 80,80" android:strokeColor="@color/colorAccent" android:strokeWidth="3" android:strokeLineCap="round"/>
    
            <path android:name="path2" android:pathData="M 20,20 L 50,20 80,20" android:strokeColor="@color/colorAccent" android:strokeWidth="3" android:strokeLineCap="round"/>
        </group>
    </vector>

### 2-动画效果(ObjectAnimator) ###

path1\_animator：

<?xml version="1.0" encoding="utf-8"?>
    <objectAnimator xmlns:android="http://schemas.android.com/apk/res/android" android:duration="200" android:propertyName="pathData" android:valueFrom="M 20,80 L 50,80 80,80" android:valueTo="M 20,80 L 50,50 80,80" android:valueType="pathType" android:interpolator="@android:anim/bounce_interpolator">
    
    </objectAnimator>

path2\_animator：

<?xml version="1.0" encoding="utf-8"?>
    <objectAnimator xmlns:android="http://schemas.android.com/apk/res/android" android:duration="200" android:propertyName="pathData" android:valueFrom="M 20,20 L 50,20 80,20" android:valueTo="M 20,20 L 50,50 80,20" android:valueType="pathType" android:interpolator="@android:anim/bounce_interpolator">
    
    </objectAnimator>

### 3-粘合静态矢量图和动态动画 ###

vector\_two\_line\_anim.xml

<animated-vector xmlns:android="http://schemas.android.com/apk/res/android" android:drawable="@drawable/vector_two_line">
       <target android:animation="@animator/path1_animator" android:name="path1">
       </target>
       <target android:animation="@animator/path2_animator" android:name="path2">
       </target>
    </animated-vector>

### 4-使用 ###

ImageView imageView = (ImageView) findViewById(R.id.two_line_imageview);
    
    ((Animatable)imageView.getDrawable()).start();

## 6-SVG：轨迹动画 ##

轨迹动画，这里给上例的两条线在绘制的时候显示轨迹。  
动画:

<?xml version="1.0" encoding="utf-8"?>
    <objectAnimator xmlns:android="http://schemas.android.com/apk/res/android" android:duration="1000" android:propertyName="trimPathEnd" android:valueFrom="0" android:valueTo="1" android:valueType="floatType" android:interpolator="@android:interpolator/accelerate_decelerate">
    
    </objectAnimator>

动画粘贴器：

<animated-vector xmlns:android="http://schemas.android.com/apk/res/android" android:drawable="@drawable/vector_two_line">
       <target android:animation="@animator/trimpath_animator" android:name="path1">
       </target>
       <target android:animation="@animator/trimpath_animator" android:name="path2">
       </target>
    </animated-vector>

ImageView：

使用:

ImageView imageView = (ImageView) findViewById(R.id.trimpath_anim_imageview);
    ((Animatable)imageView.getDrawable()).start();

> 这里省略了一些书上的实例，可以自行查阅。大致关于Android动画机制的内容就这么多了，还需要以后深入学习！

[-Interpolator]: http://blog.csdn.net/harvic880925/article/details/40049763
[Link 1]: http://blog.csdn.net/zhaoshuyu111/article/details/54123394