Android基础———动画

最新推荐文章于 2023-06-25 20:51:27 发布

ZQ小虾

最新推荐文章于 2023-06-25 20:51:27 发布

阅读量222

点赞数

分类专栏： Android 文章标签： Android 动画 animation

本文链接：https://blog.csdn.net/u013285124/article/details/52282698

版权

Android 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

动画

动画分类

1.帧动画： 一帧一帧的图片连续播放就是一个帧动画，主要用于重复显示某些动画
2.补间动画：位移，旋转，缩放，渐变，四种动画，四种动画可以单独，也可以结合使用
3.属性动画

帧动画

 1.在drawable文件夹下放帧动画的图片（也可以放在mipmap里面），
  并在该文件夹下创建一个帧动画的每一帧的图片列表xml文件，根节点是animation-list:
    <?xml version="1.0" encoding="utf-8"?>
        <animation-list xmlns:android="http://schemas.android.com/apk/res/android">
        <item
            android:drawable="@drawable/horse1"
            android:duration="200" />
        <item
            android:drawable="@drawable/horse2"
            android:duration="200" />
        <item
            android:drawable="@drawable/horse3"
            android:duration="200" />
        <item
            android:drawable="@drawable/horse4"
            android:duration="200" />
        <item
            android:drawable="@drawable/horse5"
            android:duration="200" />
        <item
            android:drawable="@drawable/horse6"
            android:duration="200" />
        <item
            android:drawable="@drawable/horse7"
            android:duration="200" />
        <item
            android:drawable="@drawable/horse8"
            android:duration="200" />
    </animation-list>

 2.在代码中要显示帧动画图片，
    需要先给布局文件中的imageview控件设置帧动画的列表文件
    ImageView iv_horse.setBackgroundResource(R.drawable.horse_frame);
    然后将imageview控件的背景强行设置为animationdrawbale 
     AnimationDrawable animation=(AnimationDrawable) iv_horse.getBackground();
    //上面一句话获取了动画对象，直接开始就可以显示动画效果了
    animation.start();

    获取了animation对象后，可以控制动画的开始，也可以控制动画停止，
    animation.stop();
    也可以获得该动画的所有帧数
    animation.getNumberOfFrames();
    获取指定帧数的时间
    animation.getDuration(int index)

补间动画只能给控件使用

使用xml创建各种动画

1.在res文件夹中建一个anim的文件夹，创建一个xml布局文件，
2.各种动画补间动画的属性：
缩放动画：根节点是scale

xml的属性：
    fromXscale:从X轴哪里开始
    toXScale：到X轴的哪儿
    fromYScale:从Y轴哪里开始
    toYScale：到Y轴的哪儿
    repeatMode:重复展示动画，
               设置为restart就可以重复
               设置reverse指的是按动画的逆序再回来    
    repeatCount：重复执行的次数，第一次默认执行的不算在这个次数里面。所以重复5次时，一共执行了6次，
    pivotX表示缩放的中轴点X坐标，距离自身左边缘的位置，比如你想以图象的中心为中轴点，就是50%
    pivotY同上

代码中的方法：
    new ScaleAnimation()



位移动画：xml根节点是 translate
    duration:动画执行的时间
    repeatMode:是否重复执行 reverse、restart
    repeatCount:重复的次数
    fromXDelta:从X轴的什么地方开始移动
    toXDelta:终点。填的参数是百分比，是以控件的宽高为基准为大小移动。200%，表示横着移动两个控件的宽度。如果这里是负数，则会往左走，移动的这个地方也是图片的起点。
    fromYDelta:从Y轴的什么地方开始移动
    toYDelta:终点。填的参数是百分比，是以控件的宽高为基准为大小移动。

旋转动画：xml根节点是rotate
    pivotoX：10%  旋转中心的x位置
    pivotoY:30%   旋转中心的y位置
    fromDegres:从多少度开始旋转，当前位置是0度，
    toDegrees:到多少度开始旋转

渐变动画：根节点是alpha
    android:fromAlpha="0.2"  //从多少开始渐变，0是透明，1是本来的颜色
    android:toAlpha="1"      //渐变到多少
    android:repeatMode="restart"
    android:repeatCount="3"
    android:duration="5000"
