Android群英传读书笔记（第七章）

2016-03-02 本文已影响1239人青藤绿

书中的示例代码：github

本章主要介绍的是Android动画机制和使用技巧

1.Android视图动画分析

透明度动画：

 AlphaAnimation aa=new AlphaAnimation(0,1);
        aa.setDuration(1000);
        view.startAnimation(aa);

旋转动画：

RotateAnimation ra=new RotateAnimation(0,360,100,100);//参数分别为起始角度,旋转到角度,中心xy坐标
        ra.setDuration(1000);
        view.startAnimation(ra);

也可以绕自身中心旋转：

 RotateAnimation ra=new RotateAnimation(0,360,RotateAnimation.RELATIVE_TO_SELF,0.5f,RotateAnimation.RELATIVE_TO_SELF,0.5f);
        ra.setDuration(1000);
        view.startAnimation(ra);

位移动画：

 TranslateAnimation ta=new TranslateAnimation(0,300,0,200);
        ta.setDuration(1000);
        view.startAnimation(ta);

缩放动画：

ScaleAnimation sa=new ScaleAnimation(0,2,0,2);
        sa.setDuration(1000);
        view.startAnimation(sa);

和旋转动画一样，缩放也能以中心点进行：

ScaleAnimation sa = new ScaleAnimation(0, 1, 0, 1, RotateAnimation.RELATIVE_TO_SELF, 0.5f, RotateAnimation.RELATIVE_TO_SELF, 0.5f);
        sa.setDuration(1000);
        view.startAnimation(sa);

动画集合：

AnimationSet as=new AnimationSet(true);
        as.setDuration(1000);

        AlphaAnimation aa=new AlphaAnimation(0,1);
        aa.setDuration(1000);
        as.addAnimation(aa);

        TranslateAnimation ta=new TranslateAnimation(0,100,0,200);
        ta.setDuration(1000);
        as.addAnimation(ta);
        
        view.startAnimation(as);

动画回调：

as.setAnimationListener(new Animation.AnimationListener() {
            @Override
            public void onAnimationStart(Animation animation) {
                //动画开始时回调
            }

            @Override
            public void onAnimationEnd(Animation animation) {
                //动画结束时回调
            }

            @Override
            public void onAnimationRepeat(Animation animation) {
                //重复时回调
            }
        });

总结：视图动画的效果比较局限，并且view本身是不会跟着平移动画移动的，只有在实现简单效果并且不需和用户发生交互时建议使用。

2.Android属性动画分析
属性动画是在3.0以后推出的，如果需兼容之前的版本需使用开源项目：NineOldAndroids（可以通过谷歌查询其用法，此处不做介绍）
属性动画通过调用属性的set、get方法来真实的控制一个View的属性，还可以调用setFrameDelay()设置动画帧之间的间隙时间，减少动画过程中频繁绘制界面。

ObjectAnimator：

ObjectAnimator objectAnimator=ObjectAnimator.ofFloat(view,"translationX",300);
        objectAnimator.setDuration(1000);
        objectAnimator.start();//属性动画的简单使用。

下面是些常用的属性：
* translationX和translationY：作为一种增量来控制着View对象从它布局容器左上角坐标的偏移位置。
* rotation、rotationX和rotationY：这三个属性控制View对象围绕支点进行2D和3D的旋转。
* scaleX和scaleY：这两个属性控制着View对象围绕它的支点进行2D缩放。
* pivotX和pivotY：这两个属性控制着View对象的支点位置，围绕这个支点进行旋转缩放，默认情况下是View的中心点。
* x和y：它描述了View对象在它容器中的最终位置，它是最初的左上角坐标的translationX和translationY值的累积和。
* alpha：它表示View对象的透明度，1是不透明，0为全透明。

如果一个属性没有get、set方法时就需要用其他解决方案了，Google提供了两种方法来解决这个问题。
①通过一个自定义类来间接的提供这个属性的get、set方法：

private static class WrapperView{
        //使用时就new一个WrapperView对象即可
        private View mTarget;
        
        public WrapperView(View target){
            mTarget=target;
        }
        
        public int getWidth(){
            return mTarget.getLayoutParams().width;
        }
        
        public void setWidth(int width){
            mTarget.getLayoutParams().width=width;
            mTarget.requestLayout();
        }        
    }

②使用ValueAnimator来实现：本文后面会介绍。

PropertyValuesHolder：
类似于视图动画中的AnimationSet。这里直接上代码

