Android中的动画

补间动画

Android中的补间动画即View动画有四种,分别为AlphaAnimation透明渐变动画、RotateAnimation旋转动画、ScaleAnimation缩放动画、TranslateAnimation位移动画。

使用View动画可以在代码中直接设置,也可以在xml中进行设置。

设置View动画

首先我们在布局中有一个ImageView图像,然后设置4个Button,点击的时候执行相应的动画。

AlphaAnimation透明渐变动画

在代码中设置动画,代码如下:

    //1.0意味着着完全不透明 0.0意味着完全透明
    AlphaAnimation aa = new AlphaAnimation(1.0f, 0.0f);
    aa.setDuration(2000); //设置动画执行的时间
    aa.setRepeatCount(1); //设置重复的次数
    aa.setRepeatMode(Animation.REVERSE);//设置动画执行的模式
    //imageView开始执行动画 
    imageView.startAnimation(aa);

透明渐变动画很简单,只需要设置透明度就可以了。

RotateAnimation旋转动画

旋转动画有多个构造方法,我们选取其中参数最多的构造方法:

RotateAnimation(float fromDegrees, float toDegrees, int pivotXType, float pivotXValue,
        int pivotYType, float pivotYValue)

其中的各种参数的意义如下:

fromDegrees : 从哪个角度开始旋转,一般为0
toDegrees    : 结束的时候角度为多少,如转一圈则为360
pivotXType    : 在X轴上动画相对于谁旋转,一般是相对于父控件Animation.RELATIVE_TO_PARENT,或者相对于自己旋转Animation.RELATIVE_TO_SELF
pivotXValue    : 在X轴上动画旋转的中心点
pivotYType    : 在Y轴上动画相对于谁旋转,同pivotXType
pivotYValue    : 在Y轴上动画旋转的中心点

示例:

    RotateAnimation rotate = new RotateAnimation(0, 360, // 从0度开始旋转,到360度结束
            Animation.RELATIVE_TO_SELF, 0.5f,     // X轴指定相对于自己还是相对于父控件旋转,0.5f则是以自己宽度的二分之一为旋转点
            Animation.RELATIVE_TO_SELF, 0.5f);    // Y轴指定相对于自己还是相对于父控件旋转,0.5f则是以自己高度的二分之一为旋转点
    rotate.setDuration(2000);
    imageView.startAnimation(rotate);

上面的代码执行时,会发现动画是以imageView的中心点旋转360度回到原点结束的。

ScaleAnimation缩放动画

缩放动画同样有多个参数的构造方法,如下:

ScaleAnimation(float fromX, float toX, float fromY, float toY,
            int pivotXType, float pivotXValue, int pivotYType, float pivotYValue)

参数代表的意义:

fromX    : 动画的X轴从多大开始缩放,一般为1.0f,即动画原本大小开始缩放
toX        : 动画在X轴方向上要缩放到多大,如果小于1.0f,则动画在X轴上的距离会变小,大于1.0f会放大
fromY    : 动画的Y轴从多大开始缩放,其他同fromX
toY        : 动画在Y轴方向上要缩放到多大,其他同toX
pivotXType    : X轴指定相对于自己还是相对于父控件缩放,一般是相对于父控件Animation.RELATIVE_TO_PARENT,或者相对于自己缩放Animation.RELATIVE_TO_SELF
pivotXValue    : 指定X轴方向上哪个位置为中心缩放
pivotYType    : Y轴同pivotXType
pivotYValue    : Y轴同pivotXValue

下面的示例为相对于自己从中心点放大:

    ScaleAnimation scale = new ScaleAnimation(1.0f, 2.0f, 1.0f, 2.0f,     // 1.0f代表原本大小,2.0f代表放大一倍
            Animation.RELATIVE_TO_SELF, 0.5f, // X轴指定相对于自己还是相对于父控件放大,第二个则是以哪个位置为X轴的旋转点,此处为中心点放大
            Animation.RELATIVE_TO_SELF, 0.5f);
    scale.setDuration(2000);
    imageView.startAnimation(scale);

