Android View 动画框架总结

Android View 动画框架总结

1. 视图动画 ( Animation )：Android 3.0之前就存在

• 优点：简单、效率比较高
• 缺点：无法交互，比如某个View发生移动的视图动画后，这个View的点击事件还需要点击动画前的位置
• AlphaAnimation 透明度动画
• RotateAnimation 旋转动画
• TranslateAnimation 平移动画
• ScaleAnimation 缩放动画
• AnimationSet 动画集合，用来组合以上动画

2. 属性动画 ( Animator )：Android 3.0之后增加的

• 优点：通过自身属性的改变来进行动画，可以交互
• 缺点：复杂
• ObjectAnimator
• ValueAnimator
• PropertyValuesHolder 类似AnimationSet
• AnimatorListener 属性动画监听器
  • onAnimationStart() 动画开始
  • onAnimationRepeat() 动画再次播放
  • onAnimationEnd() 动画结束
  • onAnimationCancel() 动画取消
• AnimatorSet 和之前PropertyValuesHolder类似，但是更强，可以准确的确定动画顺序
• 属性动画的简单调用方法 ---> View的animate方法
  • view.animate().alpha(0).y(300).setDuration(300)....start();

3. 布局动画

布局动画是指作用在ViewGroup上，给ViewGroup增加View时添加一个过渡动画。

最简单的方式是在ViewGroup的xml中添加以下属性

android:animateLayoutChanges="true"

当ViewGroup添加子View时候会调用Android默认的显示动画(逐渐出现)，无法自定义。

还可以通过LayoutAnimationController自定义子View的过渡动画

LinearLayout ll = (LinearLayout) findViewById(R.id.ll);
//设置过渡动画
ScaleAnimation sa = new ScaleAnimation(0,1,0,1);
sa.setDuration(2000);
//设置布局动画的显示属性
//参数1: 需要作用的动画
//参数2: 每个子View显示的delay时间
LayoutAnimationController lac = new LayoutAnimationController(sa,0.5F);
//子View显示顺序
//LayoutAnimationController.ORDER_NORMAL -- 顺序
//LayoutAnimationController.ORDER_RANDOM -- 随机
//LayoutAnimationController.ORDER_REVERSE -- 反序
lac.setOrder(LayoutAnimationController.ORDER_NORMAL);
ll.setLayoutAnimation(lac);

通过以上代码给LinearLayout增加了一个视图动画，让子View出现的时候是放大出现的。

4.Interpolators(插值器)

插值器可以定义动画的变化速率，比如先快后慢、一直加速、一直减速、等等

5.自定义视图动画

//创建3D Y轴旋转动画，继承视图动画类
public class RotateY3DAnimation extends Animation {

    public static final String TAG = RotateY3DAnimation.class.getSimpleName();

    //Y轴旋转角度
    private int mRotateY;

    //Camera类封装了openGL 的 3D 动画
    private Camera mCamera;

    //动画初始化时候回调
    @Override
    public void initialize(int width, int height, int parentWidth, int parentHeight) {
        super.initialize(width, height, parentWidth, parentHeight);
        //默认时长2000ms
        setDuration(2000);
        //动画结束后保留状态
        setFillAfter(true);
        //设置插值器为回弹插值器
        setInterpolator(new BounceInterpolator());
        //Y轴旋转45度
        mRotateY = 45;
        //初始化Camera
        mCamera = new Camera();
    }

    //动画执行期间回调
    @Override
    protected void applyTransformation(float interpolatedTime, Transformation t) {
        //通过改变matrix来实现动画
        Matrix matrix = t.getMatrix();
        mCamera.save();
        mCamera.rotateY(mRotateY * interpolatedTime);
        mCamera.getMatrix(matrix);
        mCamera.restore();
    }

}

6. SVG矢量动画 Android 5.0之后

6.1 什么是SVG？

• 可伸缩矢量图形（Scalable Vector Craphics）
• 定义用于网络的基于矢量的图形
• 使用XML格式定义图形
• 图像在放大或改变尺寸的情况下其图形质量不会有损失
• 万维网联盟的标准
• 诸如DOM和XSL之类的W3C标准是一个整体

6.2 SVG与Bitmap对比

• Bitmap通过在每个像素点上存储色彩信息来表达图形，SVG是一个绘制标准。
• SVG不会失真，Bitmap需要为不同分辨率设计多套图，SVG不用。

6.3 使用<path>标签创建SVG，就像用指令方式控制画笔在纸上绘制。

