一手遮天 Android - Animation: 视图动画(View Animation)基础

项目地址 https://github.com/webabcd/AndroidDemo
作者 webabcd

一手遮天 Android - Animation: 视图动画(View Animation)基础

示例如下:

/animation/AnimationDemo1.java

/**
 * 视图动画(View Animation)基础
 * 视图动画只是改变了 View 的视觉效果,而并没有改变 View 的属性(比如 left, top, right, bottom 之类的都是不变的)
 * View Animation(视图动画)即 Tween Animation(补间动画)
 * 本例中定义动画的 xml 请参见 res/anim/set_animation_animationdemo1.xmlndemo1.xml
 *
 *
 * AnimationSet - 动画集合,用于定义一组动画。继承自 Animation
 *     addAnimation(Animation a) - 添加动画
 * TranslateAnimation, ScaleAnimation, AlphaAnimation, RotateAnimation - 位移动画,缩放动画,不透明度动画,旋转动画。均继承自 Animation
 *     在构造函数中指定动画的参数,不同动画的不同参数的解释看 res/anim/set_animation_animationdemo1.xmlndemo1.xml 中的说明吧
 * Animation - 动画(在 xml 定义的各种视图动画均需要放在 res/anim 目录下)
 *     setDuration(), setStartOffset(), setFillAfter(), setFillBefore(), setRepeatCount(), setRepeatMode() - 具体解释看 res/anim/set_animation_animationdemo1.xmlndemo1.xml 中的说明吧
 *     setAnimationListener() - 设置动画监听器
 *         onAnimationStart - 动画开始
 *         onAnimationEnd - 动画结束
 *         onAnimationRepeat - 动画重复
 * AnimationUtils.loadAnimation(Context context, int id) - 获取 xml 中定义的 Animation 对象
 *
 *
 * View - 视图
 *     startAnimation(Animation animation) - 开始动画
 *     clearAnimation() - 取消动画
 */

package com.webabcd.androiddemo.animation;

import androidx.appcompat.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.view.animation.Animation;
import android.view.animation.AnimationUtils;
import android.widget.Button;
import android.widget.TextView;

import com.webabcd.androiddemo.R;

public class AnimationDemo1 extends AppCompatActivity {

    private TextView _textView1;
    private TextView _textView2;
    private Button _button1;
    private Button _button2;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_animation_animationdemo1);

        _textView1 = findViewById(R.id.textView1);
        _textView2 = findViewById(R.id.textView2);
        _button1 = findViewById(R.id.button1);
        _button2 = findViewById(R.id.button2);

        sample();
    }

    private void sample() {
        // AnimationUtils.loadAnimation() - 从 xml 中加载 Animation
        final Animation animation = AnimationUtils.loadAnimation(AnimationDemo1.this, R.anim.set_animation_animationdemo1);

        _button1.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                // 开始动画
                _textView1.startAnimation(animation);
            }
        });

        _button2.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                // 取消动画
                _textView1.clearAnimation();
            }
        });

        animation.setAnimationListener(new Animation.AnimationListener() {
            @Override
            public void onAnimationStart(Animation animation) {
                // 动画开始
                _textView2.append("onAnimationStart\n");
            }

            @Override
            public void onAnimationEnd(Animation animation) {
                // 动画结束
                _textView2.append("onAnimationEnd\n");
            }

            @Override
            public void onAnimationRepeat(Animation animation) {
                // 动画重复
                _textView2.append("onAnimationRepeat\n");
            }
        });
    }
}

/layout/activity_animation_animationdemo1.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <TextView
        android:id="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="TextView"
        android:textColor="#FFFF0000" />

    <TextView
        android:id="@+id/textView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="200dp" />

    <Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textAllCaps="false"
        android:text="startAnimation"/>

    <Button
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textAllCaps="false"
        android:text="clearAnimation"/>
</LinearLayout>

/anim/set_animation_animationdemo1.xml

