欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

Android 属性动画基础

程序员文章站 2024-03-24 08:41:40
...

Android 属性动画基础

1.xml写法(xml写法可读性高,但是灵活性不足)
首先要在res目录下面新建一个animator文件夹,所有属性动画的XML文件都应该存放在这个文件夹当中。
(1)duration动画执行时间
(2)propertyName属性名包括:alpha,translationX,translationY,scaleX,scaleY,rotation等
(3)valueFrom:动画起点
(4)valueTo:动画终点

<?xml version="1.0" encoding="utf-8"?>
<!--ordering动画执行顺序,sequentiallty顺序执行,together同时执行-->
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:ordering="sequentially">
    <objectAnimator
        android:duration="2000"
        android:propertyName="translationX"
        android:valueType="floatType"
        android:valueFrom="0"
        android:valueTo="200">
    </objectAnimator>
    <objectAnimator
        android:duration="2000"
        android:valueType="floatType"
        android:propertyName="translationY"
        android:valueFrom="0"
        android:valueTo="200">
    </objectAnimator>
    <set android:ordering="together">
        <objectAnimator
            android:duration="2000"
            android:propertyName="rotation"
            android:valueFrom="0"
            android:valueTo="360"
            android:valueType="floatType">
        </objectAnimator>
        <set android:ordering="sequentially">
            <objectAnimator
                android:duration="2000"
                android:propertyName="alpha"
                android:valueFrom="1"
                android:valueTo="0.5"
                android:valueType="floatType">
            </objectAnimator>
            <objectAnimator
                android:duration="2000"
                android:valueType="floatType"
                android:propertyName="alpha"
                android:valueFrom="0.5"
                android:valueTo="1">
            </objectAnimator>
            <objectAnimator
                android:propertyName="scaleY"
                android:valueFrom="0"
                android:valueTo="2"
                android:valueType="floatType"
                android:duration="2000">
            </objectAnimator>
        </set>
    </set>
</set>

在MainActivity代码如下:

   /**
         * xml写法
         */
        View view =getWindow().getDecorView();
        Animator animator = AnimatorInflater.loadAnimator(MainActivity.this,R.animator.anim_drawble);
        animator.setTarget(button1);
        animator.start();

其中setTarge()中的对象是整个View的对象,也可以是整个view。
2.java写法
java写法灵活多样,但是可读性没有xml好

(1)在xml文件中写下四个Button

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <Button
        app:layout_constraintHorizontal_chainStyle="packed"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/button1"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toLeftOf="@id/button2"
        app:layout_constraintTop_toTopOf="parent"
        android:text="旋转"/>
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/button2"
        android:text="跳跃"
        app:layout_constraintLeft_toRightOf="@+id/button1"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintRight_toLeftOf="@id/button3"/>
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/button3"
        android:text="芜湖"
        app:layout_constraintLeft_toRightOf="@id/button2"
        app:layout_constraintRight_toLeftOf="@id/button4"
        app:layout_constraintTop_toTopOf="parent"/>
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="起飞"
        app:layout_constraintTop_toTopOf="parent"
        android:id="@+id/button4"
        app:layout_constraintLeft_toRightOf="@id/button3"
        app:layout_constraintRight_toRightOf="parent"/>

</androidx.constraintlayout.widget.ConstraintLayout>

(2)修改MainActivity代码如下:

    button1 = findViewById(R.id.button1);
        button2 = findViewById(R.id.button2);
        button3 = findViewById(R.id.button3);
        button4 = findViewById(R.id.button4);
        button3.setOnClickListener(new View.OnClickListener() {
                                       @Override
                                       public void onClick(View v) {
                                           Toast.makeText(MainActivity.this, "ccc", Toast.LENGTH_SHORT).show();
                                       }
                                   }
        );
        /**
         * ObjectAnimator extend ValueAnimator extend Animator
         */
        //将button1从不透明改为透明再 变为不透明
        ObjectAnimator animator1 = ObjectAnimator.ofFloat(button1, "alpha", 1f, 0f, 1f);
         animator1.setDuration(5000);
         animator1.start();   
        //将button2旋转360度
        ObjectAnimator animator2 = ObjectAnimator.ofFloat(button2, "rotation", 0.0f, 360.0f);
         animator2.setDuration(3000);
         animator2.start();
        //将button3移动
        ObjectAnimator animator3 = ObjectAnimator.ofFloat(button3, "translationY",
                0, 200);
        animator3.setDuration(3000);
         animator3.start();

        //将Button4缩放
        ObjectAnimator animator4 = ObjectAnimator.ofFloat(button4, "scaleY", 1f, 5f, 2f);
        animator4.setDuration(2000);
         animator4.start();

修改MainActivity代码如下:

/**
         * java写法    对单一对象使用动画
         */
        button1 = findViewById(R.id.button1);
        button2 = findViewById(R.id.button2);
        button3 = findViewById(R.id.button3);
        button4 = findViewById(R.id.button4);
       
        /**
         * ObjectAnimator extend ValueAnimator extend Animator
         */
        //将button1从不透明改为透明再 变为不透明
        ObjectAnimator animator1 = ObjectAnimator.ofFloat(button1, "alpha", 1f, 0f, 1f);
         animator1.setDuration(5000);
         animator1.start();
        //将button2旋转360度
        ObjectAnimator animator2 = ObjectAnimator.ofFloat(button2, "rotation", 0.0f, 360.0f);
         animator2.setDuration(3000);
         animator2.start();
        //将button3移动
        ObjectAnimator animator3 = ObjectAnimator.ofFloat(button3, "translationY",
                0, 200);
        animator3.setDuration(3000);
         animator3.start();

        //将Button4缩放
        ObjectAnimator animator4 = ObjectAnimator.ofFloat(button4, "scaleY", 1f, 5f, 2f);
        animator4.setDuration(2000);
         animator4.start();

这里就单一动画的执行,他们是同时执行的,如果想要控制动画的执行顺序课使用组合动画完成。
(3)组合动画(将上面的animator.start()方法注释掉,这里再调用AnimatorSet类)

 /**
         * 组合动画
         *  after(Animator anim)   将现有动画插入到传入的动画之后执行
         *  after(long delay)   将现有动画延迟指定毫秒后执行
         *  before(Animator anim)   将现有动画插入到传入的动画之前执行
         *  with(Animator anim)   将现有动画和传入的动画同时执行
         */
        AnimatorSet animSet = new AnimatorSet();
        animSet.play(animator1).with(animator2).after(animator3);
        animSet.setDuration(5000);
        animSet.start();

这里的就是animator3先执行,然后animator2和animator1同时执行。
(4)动画监听事件
若想要捕捉单个动画执行情况并写对应的逻辑可言对其添加监听事件。


        /**
         * Animator事件监听器
         */
        animator1.addListener(new Animator.AnimatorListener() {
            @Override
            public void onAnimationStart(Animator animation) {
                //开始
                Toast.makeText(MainActivity.this, "动画开始", Toast.LENGTH_SHORT).show();
                button1.setText("kais");
                //Log.d("kasi","开始");
            }

            @Override
            public void onAnimationEnd(Animator animation) {
                //结束
                Toast.makeText(MainActivity.this, "动画结束", Toast.LENGTH_SHORT).show();

            }

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

            @Override
            public void onAnimationRepeat(Animator animation) {
                        //重复
            }
        });

后续还有更高级的用法详情可见:属性动画