• M = moveto(M x,y) 将画笔移动到指定坐标位置
• L = lineto(L x,y) 画直线到指定坐标位置
• H = horizontal lineto(H x) 画水平线到指定X位置
• V = vertical lineto(V y) 画垂直线到指定Y位置
• C = curveto(C x1,y1,x2,y2,endx,endy) 三次贝塞尔曲线
• S = smooth curveto(S x2,y2,endx,endy) 三次贝塞尔曲线
• Q = quadratic Belzier curve(Q x,y,endx,endy) 二次贝塞尔曲线
• T = smooth quadratic Belzier curve(T endx,endy) 二次贝塞尔曲线
• A = elliptical Arc (A rx,ry,xrotation,flag1,flag2,x,y) 弧线
• Z = closepath (Z) 关闭路径
• 使用指令时候使用（左上角为原点，向右为x轴正方向，向左为x轴负方向）
• 指令大小写区别在于参考坐标系不同，小写相对与之前绘制的结束点定位，大写参照父容器坐标系

6.4 SVG在线编辑器

• http://editor.method.ac/

6.5 android中使用SVG

适配5.0~3.0系统

• 引入新的兼容库 compile 'com.android.support:appcompat-v7:23.2.0'或者比这还新的
• build.gradle 中加入以下一行代码

        defaultConfig {        
            vectorDrawables.useSupportLibrary = true    
        }

• 在xml中使用AppCompatImageView代替ImageView
• 在AppCompatImageView中使用app:srcCompat代替android:src

使用方式：在drawable文件夹下创建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:viewportHeight="100"
    android:viewportWidth="100">
    
    <!--
        android:width="200dp"
        android:height="200dp"
        中200dp是任意取的，主要配合
        android:viewportHeight="100"
        android:viewportWidth="100"
        使用。

        android:viewportHeight="100"
        android:viewportWidth="100"
        确定了x,y轴最大值
        相当于将200dp划分成100份，每一份2dp
        之后svg指令中：50，50意味着正中间，是距离左边100dp，距离顶部100dp的位置
    -->

    <group
        android:name="test"
        android:pivotX="50"
        android:pivotY="50"
        android:rotation="0">

        <!--
            pivotX、pivotY设置了旋转的中心点
            rotation设置了旋转角度，顺时针方向
        -->

        <path
            android:fillColor="@color/colorPrimary"
            android:pathData="M 25 50
            a 25 25 0 1 0 50 0
            "
            android:strokeColor="@color/colorAccent"
            android:strokeWidth="2" />
    </group>
</vector>

6.6 SVG动画
第一步：创建SVG图片，在drawable文件夹下创建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:viewportHeight="100"
    android:viewportWidth="100">
    <group>
        <path
            android:name="path1"
            android:strokeColor="@color/colorPrimary"
            android:strokeWidth="5"
            android:strokeLineCap="round"
            android:pathData="M 20 80
            L 50 80 80 80"
            />
        <path
            android:name="path2"
            android:strokeColor="@color/colorPrimary"
            android:strokeWidth="5"
            android:strokeLineCap="round"
            android:pathData="M 20 20
            L 50 20 80 20"
            />
    </group>
</vector>

第二步：创建在animator文件夹下创建属性动画

animator1.xml
<?xml version="1.0" encoding="utf-8"?>
<objectAnimator xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="2000"
    android:interpolator="@android:anim/bounce_interpolator"
    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">

</objectAnimator>

animator2.xml
<?xml version="1.0" encoding="utf-8"?>
<objectAnimator xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="2000"
    android:interpolator="@android:anim/bounce_interpolator"
    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">

</objectAnimator>

第三步：将SVG图片和动画结合，在drawable文件夹下创建animated-vector文件

<?xml version="1.0" encoding="utf-8"?>
<animated-vector xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:drawable="@drawable/arc"
    tools:targetApi="lollipop">

    <target
        android:name="path1"
        android:animation="@animator/animator1" />

    <target
        android:name="path2"
        android:animation="@animator/animator2" />

</animated-vector>

第四步：将SVG动画设置给ImageView

activity_main.xml中添加节点：

    <android.support.v7.widget.AppCompatImageView
        android:id="@+id/iv"
        android:layout_width="200dp"
        android:layout_height="200dp"
        android:background="#ffffff"
        app:srcCompat="@drawable/animate_arc" />

第五步：执行动画属性动画

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        
        AppCompatImageView iv = findViewById(R.id.iv);

        final Animatable animatable = (Animatable) iv.getDrawable();
        iv.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                animatable.start();
            }
        });
    }
}