Android 帧动画 补间动画 属性动画

Android 中动画分为三种:
  1 帧动画
  2 补间动画
  3 属性动画

1 帧动画 FrameAnimation

先看图
这里写图片描述

常用的为xml资源文件方式
res/drawable下创建 animation.xml文件

<?xml version="1.0" encoding="utf-8"?>
<animation-list
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:oneshot="false"
    >
    <!--false  代表循环播放   true 代表只播放一次-->

    <item android:drawable="@drawable/animate_01" android:duration="150"/>
    <item android:drawable="@drawable/animate_02" android:duration="150"/>
    <item android:drawable="@drawable/animate_03" android:duration="150"/>
    <item android:drawable="@drawable/animate_04" android:duration="150"/>
    <item android:drawable="@drawable/animate_05" android:duration="150"/>
    <item android:drawable="@drawable/animate_06" android:duration="150"/>
    <item android:drawable="@drawable/animate_07" android:duration="150"/>
    <item android:drawable="@drawable/animate_08" android:duration="150"/>
    <item android:drawable="@drawable/animate_09" android:duration="150"/>
    <item android:drawable="@drawable/animate_10" android:duration="150"/>
    <item android:drawable="@drawable/animate_11" android:duration="150"/>
    <item android:drawable="@drawable/animate_12" android:duration="150"/>
    <item android:drawable="@drawable/animate_13" android:duration="150"/>
    <item android:drawable="@drawable/animate_14" android:duration="150"/>
</animation-list>

界面布局中引入

<ImageView
    android:id="@+id/image_view"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@drawable/animation"
        />

运行就可得到图中的效果。

代码的方式

  ImageView imageView = (ImageView) findViewById(R.id.image_view);

        AnimationDrawable animationDrawable = new AnimationDrawable();
        animationDrawable.addFrame(getResources().getDrawable(R.drawable.animate_01),150);
        animationDrawable.addFrame(getResources().getDrawable(R.drawable.animate_02),150);
        animationDrawable.addFrame(getResources().getDrawable(R.drawable.animate_03),150);
        animationDrawable.addFrame(getResources().getDrawable(R.drawable.animate_04),150);
        animationDrawable.addFrame(getResources().getDrawable(R.drawable.animate_05),150);
        animationDrawable.addFrame(getResources().getDrawable(R.drawable.animate_06),150);
        animationDrawable.addFrame(getResources().getDrawable(R.drawable.animate_07),150);
        animationDrawable.addFrame(getResources().getDrawable(R.drawable.animate_08),150);
        animationDrawable.addFrame(getResources().getDrawable(R.drawable.animate_09),150);
        animationDrawable.addFrame(getResources().getDrawable(R.drawable.animate_10),150);
        animationDrawable.addFrame(getResources().getDrawable(R.drawable.animate_11),150);
        animationDrawable.addFrame(getResources().getDrawable(R.drawable.animate_12),150);
        animationDrawable.addFrame(getResources().getDrawable(R.drawable.animate_13),150);
        animationDrawable.addFrame(getResources().getDrawable(R.drawable.animate_14),150);


        imageView.setBackground(animationDrawable);
        //循环播放
        animationDrawable.setOneShot(false);
        //开始
        animationDrawable.start();
        //停止
//        animationDrawable.stop();

2 补间动画 TweenAnimation

补间动画主要分为四种:

 1 AlphaAnimation  渐变动画

 2 RotateAnimation 旋转动画

 3 ScaleAnimation  缩放动画

 4 TranslateAnimation 平移动画

#### AlphaAnimation 渐变动画

这里写图片描述

    //从透明到不透明
    AlphaAnimation alphaAnimation = new AlphaAnimation(0,1);
    //时间
    alphaAnimation.setDuration(1500);
    //设置动画执行完一次后再重复执行的次数
    alphaAnimation.setRepeatCount(0);
    mImageViewCat.startAnimation(alphaAnimation);

RotateAnimation 旋转动画

这里写图片描述

    //以左上角为圆心顺时针旋转90度
    //RotateAnimation rotateAnimation = new RotateAnimation(0,90);
    //以图片的中心为圆心顺时针旋转90度
    RotateAnimation rotateAnimation = new RotateAnimation(0,90, Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f);
    rotateAnimation.setDuration(1500);
    //设置动画执行完一次后再重复执行的次数
    rotateAnimation.setRepeatCount(2);
    //动画执行完是否保存状态  false 不保存  true 保存
    rotateAnimation.setFillAfter(false);
    mImageViewCat.startAnimation(rotateAnimation);

