Android学习记录（二十三）

于 2021-02-04 08:44:29 发布
阅读量437 收藏
点赞数
分类专栏： 笔记
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46705517/article/details/113602170
版权

文章目录

实现补间动画

1.补间动画的类型

（1）透明度动画(alpha animation)
（2）缩放动画(scale animation)
（3）平移动画(translate animation)
（4）旋转动画(rotate animation)

2.案例演示-透明度动画

（1）新建项目

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

（2）在drawable中添加图片素材

在这里插入图片描述

（3）activity_main.xml

在这里插入图片描述

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

    <ImageView
        android:id="@+id/ivBelle"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_marginBottom="20dp"
        android:layout_weight="7"
        android:src="@drawable/belle" />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:gravity="center"
        android:orientation="horizontal">

        <Button
            android:id="@+id/btnAnimationByCode"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:onClick="doAnimationByCode"
            android:text="@string/animation_by_code" />

        <Button
            android:id="@+id/btnAnimationByXML"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:onClick="doAnimationByXML"
            android:text="@string/animation_by_xml" />
    </LinearLayout>
</LinearLayout>

（4）创建透明度动画配置文件

在res目录下新建anim目录，并添加新的xml文件
在这里插入图片描述

<?xml version="1.0" encoding="utf-8"?>
<alpha xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="3000"
    android:fromAlpha="1"
    android:repeatCount="1"
    android:repeatMode="reverse"
    android:toAlpha="0" />

（5）strings.xml

在这里插入图片描述

<resources>
    <string name="app_name">补间动画 - 透明度动画</string>
    <string name="animation_by_code">通过Java代码实现动画</string>
    <string name="animation_by_xml">通过xml配置实现动画</string>
</resources>

（6）主界面类

在这里插入图片描述

package net.nell.alphaanimation;

import android.os.Bundle;
import android.view.View;
import android.view.animation.AlphaAnimation;
import android.view.animation.Animation;
import android.view.animation.AnimationUtils;
import android.widget.ImageView;

import androidx.appcompat.app.AppCompatActivity;

public class MainActivity extends AppCompatActivity {

    private ImageView ivBelle; // 美女图像控件

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        // 利用布局资源文件设置用户界面
        setContentView(R.layout.activity_main);

        // 通过资源标识符获取控件实例
        ivBelle = findViewById(R.id.ivBelle);
    }

    /**
     * 通过Java代码实现透明度动画
     *
     * @param view
     */
    public void doAnimationByCode(View view) {
        // 创建透明度动画对象, 从不透明到透明
        Animation animation = new AlphaAnimation(1, 0);
        // 设置动画持续时间
        animation.setDuration(3000);
        // 设置动画重复模式（RESTART - 重启；REVERSE - 反向）
        animation.setRepeatMode(AlphaAnimation.REVERSE);
        // 设置动画重复次数
        animation.setRepeatCount(1);
        // 启动图像控件的透明度动画
        ivBelle.startAnimation(animation);
    }

    /**
     * 通过XML配置实现透明度动画
     *
     * @param view
     */
    public void doAnimationByXML(View view) {
        // 启动图像控件的透明度动画
        ivBelle.startAnimation(AnimationUtils.loadAnimation(this, R.anim.alpha_animator));
    }
}

（7）运行效果

在这里插入图片描述
点击另一个按钮所实现的效果是一样的。

3.案例演示-缩放动画

（1）新建项目

在这里插入图片描述
在这里插入图片描述

（2）添加图片素材

在这里插入图片描述

（3）activity_main.xml

在这里插入图片描述

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

    <ImageView
        android:id="@+id/ivBelle"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_marginBottom="20dp"
        android:layout_weight="7"
        android:src="@drawable/belle" />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:gravity="center"
        android:orientation="horizontal">

        <Button
            android:id="@+id/btnAnimationByCode"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:onClick="doAnimationByCode"
            android:text="@string/animation_by_code" />

        <Button
            android:id="@+id/btnAnimationByXML"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:onClick="doAnimationByXML"
            android:text="@string/animation_by_xml" />
    </LinearLayout>
</LinearLayout>

（4）创建缩放动画配置文件

在这里插入图片描述