PropertyValuesHolder holder0 = PropertyValuesHolder.ofFloat("translationX", 300);
PropertyValuesHolder holder1 = PropertyValuesHolder.ofFloat("scaleX", 1f, 0, 1f);
PropertyValuesHolder holder2 = PropertyValuesHolder.ofFloat("translationY", 300);
ObjectAnimator.ofPropertyValuesHolder(view, holder0, holder1, holder2).setDuration(1000);

ValueAnimator：
ObjectAnimator继承自ValueAnimator。其本身不提供任何动画效果，它更像是一个数值发生器。

  ValueAnimator valueAnimator=ValueAnimator.ofFloat(0,100);
        valueAnimator.setTarget(view);
        valueAnimator.setDuration(1000);
        valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
                //监听数值的变换，从而完成动画的变换
                Float value= (Float) animation.getAnimatedValue();
            }
        });

动画事件的监听：

 ObjectAnimator objectAnimator = ObjectAnimator.ofFloat(view, "alpha", 0.5f);

        objectAnimator.addListener(new Animator.AnimatorListener() {
            @Override
            public void onAnimationStart(Animator animation) {
                //动画开始
            }

            @Override
            public void onAnimationEnd(Animator animation) {
                //动画结束
            }

            @Override
            public void onAnimationCancel(Animator animation) {
                //动画取消
            }

            @Override
            public void onAnimationRepeat(Animator animation) {
                //动画重复
            }
        });
      //大部分时候只需要监听结束事件，因此可以选择AnimatorListenerAdapter。
      objectAnimator.addListener(new AnimatorListenerAdapter() {
            @Override
            public void onAnimationEnd(Animator animation) {
                super.onAnimationEnd(animation);
            }
        }); 
        objectAnimator.start();

AnimatorSet：
AnimatorSet不仅可以实现PropertyValuesHolder这样的效果(同时执行多个动画操作)，它还能实现更为精确的顺序控制。（注意这里是AnimatorSet，而不是AnimationSet）

 ObjectAnimator objectAnimator0=ObjectAnimator.ofFloat(view,"scaleX",1f,0,1f);
        ObjectAnimator objectAnimator1=ObjectAnimator.ofFloat(view,"scaleY",1f,0,1f);
        AnimatorSet set=new AnimatorSet();
        set.setDuration(1000);
        set.playTogether(objectAnimator0,objectAnimator1);
        set.start();

控制顺序有以下方法：
* playTogether()：一起执行。
* playSequentially()：上个动画结束后下个才会执行。
* animSet.play(anim0).with(anim1)：anim0和anim1一起执行。
* animSet.play(anim0).before(anim1)：anim0在anim1之前执行。
* animSet.play(anim0).after(anim1)：anim0在anim1之后执行。

在Xml中使用属性动画：

<?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"
    android:valueTo="0.5">
</objectAnimator>

在代码中的使用：

 Animator animator= AnimatorInflater.loadAnimator(getContext(),R.anim.test);
        animator.setTarget(view);
        animator.start();

View的animate方法：
在3.0后，google公司给View增加了animate方法来直接驱动属性动画，代码如下：

//withStartAction和withEndAction在api16以上才有。
view.animate().alpha(0).y(300).setDuration(1900).withStartAction(new Runnable() {
            @Override
            public void run() {
                
            }
        }).withEndAction(new Runnable() {
            @Override
            public void run() {

            }
        }).start();

3.Android布局动画
所谓布局动画是指作用在ViewGroup上，给ViewGroup增加View时添加的一个动画过渡效果。
最简单的布局动画是在ViewGroup的xml中，使用以下代码来打开布局动画：

 android:animateLayoutChanges="true"  //此为固定默认效果

当然我们也能够通过LayoutAnimationController类来自定义一个子View的过渡效果。

 LinearLayout  ll=new LinearLayout(getContext());
        //创建动画
        ScaleAnimation sa=new ScaleAnimation(0,1,0,1);
        sa.setDuration(1000);
        //设置布局动画的显示属性
        //第二个参数是每个子View显示的delay时间。当delay不为0时可以设置子View显示顺序
        //LayoutAnimationController.ORDER_NORMAL 顺序
        //LayoutAnimationController.ORDER_RANDOM 随机
        //LayoutAnimationController.ORDER_REVERSE 反序
        LayoutAnimationController controller=new LayoutAnimationController(sa,0.5f);
        controller.setOrder(LayoutAnimationController.ORDER_NORMAL);
        ll.setLayoutAnimation(controller);

4.Interpolators(插值器)
通过插值器，可以定义动画变换的速率，类似于物理中的加速度。