ScaleAnimation 缩放动画

这里写图片描述

    //以图片中心为中心从0到1放大
    ScaleAnimation scaleAnimation = new ScaleAnimation(
            0,1.0f, 0, 1.0f,
            Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f);
    scaleAnimation.setDuration(2000);
    mImageViewCat.startAnimation(scaleAnimation);

TranslateAnimation 平移动画

这里写图片描述

    //x方向向右平移图片的宽度 y方向向下平移图片的高度
    TranslateAnimation translateAnimation = new TranslateAnimation(Animation.RELATIVE_TO_SELF, 0f, Animation.RELATIVE_TO_SELF, 1f,
            Animation.RELATIVE_TO_SELF, 0f, Animation.RELATIVE_TO_SELF, 1f);
    translateAnimation.setDuration(2000);
    mImageViewCat.startAnimation(translateAnimation);

AnimationSet 动画集合

这里写图片描述

    //渐变 旋转 缩放 平移同时进行
    AnimationSet animationSet = new AnimationSet(false);
    AlphaAnimation alphaAnimationS = new AlphaAnimation(0,1);
    RotateAnimation rotateAnimationS = new RotateAnimation(0,90, Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f);
    ScaleAnimation scaleAnimationS = new ScaleAnimation(
            0,1.0f, 0, 1.0f,
            Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f);
    TranslateAnimation translateAnimationS = new TranslateAnimation(Animation.RELATIVE_TO_SELF, 0f, Animation.RELATIVE_TO_SELF, 1f,
            Animation.RELATIVE_TO_SELF, 0f, Animation.RELATIVE_TO_SELF, 1f);

    animationSet.addAnimation(alphaAnimationS);
    animationSet.addAnimation(rotateAnimationS);
    animationSet.addAnimation(scaleAnimationS);
    animationSet.addAnimation(translateAnimationS);
    animationSet.setDuration(3000);
    mImageViewCat.startAnimation(animationSet);

3 属性动画 PropertyAnimation

渐变

这里写图片描述

//第一个参数指定需要动画的控件
//第二个参数指定控件的属性
//第三个参数为可变长参数
ObjectAnimator animator = ObjectAnimator.ofFloat(mImageViewCat,"alpha",1,0,1);
animator.setDuration(3000);
animator.start();

旋转

这里写图片描述

         //旋转,先顺时针转一圈,在逆时针转一圈
                //以z方向为轴旋转
                ObjectAnimator animator = ObjectAnimator.ofFloat(mImageViewCat,"rotation",0,360,0);
                //以x方向为轴旋转
//                ObjectAnimator animator = ObjectAnimator.ofFloat(mImageViewCat,"rotationX",0,360,0);
                //以y方向为轴旋转
//                ObjectAnimator animator = ObjectAnimator.ofFloat(mImageViewCat,"rotationY",0,360,0);
                animator.setDuration(3000);
                animator.start();

缩放

这里写图片描述

         //缩放 放大到2倍在缩小至原始大小
                // 宽度放大和缩小
                ObjectAnimator animator = ObjectAnimator.ofFloat(mImageViewCat,"scaleX",1,2,1);
                //高度放大和缩小
//                ObjectAnimator animator = ObjectAnimator.ofFloat(mImageViewCat,"scaleY",1,2,1);
                animator.setDuration(3000);
                animator.start();

平移

这里写图片描述

        //平移
                // x方向平移
                ObjectAnimator animator = ObjectAnimator.ofFloat(mImageViewCat,"translationX",1,100,1);
                //y方向平移
//                ObjectAnimator animator = ObjectAnimator.ofFloat(mImageViewCat,"translationY",1,100,1);
                animator.setDuration(3000);
                animator.start();

集合

这里写图片描述

         ObjectAnimator alphaAnimator = ObjectAnimator.ofFloat(mImageViewCat,"alpha",1,0,1);
                ObjectAnimator rotaionAnimator = ObjectAnimator.ofFloat(mImageViewCat,"rotation",0,360,0);
                ObjectAnimator scaleXAnimator = ObjectAnimator.ofFloat(mImageViewCat,"scaleX",1,2,1);
                ObjectAnimator translationXAnimator = ObjectAnimator.ofFloat(mImageViewCat,"translationX",1,100,1);

                AnimatorSet animatorSet = new AnimatorSet();
                animatorSet.playTogether(alphaAnimator,rotaionAnimator,scaleXAnimator,translationXAnimator);
                animatorSet.setDuration(3000);
                animatorSet.start();
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章