集合动画：根节点是set，然后在里面加入上面的四种动画模式的配合，
    <set xmlns:android="http://schemas.android.com/apk/res/android">
        <rotate xmlns:android="http://schemas.android.com/apk/res/android"
            android:pivotX="30%"
            android:pivotY="30%"
            android:fromDegrees="30"
            android:toDegrees="270"
            android:repeatMode="restart"
            android:repeatCount="3"
            android:duration="4000"
            >
        </rotate>
        <scale xmlns:android="http://schemas.android.com/apk/res/android"
            android:fromXScale="0.5"
            android:toXScale="1.5"
            android:fromYScale="0.5"
            android:toYScale="1.5"
            android:pivotX="0.5"
            android:pivotY="0.5"
            android:duration="2000"
            android:repeatMode="restart"
            android:repeatCount="5"
            />
        <translate xmlns:android="http://schemas.android.com/apk/res/android"
            android:fromXDelta="0"
            android:toXDelta="200%"
            android:fromYDelta="0"
            android:toYDelta="200%"
            android:duration="5000"
            android:repeatMode="restart"
            android:repeatCount="5"
            />
    </set>

xml写好了后，在代码里面加载xml动画，以收缩方式为例：
   Animation animationScale= AnimationUtils.loadAnimation(this,R.anim.scale);
    //然后填充到imageview中去，开始动画
    iv.startAnimation(animationScale);
动画集合同样也是这样：
    Animation animationSet=AnimationUtils.loadAnimation(this,R.anim.set);
    iv.startAnimation(animationSet);

使用代码创建补间动画

1.代码的基本格式：
    //缩放动画 构造函数里面的参数和xml里面的属性一致
     Animation scaleAnimation=new ScaleAnimation(0.2f,1.5f,0.3f,1.5f,Animation.RELATIVE_TO_SELF,0.5f,Animation.RELATIVE_TO_SELF,0.5f);
    scaleAnimation.setDuration(5000);
    //使用imageview控件来开启动画
    iv.startAnimation(scaleAnimation);
    //其他的动画模式都一样，平移，渐变，旋转，都是这个格式
    //平移
        Animation translateAnimation=new TranslateAnimation(Animation.RELATIVE_TO_SELF,0.2f,Animation.RELATIVE_TO_SELF,2f,Animation.RELATIVE_TO_SELF,0.5f,Animation.RELATIVE_TO_PARENT,1.5f);
    //渐变
       Animation alphaAnimation=new AlphaAnimation(0.3f,0.9f);
    //旋转
       Animation rotateAnimation=new RotateAnimation(30f,330f,Animation.RELATIVE_TO_SELF,0.3f,Animation.RELATIVE_TO_SELF,0.4f);
2.集合动画，先创建一个SetAnimation，然后还是像上面一样获取各种动画的对象，add进去就可以了。
        AnimationSet setAnimation=new AnimationSet(true);
         // 旋转动画
        Animation rotateAnimation=new RotateAnimation(30f,330f,Animation.RELATIVE_TO_SELF,0.3f,Animation.RELATIVE_TO_SELF,0.4f);
         //平移动画
         Animation scaleAnimation=new ScaleAnimation(0.2f,1.5f,0.3f,1.5f,Animation.RELATIVE_TO_SELF,0.5f,Animation.RELATIVE_TO_SELF,0.5f);
        //添加到集合
         setAnimation.addAnimation(rotateAnimation);
         setAnimation.addAnimation(scaleAnimation);
        //开启集合动画
        iv.startAnimation(setAnimation);

动画的监听，和普通监听一样，重写相应的方法即可

      animationAlpha.setAnimationListener(new Animation.AnimationListener() {
        //动画监听
        @Override
        public void onAnimationStart(Animation animation) {
            Log.e("onAnimationStart: 动画开始咯", "log一发");
        }

        @Override
        public void onAnimationEnd(Animation animation) {
            Log.e("onAnimationEnd: 动画结束咯", "log一发");

        }

        @Override
        public void onAnimationRepeat(Animation animation) {
            Log.e("onAnimationRepeat: 动画重复", "log一发");
        }
    });

属性动画

属性动画在平移的过程中，控件也跟着一起移动，但是补间动画不会。

1.xml创建属性动画：
    在anim文件夹中写好xml
    <objectAnimator xmlns:android="http://schemas.android.com/apk/res/android"
        android:duration="3000"
        android:propertyName="translationX"
        android:valueFrom="0"
        android:valueTo="100dp"
        android:interpolator="@android:anim/anticipate_overshoot_interpolator"
        android:valueType="floatType">
    </objectAnimator>

    在代码中加载进去：
     Animator animator = AnimatorInflater.loadAnimator(this, R.animator.objectanimator);//从资源文件加载一个属性动画
     animator.setTarget(tv);//将动画与控件绑定
     animator.start();      //开启动画
2.代码创建属性动画
与补间动画模式都很相近。
通过objectAnimator的方法ofFloat方法，设置哪个控件，将要执行那种动画，动画的执行值如缩放多少，平移多少都在这个方法里面。
/**
 * 代码渐变动画
 */