TranslateAnimation位移动画

TranslateAnimation位移动画也有多个参数,但是大多数参数都与上面几个动画雷同

TranslateAnimation(int fromXType, float fromXValue, int toXType, float toXValue,
            int fromYType, float fromYValue, int toYType, float toYValue)

参数意义:

fromXType    :在X轴上动画相对于谁移动,一般是相对于父控件Animation.RELATIVE_TO_PARENT,或者相对于自己移动Animation.RELATIVE_TO_SELF
fromXValue    :在X轴上的起始时的移动距离,一般为0f,即原来位置
toXType        :在结束时X轴相对于谁移动,同fromXType
toXValue    :在结束时动画X轴所处的距离,若相对于父控件移动,一般不超多1.0f,否则会移动到屏幕外面
fromYType    :在Y轴上动画相对于谁移动,一般是相对于父控件Animation.RELATIVE_TO_PARENT,或者相对于自己移动Animation.RELATIVE_TO_SELF
fromYValue    :在Y轴上的起始时的移动距离,一般为0f,即原来位置
toYType        :在结束时Y轴相对于谁移动,同fromXType
toYValue    :在结束时动画Y轴所处的距离,若相对于父控件移动,一般不超多1.0f,否则会移动到屏幕外面

下面是相对于父控件,往右下角45度移动的示例:

    TranslateAnimation trans = new TranslateAnimation(
            Animation.RELATIVE_TO_PARENT, 0f,    // 起始时X轴相对于父控件移动
            Animation.RELATIVE_TO_PARENT, 0.2f,     // 结束时X轴也相对于父控件移动
            Animation.RELATIVE_TO_PARENT, 0,    // 起始时Y轴相对于父控件移动
            Animation.RELATIVE_TO_PARENT, 0.2f);    // 结束时Y轴相对于父控件移动
    trans.setDuration(2000);
    imageView.startAnimation(trans);

在xml中设置View动画

在xml中设置动画也比较简单。
首先在res资源目录下新建一个anim目录,然后创建一个xml文件,下面创建了一个TranslateAnimation位移动画的xml文件,代码如下:

    
    
    
    

在xml中设置的参数基本与在代码设置的参数无异,在设置好xml之后,就是调用这个动画了,调用的方法如下:

    Animation translate = AnimationUtils.loadAnimation(getApplicationContext(), R.anim.translate);
    //开始动画
    iv.startAnimation(translate);

只需要使用AnimationUtils这个类加载R.anim.translate动画,也就是刚才设置的xml文件的文件名

属性动画

上面的补间动画有个确定,就是不会改变运行动画的真实坐标,如使用TranslateAnimation的时候,ImageView在动画结束时停留在另一个位置,但是点击这个位置确实没有效果的,必须点击开始时的位置才起效。

而属性动画则是能够改变ImageView的真实坐标。

属性动画是使用ObjectAnimator这个类实现的,而使用这一个类就能够实现补间动画四个类的效果。

ObjectAnimator有个特点,就是我们无法使用new的方式创建出他的实例,而是使用ofFloat(Object target, String propertyName, float... values)这个静态方法获取的

ofFloat(Object target, String propertyName, float... values)
参数意义:
    target        :要执行动画的对象
    propertyName:属性的名字,即执行动画的对象要执行哪种动画(执行动画的对象的所拥有的方法)
    values        :执行动画的参数,是可变参数,意思是能够传入多个值

属性动画使用的方法很简单,代码如下:

        //创建属性动画
    /**
     * target 执行的目标  
     * propertyName 属性名字  The name of the property being animated.
     * float... values 可变参数 
     */
    ObjectAnimator oa = ObjectAnimator.ofFloat(imageView, "translationX", 10, 50,20,100);
    oa.setDuration(2000);
    oa.start(); //开始动画