<?xml version="1.0" encoding="utf-8"?>
<scale xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="3000"
    android:fromXScale="1"
    android:fromYScale="1"
    android:pivotX="50%"
    android:pivotY="50%"
    android:repeatCount="1"
    android:repeatMode="reverse"
    android:toXScale="0"
    android:toYScale="0" />

（5）strings.xml

在这里插入图片描述

<resources>
    <string name="app_name">补间动画 - 缩放动画</string>
    <string name="animation_by_code">通过Java代码实现动画</string>
    <string name="animation_by_xml">通过xml配置实现动画</string>
</resources>

（6） MainActivity

在这里插入图片描述

package net.nell.scaleanimation;

import android.os.Bundle;
import android.view.View;
import android.view.animation.AlphaAnimation;
import android.view.animation.Animation;
import android.view.animation.AnimationUtils;
import android.view.animation.ScaleAnimation;
import android.widget.ImageView;

import androidx.appcompat.app.AppCompatActivity;

public class MainActivity extends AppCompatActivity {

    private ImageView ivBelle; // 美女图像控件

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        // 利用布局资源文件设置用户界面
        setContentView(R.layout.activity_main);

        // 通过资源标识符获取控件实例
        ivBelle = findViewById(R.id.ivBelle);
    }

    /**
     * 通过Java代码实现缩放动画
     *
     * @param view
     */
    public void doAnimationByCode(View view) {
        // 创建缩放动画对象，从原尺寸到零尺寸
        Animation animation = new ScaleAnimation(1, 0, 1, 0,
                ScaleAnimation.RELATIVE_TO_SELF, 0.5f, ScaleAnimation.RELATIVE_TO_SELF, 0.5f);
        // 设置动画持续时间
        animation.setDuration(3000);
        // 设置动画重复模式（RESTART - 重启；REVERSE - 反向）
        animation.setRepeatMode(AlphaAnimation.REVERSE);
        // 设置动画重复次数
        animation.setRepeatCount(1);
        // 启动图像控件的缩放动画
        ivBelle.startAnimation(animation);
    }

    /**
     * 通过XML配置文件实现缩放动画
     *
     * @param view
     */
    public void doAnimationByXML(View view) {
        // 启动图像控件的缩放动画
        ivBelle.startAnimation(AnimationUtils.loadAnimation(this, R.anim.scale_animator));
    }
}

（7）运行效果

在这里插入图片描述

4.案例演示-平移动画

（1）新建项目

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

（2）添加图片素材

在这里插入图片描述

（3）activity_main.xml

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

    <ImageView
        android:id="@+id/ivBelle"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_marginBottom="20dp"
        android:layout_weight="7"
        android:src="@drawable/belle" />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:gravity="center"
        android:orientation="horizontal">

        <Button
            android:id="@+id/btnAnimationByCode"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:onClick="doAnimationByCode"
            android:text="@string/animation_by_code" />

        <Button
            android:id="@+id/btnAnimationByXML"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:onClick="doAnimationByXML"
            android:text="@string/animation_by_xml" />
    </LinearLayout>
</LinearLayout>

（4）创建平移动画配置文件

在这里插入图片描述

<?xml version="1.0" encoding="utf-8"?>
<translate xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="3000"
    android:fromXDelta="-100%"
    android:fromYDelta="0%"
    android:repeatCount="1"
    android:repeatMode="reverse"
    android:toXDelta="100%"
    android:toYDelta="0%" />

（5）strings.xml

<resources>
    <string name="app_name">补间动画 - 平移动画</string>
    <string name="animation_by_code">通过Java代码实现动画</string>
    <string name="animation_by_xml">通过xml配置实现动画</string>
</resources>

（6）MainActivity

package net.nell.translateanimation;

import android.os.Bundle;
import android.view.View;
import android.view.animation.Animation;
import android.view.animation.AnimationUtils;
import android.view.animation.TranslateAnimation;
import android.widget.ImageView;

import androidx.appcompat.app.AppCompatActivity;

public class MainActivity extends AppCompatActivity {

    private ImageView ivBelle; // 美女图像控件

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        // 利用布局资源文件设置用户界面
        setContentView(R.layout.activity_main);