<?xml version="1.0" encoding="utf-8"?>
<!--
    set - 用于定义一组动画,如果只需要某一个动画的话则根节点直接写 translate 或 scale 或 rotate 或 alpha 就好,另外 set 里是可以嵌套 set 的
        duration - 动画的持续时间,单位:毫秒
        startOffset - 动画启动后在此值指定的时间后再真正开始动画,单位:毫秒
        fillAfter="true", fillBefore="false" - 动画结束后保持动画结束后的状态
        fillAfter="false", fillBefore="true" - 动画结束后还原到动画开始之前的的状态

    注1:
    以上这些属性也适用于 translate, scale, rotate, alpha
    如果在 set 中设置了这些属性,则其子控件们都会继承其值
    如果在 set 中设置了这些属性,然后又在子控件中设置这些属性,则子控件中的设置是无效的

    注2:
    在 set 中设置 repeatMode, repeatCount 是无效的,需要在 translate, scale, rotate, alpha 中设置才能生效
-->
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="3000"
    android:startOffset="1000"
    android:fillAfter="true"
    android:fillBefore="false">

    <!--
        位移动画
            fromXDelta, toXDelta - 动画开始和结束时 x 轴方向上的位置(以左上角顶点为原点)
            toXDelta, toYDelta - 动画开始和结束时 y 轴方向上的位置(以左上角顶点为原点)
            repeatMode - 动画结束后的重复方式
                restart - 重头播放(对应 java 中的 Animation.RESTART)
                reverse - 来回播放(对应 java 中的 Animation.REVERSE)
            repeatCount - 动画重复次数(-1 代表无限重复)
    -->
    <translate
        android:fromXDelta="0%p"
        android:fromYDelta="0%p"
        android:toXDelta="10%p"
        android:toYDelta="10%p" />

    <!--
        缩放动画
            fromXScale, toXScale - 动画开始和结束时 x 轴方向上的缩放倍数
            fromYScale, toYScale - 动画开始和结束时 y 轴方向上的缩放倍数
            pivotX, pivotY - 缩放中心点坐标
            repeatMode - 动画结束后的重复方式
                restart - 重头播放(对应 java 中的 Animation.RESTART)
                reverse - 来回播放(对应 java 中的 Animation.REVERSE)
            repeatCount - 动画重复次数(-1 代表无限重复)
    -->
    <scale
        android:fromXScale="1.0"
        android:fromYScale="1.0"
        android:toXScale="1.2"
        android:toYScale="1.2"
        android:pivotX="50%"
        android:pivotY="50%" />

    <!--
        旋转动画
            fromDegrees, toDegrees - 动画开始和结束时的角度(顺时针方向为正)
            pivotX, pivotY - 旋转中心点坐标
            repeatMode - 动画结束后的重复方式
                restart - 重头播放(对应 java 中的 Animation.RESTART)
                reverse - 来回播放(对应 java 中的 Animation.REVERSE)
            repeatCount - 动画重复次数(-1 代表无限重复)
    -->
    <rotate
        android:fromDegrees="0"
        android:toDegrees="30"
        android:pivotX="50%"
        android:pivotY="50%" />

    <!--
        不透明度动画
            fromAlpha, toAlpha - 动画开始和结束时的不透明度
            repeatMode - 动画结束后的重复方式
                restart - 重头播放(对应 java 中的 Animation.RESTART)
                reverse - 来回播放(对应 java 中的 Animation.REVERSE)
            repeatCount - 动画重复次数(-1 代表无限重复)
    -->
    <alpha
        android:fromAlpha="1.0"
        android:toAlpha="0.7" />
</set>

<!--
    注:以上 fromXDelta, fromYDelta, toXDelta, toYDelta, pivotX, pivotY 属性值支持的类型如下
    1、数值:比如 20px,20dp 之类的。在 java 中对应的类型为 Animation.ABSOLUTE
    2、百分数:比如 50%(相对于自身的百分比)。在 java 中对应的类型为 Animation.RELATIVE_TO_SELF
    3、百分数p:比如 50%p(相对于父控件的百分比)。在 java 中对应的类型为 Animation.RELATIVE_TO_PARENT
-->

项目地址 https://github.com/webabcd/AndroidDemo
作者 webabcd

posted @ 2021-06-02 08:57  webabcd  阅读(66)  评论(0编辑  收藏  举报