上面代码执行的时候将会对imageView进行在X轴上的位移,先移动到10,然后继续向右移动到50,在向左移动到20,最后移动到100的位置。

实现缩放效果,下面代码会将图片纵向缩放,也就是图片变扁了:

    ObjectAnimator oa = ObjectAnimator.ofFloat(imageView, "alpha", 0, 0.5f, 0, 1,0,1);
    oa.setDuration(2000);
    oa.start();

实现旋转效果:

    // 按照中心点旋转
    // ObjectAnimator oa = ObjectAnimator.ofFloat(imageView, "rotation", 0, 180, 90, 360);
    // 按照X轴旋转
    ObjectAnimator oa = ObjectAnimator.ofFloat(imageView, "rotationX", 0, 180, 90, 360);
    oa.setDuration(2000);
    oa.start();

实现透明效果:

    ObjectAnimator oa = ObjectAnimator.ofFloat(imageView, "alpha", 0, 0.5f, 0, 1,0,1);
    oa.setDuration(2000);
    oa.start();

实现动画一起执行的效果

    AnimatorSet as = new AnimatorSet();
    ObjectAnimator oa = ObjectAnimator.ofFloat(imageView, "translationX", 10, 50, 20, 100);
    ObjectAnimator oa2 = ObjectAnimator.ofFloat(imageView, "scaleY", 0.1f, 2, 1, 2);
    ObjectAnimator oa3 = ObjectAnimator.ofFloat(imageView, "alpha", 0, 0.5f, 0, 1);
    ObjectAnimator oa4 = ObjectAnimator.ofFloat(imageView, "rotationY", 0, 180, 90, 360);
    as.setDuration(2000);//执行动画时长
    as.setTarget(iv);//iv执行动画
    //往集合中添加动画
    //动画逐个执行
    as.playSequentially(oa, oa2, oa3, oa4);
    //动画全部一起执行
    //as.playTogether(oa, oa2, oa3, oa4);
    as.start();

在XML中设置属性动画

在xml中使用属性动画要在res文件夹下新建一个animator文件夹,然后穿件一个xml文件,这里命名为oanimator.xml,代码如下:

    
    
        
    
    

在代码中调用这个它:

    ObjectAnimator oa = (ObjectAnimator) AnimatorInflater.loadAnimator(this, R.animator.oanimator);
    //设置执行目标
    oa.setTarget(iv);
    oa.start();//开始执行

如此就能使用设置的这个动画了。

帧动画

动画中还有一个帧动画,帧动画是使用一系列的图片资源实现的。

实现帧动画非常简单,首先我们设置一个ImageView显示帧动画,然后在Activity绑定它。

然后放一系列的图片资源在drawable文件夹中,在创建一个xml文件,这里命名为my_anim.xml(可随意命名)。
然后在xml中添加要加载的图片资源,代码如下:

    
    
        
        
        
        
        
        
        
        
        
        
        
        
        
        
    

其中girl_1、girl_2···就是我们要加载的图片资源。

设置完之后就能在代码中直接调用:

    // [1]找到iv控件 用来显示动画效果
    ImageView rocketImage = (ImageView) findViewById(R.id.iv);
    // [2]设置背景资源
    rocketImage.setBackgroundResource(R.drawable.my_anim);
    // [3]获取AnimationDrawable 类型
    AnimationDrawable ad = (AnimationDrawable) rocketImage.getBackground();
    // [4]开始执行动画
    ad.start();

如此一来就能后执行帧动画了。

Android动画学习相关资源:
Android属性动画完全解析(上),初识属性动画的基本用法
Android属性动画完全解析(中),ValueAnimator和ObjectAnimator的高级用法
Android属性动画完全解析(下),Interpolator和ViewPropertyAnimator的用法

你可能感兴趣的:(Android中的动画)