private void animatorAlpha() {
    ObjectAnimator alpha = ObjectAnimator.ofFloat(tv, "alpha", 0.1f, 0.9f, 1.0f, 1f, 0.5f, 0.8f);
    alpha.setDuration(5000);
    alpha.start();
}

/**
 * 代码创建旋转动画
 */
private void animatorRotate() {
    //图片控件旋转
    //        ObjectAnimator rotation = ObjectAnimator.ofFloat(tv, "rotation", 0f, 180f, 360f);
    //        ObjectAnimator rotation = ObjectAnimator.ofFloat(tv, "rotationY", 0f, 180f, 360f);
    //        ObjectAnimator rotationx = ObjectAnimator.ofFloat(tv, "rotationX", 0f, 180f, 360f);
    //        rotation.setDuration(3000);
    //        rotationx.setDuration(3000);
    //        rotation.start();
    //        rotationx.start();

    //设置字体变化的动画
    ObjectAnimator textSize = ObjectAnimator.ofFloat(tv, "textSize", 10, 30);
    textSize.setDuration(3000);
    textSize.start();
}

/**
 * 代码创建缩放动画
 */
private void animatorScalec() {
    ObjectAnimator scaleX = ObjectAnimator.ofFloat(iv, "scaleX", 0.2f, 1.0f, 0.5f, 2.0f, 3.8f, 10f, 1.4f);
    ObjectAnimator scaleY = ObjectAnimator.ofFloat(iv, "scaleY", 0.2f, 1.0f, 0.5f, 2.0f, 3.8f, 10f, 1.4f);
    scaleX.setDuration(5000);
    scaleY.setDuration(5000);
    scaleX.start();
    scaleY.start();
}

/**
 * 代码创建位移属性动画
 */
private void animatorTranslate() {
//        ValueAnimator valueAnimator = ValueAnimator.ofFloat(100f, 300f);//创建一个属性动画,里面的两个参数,代表是动画的属性值
//        valueAnimator.setDuration(2000);
//        valueAnimator.setTarget(iv);//设置动画的目标
//        valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {//设置更新的事件
//            @Override
//            public void onAnimationUpdate(ValueAnimator valueAnimator) {
//                float f = (float) valueAnimator.getAnimatedValue();//获取到当前动画执行到的值
//                   iv.setTranslationX(f);//将值作为位移的参数设置给控件,设置的相对参数
//                iv.setX(f);//设置的是绝对参数
//            }
//        });
//        valueAnimator.start();
    ObjectAnimator translationX = ObjectAnimator.ofFloat(iv, "translationX", 0, 300f);//位移动画
    translationX.setDuration(2000);
    translationX.start();
}


代码创建动画的方式除了上面的那种，还有另外一种：
    Property property = Property.of(TextView.class, float.class, "textSize");//创建一个属性对象, 宿主类型 Tetxview, 参数值类型float, 参数名textSize
    ObjectAnimator objectAnimator = ObjectAnimator.ofFloat(tv, property, 10, 20, 30, 40, 50);
    objectAnimator.setDuration(5000);
    objectAnimator.start();

代码创建动画集合：也是通过创建一个setanimator类，然后添加进去上面的各种动画类、只是在添加进入集合的时候会有不同的方式，不同的方式决定这些动画的执行顺序，比如同时执行就有playTogether（），先后执行有after，before等

 ObjectAnimator alpha = ObjectAnimator.ofFloat(tv, "alpha", 0.1f, 0.9f, 1.0f, 1f, 0.5f, 0.8f);
    ObjectAnimator textSize = ObjectAnimator.ofFloat(tv, "textSize", 10, 30);
    ObjectAnimator scaleX = ObjectAnimator.ofFloat(iv, "scaleX", 0.2f, 1.0f, 0.5f, 2.0f, 3.8f, 10f, 1.4f);
    ObjectAnimator scaleY = ObjectAnimator.ofFloat(iv, "scaleY", 0.2f, 1.0f, 0.5f, 2.0f, 3.8f, 10f, 1.4f);
    ObjectAnimator translationX = ObjectAnimator.ofFloat(iv, "translationX", 0, 300f);//位移动画
    AnimatorSet animatorSet = new AnimatorSet();
    animatorSet.setDuration(5000);
    animatorSet.play(alpha).with(translationX).before(textSize).after(scaleX);//自定义顺序
//  animatorSet.playTogether(alpha,textSize,scaleX,scaleY,translationX);//所有的动画一起播放
//  animatorSet.playSequentially(alpha,textSize,scaleX,scaleY,translationX);//将参数中的所有动画按照顺序一个一个播放
    animatorSet.start();