AccelerateDecelerateInterpolator --- 在动画开始与结束的地方速率改变比较慢，在中间的时候加速
AccelerateInterpolator --- 在动画开始的地方速率改变比较慢，然后开始加速
AnticipateInterpolator --- 开始的时候向后然后向前甩
AnticipateOvershootInterpolator --- 开始的时候向后然后向前甩一定值后返回最后的值
BounceInterpolator --- 动画结束的时候弹起
CycleInterpolator --- 动画循环播放特定的次数，速率改变沿着正弦曲线
DecelerateInterpolator --- 在动画开始的地方快然后慢
LinearInterpolator --- 以常量速率改变
OvershootInterpolator --- 向前甩一定值后再回到原来位置

以上基本能满足常用需求，也可以自定义一个插值器。

public class MyInterpolator implements Interpolator {
        private float mFactor;

        @Override
        public float getInterpolation(float input) {
             //通过操作input来改变速率
            return mFactor;
        }
    }

5.自定义动画
创建自定义动画非常简单，只需要实现它的applyTransformation的逻辑，通常情况下还需要覆盖父类的initialize方法来实现一些初始化工作。

public class MyAnim extends Animation {
    private int mWidth;
    private int mHeight;
    @Override
    public void initialize(int width, int height, int parentWidth, int parentHeight) {
        super.initialize(width, height, parentWidth, parentHeight);
        mWidth = width;
        mHeight = height;
    }

    @Override
    protected void applyTransformation(float interpolatedTime, Transformation t) {
        //这个方法主要就是通过操作transformation中的矩阵对象来呈现动画效果
        final Matrix matrix = t.getMatrix();
        matrix.preScale(1, 1 - interpolatedTime, mWidth / 2, mHeight / 2);
    }
}

6.Android 5.X SVG矢量动画机制

SVG是什么：
- 可伸缩矢量图形(Scalable Vector Graphics)
- 定义用于网络的基于矢量的图形
- 使用xml格式定义图形
- 图像在放大或者改变尺寸的情况下其图形质量不会有损失
- 万维网联盟的标准
- 与诸如DOM和XSL之类的W3C标准是一个整体
<path>标签：
使用<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 curveto(T ENDX,ENDY)：映射前面路径后的终点。
- A=elliptical Arc(A RX,RY,XROTATION,FLAG1,FLAG2,X,Y)：弧形。RX、RY为半轴大小，XROTATION指椭圆的X轴水平方向顺时针方向夹角，FLAG1为1时表示大角度弧形，为0表小角度，FLAG2为1时表顺时针，0位逆时针，X、Y为终点坐标
- Z=closepath()：关闭路径。

注意：
① 坐标轴以(0,0)为中心，X轴水平向右，Y轴水平向下。
② 所有指令大小写均可。大写绝对定位，参照全局坐标系；小写相对定位，参照父容器坐标系。
③ 指令和数据间的空格可以省略。
④ 同一指令出现多次可以只用一个。

SVG编辑器：
书中介绍了个Inkscape，有兴趣的可以尝试下。
Android中使用SVG：
谷歌在Android 5.X中提供了VectorDrawable、AnimatedVectorDrawable来帮助支出SVG。
- VectorDrawable：

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="200dp"
    android:height="200dp"//控制SVG图形的具体大小，height与width的比例需和viewportHeight与viewportWidth的相同，不然会变形
    android:viewportHeight="100"
    android:viewportWidth="100">//图形划分的比例，这里指划分100*100，绘制图形使用坐标（50,50）即为中心点
    <group
        android:name="test"
        android:rotation="0">
        <path
            android:fillColor="@android:color/holo_blue_light"
            android:pathData="M 25 50    
                a 25 25 0 1 1 50 0"       
            />
    </group>
</vector>

AnimatedVectorDrawable：
AnimatedVectorDrawable就是给VectorDrawable提供动画效果，通过它来连接静态的VectorDrawable和动态的objectAnimator。

<animated-vector xmlns:android="http://schemas.android.com/apk/res/android" android:drawable="@drawable/vector_demo">
    <target
        android:animation="@anim/anim"
        android:name="test"/>//这里的name需要和vectordrawable里的name一样
</animated-vector>

动画代码如下：

<objectAnimator xmlns:android="http://schemas.android.com/apk/res/android"
        android:duration="3000"
        android:propertyName="rotation"//path中的属性
        android:valueFrom="0"
        android:valueTo="360">
</objectAnimator>

具体使用如下：

((Animatable)imageView.getDrawable()).start();

Android群英传读书笔记（第七章）

猜你喜欢

热点阅读