[Top] Android animation summary

Android animation classification

1. Frame animation (Fragme animation)

The traditional animation method is realized by playing the arranged pictures in sequence, similar to movies and gifs.

2. Tween animation (Tween animation)

It can make the view component move, zoom in, zoom out and change the transparency.
Disadvantages:
1. The tween animation can only act on the View
2. Only four animation operations of moving, zooming, rotating and fading can be realized.
3. Only It only changes the display effect of the View, but does not really change the properties of the View

3. Property animation

Starting from Android 3.0, the system has provided us with a new animation mode with very powerful functions, which makes up for the defect that the position of the previous tween animation remains unchanged, and can completely replace the tween animation. What is changed is the property of the control


(1) Frame animation

Method 1: Using XML

1. Create a zhendonghua XML file in the anim file:

<?xml version="1.0" encoding="utf-8"?>
<animation-list xmlns:android="http://schemas.android.com/apk/res/android" android:oneshot="false" >//这个是反复执行的设置;
    <item android:drawable="@drawable/ani1" android:duration="150" />
    <item android:drawable="@drawable/ani2" android:duration="150" />
    <item android:drawable="@drawable/ani3" android:duration="150" />
    <item android:drawable="@drawable/ani4" android:duration="150" />

</animation-list>
<!--android:drawable[drawable]//加载Drawable对象
    android:duration[long]//每一帧动画的持续时间(单位ms)
    android:oneshot[boolean]//动画是否只运行一次,true运行一次,false重复运行
    android:visible[boolean]//Drawable对象的初始能见度状态,true可见,false不可见(默认为false)-->

2. Then you need to set this frame animation to a container, such as:

<imageview
android:src="@drawable/zhendonghua" />

3. You can get the picture of this frame animation from the control and then operate on it

    AnimationDrawable drawable =imageview.getDrawable();
    if (drawable.isRunning()) {
            drawable.stop();
        }else{
            drawable.start();
        }

Method 2: use the code method;

1, add multiple drawables to the array

    //将本地图片加入到数组中
    private int animArr []= {R.drawable.ani1,R.drawable.ani2,R.drawable.ani3,R.drawable.ani4};
    private AnimationDrawable ad;//帧动画类
    private void initList(){
        ad=new AnimationDrawable();
        for (int i = 0; i < animArr.length; i++) {
            //依次将本地图片添加到帧动画里,获取系统本地资源的方法:getResources().getDrawable()
            ad.addFrame(getResources().getDrawable(animArr[i]), 150);
        }
        //是否只执行一次:false  -否   - 循环执行  true -是-只执行一次
        ad.setOneShot(false);//设置动画可否重复   
        //将帧动画设置给图片
        mIv.setImageDrawable(ad);
    }

2. Directly judge the opening and closing


    if (ad.isRunning()) {
            ad.stop();
        }else{
            ad.start();
        }

write picture description herewrite picture description herewrite picture description herewrite picture description here

In order to let everyone learn better, I copied the frame animation pictures, good intentions, where is my like, on the right?

(2) Tween animation

It has two implementations: the first one is written in java code; the second one is written in anim file

1. Transparency animation AlphaAnimation

// 透明度动画
    public void alpha(View v) {
        AlphaAnimation alphaAnimation = new AlphaAnimation(0, 1);
/*      AlphaAnimation (float fromAlpha, float toAlpha)
        fromAlpha: 动画的起始alpha值 (范围:0:完全透明 -1:完全不透明)
        toAlpha:终止的值,动画结束的值 */      
        alphaAnimation.setDuration(3000);// 每次动画持续时间3秒
        alphaAnimation.setFillAfter(true);// 动画最后是否停留在终止的状态
        alphaAnimation.setRepeatCount(3);// 动画重复的次数
        alphaAnimation.setRepeatMode(Animation.REVERSE);// REVERSE: 反转模式
                                                        // RESTART:重新开始
        // 动画监听
        alphaAnimation.setAnimationListener(new AnimationListener() {

            @Override
            public void onAnimationStart(Animation animation) {
                System.out.println("动画开始回调");
            }

            @Override
            public void onAnimationRepeat(Animation animation) {
                System.out.println("动画重复回调");

            }

            @Override
            public void onAnimationEnd(Animation animation) {
                System.out.println("动画结束回调");
                Toast.makeText(getApplicationContext(), "动画结束,进入陌陌关心你界面",
                        Toast.LENGTH_LONG).show();

            }
        });
        iconIv.startAnimation(alphaAnimation);
    }

2. TranslateAnimation