        // 通过资源标识符获取控件实例
        ivBelle = findViewById(R.id.ivBelle);
    }

    /**
     * 通过Java代码实现平移动画
     *
     * @param view
     */
    public void doAnimationByCode(View view) {
        // 创建平移动画对象，设置平移起点与终点
        Animation animation = new TranslateAnimation(-730.0f, 730.0f, 0.0f, 0.0f);
        // 设置动画持续时间
        animation.setDuration(3000);
        // 设置动画重复模式（RESTART 重启；REVERSE 反向）
        animation.setRepeatMode(TranslateAnimation.REVERSE);
        // 设置动画重复次数
        animation.setRepeatCount(1);
        // 启动图像控件的平移动画
        ivBelle.startAnimation(animation);
    }

    /**
     * 通过XML配置文件实现平移动画
     *
     * @param view
     */
    public void doAnimationByXML(View view) {
        // 启动图像控件的平移动画
        ivBelle.startAnimation(AnimationUtils.loadAnimation(this, R.anim.translate_animator));
    }
}

（7）运行效果

在这里插入图片描述

5.案例演示-旋转动画

（1）新建项目

在这里插入图片描述
在这里插入图片描述

（2）添加图片素材

在这里插入图片描述

（3）activity_main.xml

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

    <ImageView
        android:id="@+id/ivBelle"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_marginBottom="20dp"
        android:layout_weight="7"
        android:src="@drawable/belle" />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:gravity="center"
        android:orientation="horizontal">

        <Button
            android:id="@+id/btnAnimationByCode"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:onClick="doAnimationByCode"
            android:text="@string/animation_by_code" />

        <Button
            android:id="@+id/btnAnimationByXML"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:onClick="doAnimationByXML"
            android:text="@string/animation_by_xml" />
    </LinearLayout>
</LinearLayout>

（4）创建旋转动画配置文件

在这里插入图片描述

<?xml version="1.0" encoding="utf-8"?>
<rotate xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="3000"
    android:fromDegrees="-60"
    android:pivotX="50%"
    android:pivotY="0%"
    android:repeatCount="3"
    android:repeatMode="reverse"
    android:toDegrees="60" />

（5）strings.xml

<resources>
    <string name="app_name">补间动画 - 旋转动画</string>
    <string name="animation_by_code">通过Java代码实现动画</string>
    <string name="animation_by_xml">通过xml配置实现动画</string>
</resources>

（6）MainActivity

package net.nell.rotateanimation;

import android.os.Bundle;
import android.view.View;
import android.view.animation.Animation;
import android.view.animation.AnimationUtils;
import android.view.animation.RotateAnimation;
import android.view.animation.TranslateAnimation;
import android.widget.ImageView;

import androidx.appcompat.app.AppCompatActivity;

public class MainActivity extends AppCompatActivity {

    private ImageView ivBelle; // 美女图像控件

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        // 利用布局资源文件设置用户界面
        setContentView(R.layout.activity_main);

        // 通过资源标识符获取控件实例
        ivBelle = findViewById(R.id.ivBelle);
    }

    /**
     * 通过Java代码实现旋转动画
     *
     * @param view
     */
    public void doAnimationByCode(View view) {
        // 创建旋转动画对象，起始角，终止角度，以及基准点
        Animation animation = new RotateAnimation(-60, 60,
                RotateAnimation.RELATIVE_TO_SELF, 0.5f, RotateAnimation.RELATIVE_TO_SELF, 0);
        // 设置动画持续时间
        animation.setDuration(3000);
        // 设置动画重复模式（RESTART 重启；REVERSE 反向）
        animation.setRepeatMode(TranslateAnimation.REVERSE);
        // 设置动画重复次数
        animation.setRepeatCount(3);
        // 启动图像控件的旋转动画
        ivBelle.startAnimation(animation);
    }

    /**
     * 通过XML配置文件实现旋转动画
     *
     * @param view
     */
    public void doAnimationByXML(View view) {
        // 启动图像控件的旋转动画
        ivBelle.startAnimation(AnimationUtils.loadAnimation(this, R.anim.rotate_animator));
    }
}

（7）运行效果

在这里插入图片描述
这个运行效果是可以停止的，不过由于我只能上传5M以内的，所以只是简单的录制了一下。

NELL_TURBO
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值