/* TranslateAnimation (int fromXType, 
                float fromXValue, 
                int toXType, 
                float toXValue, 
                int fromYType, 
                float fromYValue, 
                int toYType, 
                float toYValue)
    原点:控件第一次绘制的左上角的坐标点
    fromXType(起点,相对于原点偏移方式):
            Animation.ABSOLUTE 绝对值,像素值
            Animation.RELATIVE_TO_SELF 相对于自己
            Animation.RELATIVE_TO_PARENT 相对于父控件.
    fromXValue(起点,相对于原点偏移量):
            绝对值/百分比     
*/      
        TranslateAnimation translateAnimation = new TranslateAnimation(
                Animation.ABSOLUTE,
                iconIv.getWidth(), // 当前屏幕密度 :240 标准的屏幕密度:160 则dp转px :
                                    // px=dp*240/160
                Animation.ABSOLUTE, iconIv.getWidth(), 
                Animation.ABSOLUTE, 0,
                Animation.RELATIVE_TO_SELF, 1);
        translateAnimation.setDuration(3000);// 每次动画持续时间3秒
        translateAnimation.setFillAfter(true);// 动画最后停留在终止的状态
        translateAnimation.setRepeatCount(3);// 动画重复的次数
        translateAnimation.setRepeatMode(Animation.REVERSE);// REVERSE: 反转模式
                                                            // RESTART:重新开始
        translateAnimation.setInterpolator(new BounceInterpolator());// 设置特效,弹簧效果
        iconIv.startAnimation(translateAnimation);
        System.out.println("控件的宽度" + iconIv.getWidth());
    }

3. Scale Animation ScaleAnimation

/* ScaleAnimation (float fromX, 
                float toX, 
                float fromY, 
                float toY, 
                int pivotXType, 
                float pivotXValue, 
                int pivotYType, 
                float pivotYValue)
    fromX: 缩放起始比例-水平方向
    toX: 缩放最终比例-水平方向
    pivotXType(中心点相较于原点 x方向的类型): 
            Animation.ABSOLUTE
            Animation.RELATIVE_TO_SELF
            RELATIVE_TO_PARENT.
    pivotXValue: 绝对值/百分比    
*/
    public void scale(View v) {
        ScaleAnimation scaleAnimation =new ScaleAnimation
                (0, 2, 0, 2, Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f);
        scaleAnimation.setDuration(3000);// 每次动画持续时间3秒
        scaleAnimation.setFillAfter(true);// 动画最后停留在终止的状态
        scaleAnimation.setRepeatCount(1);// 动画重复的次数
        iconIv.startAnimation(scaleAnimation);

    }

4. Rotate animation rotate

Because it saves trouble, I write the rotation animation in xml here, in order to make everyone understand it faster.

1. Create an XML file of type Animation:

<?xml version="1.0" encoding="utf-8"?>
<rotate xmlns:android="http://schemas.android.com/apk/res/android"
    android:fromDegrees="0"
    android:toDegrees="180"
    android:duration="3000"
    android:interpolator="@android:anim/overshoot_interpolator"
    android:fillAfter="true"
    android:repeatCount="2"
    android:repeatMode="reverse"
    android:pivotX="50%"
    android:pivotY="50%"
    >
    <!--fromDegrees:起始的度数
      toDegrees:终止的度数
      infinite:无限次数 
      起始度数大于终止度数,则能逆时针旋转,否则顺时针
      android:pivotX="50%":旋转围绕的轴心,x方向位置,相对于自己的宽度的一半
      android:pivotX="50%p":相对于父控件宽度的一半
      -->
</rotate>

2. Import xml animation in java

Animation animation1 = AnimationUtils.loadAnimation(this,R.anim.rotate);
imageView.startAnimation(animation1);

5. Composite Animation Set

AnimationSet animationSet=new AnimationSet(false);
//这样在这里面添加就可以了;     
Animation rotateAnimation = AnimationUtils.loadAnimation(this, R.anim.rotate);
animationSet.addAnimation(rotateAnimation);
//AnimationSet set=(AnimationSet) AnimationUtils.loadAnimation(this, R.anim.scalee);
mIv.startAnimation(set);

(3) Property animation

A simple extension

public class MainActivity extends Activity implements OnClickListener {
    private Button mBtn;
    private ImageView mIv,mIv2;
    private ScaleAnimation scale;//伸缩
    private ObjectAnimator object;//属性动画

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        initView();
        initAnim();
    }
    private void initAnim() {
        scale=new ScaleAnimation(1, 2,1,2);
        scale.setDuration(1500);
        scale.setInterpolator(new LinearInterpolator());
        scale.setFillAfter(false);
        //target:要设置的控件 propertyName:要设置的控件属性  values:设置的属性值    注意ofint
        object=ObjectAnimator.ofInt(new MyImg2(mIv2),"width", 150);
        object.setDuration(1500);


    }
    private void initView() {
        mBtn=(Button) findViewById(R.id.mBtn);
        mIv=(ImageView) findViewById(R.id.mIv);
        mIv2=(ImageView) findViewById(R.id.mIv2);
        mBtn.setOnClickListener(this);
    }
    @Override
    public void onClick(View v) {
        //开启动画
        mIv.startAnimation(scale);
        object.start();
    }

    public class MyImg2{
        private ImageView mImg;
        private int width;
        public MyImg2(ImageView img){
            this.mImg=img;
        }
        public int getWidth() {
            return width;
        }
        public void setWidth(int width) {
            this.width = width;
            mImg.getLayoutParams().width=width;//动态的改变图片控件的宽度
            mImg.requestLayout();//重新绘制
            /*
             * LinearLayout.LayoutParams  lp=new LinearLayout.LayoutParams(200, 200);
             * mImg.setLayoutParams(lp);
             * lP:子控件再父容器中所占的大小:img在父容器所占的宽高大小
             * */
        }
    }
}

Guess you like

Origin http://43.154.161.224:23101/article/api/json?id=324457717&siteId=291194637