制作简单有好玩的补间动画

补间动画通过对View进行一系列的图形变化实现动画效果,包括透明度变化、平移、缩放、旋转。补间动画的效果常用通过XML文件定义,当然代码也是可以的

首先在res下创建anim文件用于存放动画 文件

接下来就是在xml文件中定义各种动画

透明度渐变:

<set xmlns:android="http://schemas.android.com/apk/res/android">
<alpha
    android:duration="1000"
    android:interpolator="@android:anim/linear_interpolator"
    android:repeatCount="infinite"
    android:repeatMode="reverse"
    android:fromAlpha="1.0"
    android:toAlpha="0.0">

</alpha>
</set>

属性详解:
android:interpolator:控制动画变化速度,可设置的值有@android:anim/linear_interpolator(匀速)、@android:anim/acceler_interpolator(先慢,后加速)等
android:duration:动画播放时长
android:repeatCount:动画重复次数,infinite为无限循环
android:repeatMode:动画重复的方式。reverse反向、restart重新开始
android:fromAlpha:view在动画开始时的透明度,0.0全透明,1.0不透明
android:toAlpha:view在动画结束时的透明度,0.0全透明,1.0不透明
上述属性中 android:interpolator、android:duration、android:repeatCount、android:repeatMode在其他补间动画中也可使用

旋转:

<set xmlns:android="http://schemas.android.com/apk/res/android">
<rotate
 	android:pivotX="50%"
    android:pivotY="50%"
    android:fromDegrees="0"
    android:toDegrees="360"
    android:duration="5000"
    android:repeatCount="infinite"
    android:repeatMode="reverse"/>
</set>

属性详解:
android:fromDegrees:view在动画开始时的角度
android:toDegrees:view在动画结束时的角度
android:pivotX:旋转点X坐标
android:pivotY:旋转点Y坐标
android:pivotX和android:pivotY属性可以为整数、百分数(小数)、百分数p。例:50、50%、50%p,分别表示当前view左上角的X坐标加50px作为旋转点坐标;当前view左上角的X坐标加自己View宽度的50%作为旋转点坐标、当前view左上角的X坐标加父控件宽度50%作为旋转点坐标

缩放:

<set xmlns:android="http://schemas.android.com/apk/res/android">
<scale
android:pivotX="50%"
android:pivotY="50%"
android:fromXScale="1.0"
android:toXScale="0.5"
android:fromYScale="1.0"
android:toYScale="0.5"
android:duration="1000"
android:repeatCount="infinite"
android:repeatMode="reverse"/>
</set>

属性详解:
android:pivotX:缩放点的X坐标
android:pivotY:缩放点的Y坐标
android:fromXScale:view动画开始时X轴缩放系数,1.0表示不变化
android:toXScale:view动画结束时X轴缩放系数,1.0表示不变化
android:fromYScale:view动画开始时Y轴缩放系数,1.0表示不变化
android:toYScale:view动画结束时Y轴缩放系数,1.0表示不变化

平移:

<set xmlns:android="http://schemas.android.com/apk/res/android">
<translate 
android:fromYDelta="0"
android:fromXDelta="0"
android:toYDelta="100"
android:toXDelta="100"
android:repeatCount="infinite"
android:repeatMode="reverse"
android:duration="1000"/>
</set>

属性详解:
android:fromYDelta:view动画开始时Y坐标
android:fromXDelta:view动画开始时X坐标
android:toYDelta:view动画结束时Y坐标
android:toXDelta:view动画结束时X坐标

在主界面布局放置图片和4个按钮,点击按钮开始动画

<RelativeLayout 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"
tools:context=".MainActivity">
 <ImageView
  android:id="@+id/iv"
  android:layout_width="120dp"
  android:layout_height="100dp"
  android:src="@drawable/music"
  android:layout_centerHorizontal="true"/>
<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_below="@+id/iv">
    <Button
        android:id="@+id/appha"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:text="透明度变化"/>
    <Button
        android:id="@+id/rotate"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:text="旋转"/>
    <Button
        android:id="@+id/scale"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:text="缩放"/>
    <Button
        android:id="@+id/translate"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:text="平移"/>

</LinearLayout>

</RelativeLayout>

界面交互代码:

package com.fangkuai.animation;

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.Button;
import android.widget.ImageView;

import androidx.appcompat.app.AppCompatActivity;

public class MainActivity extends AppCompatActivity implements
 View.OnClickListener 		{

private Button appha;
private Button rotate;
private Button scale;
private Button translate;
private ImageView iv;

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

private void initView() {
    appha = (Button) findViewById(R.id.appha);
    rotate = (Button) findViewById(R.id.rotate);
    scale = (Button) findViewById(R.id.scale);
    translate = (Button) findViewById(R.id.translate);
    iv = (ImageView) findViewById(R.id.iv);

    appha.setOnClickListener(this);
    rotate.setOnClickListener(this);
    scale.setOnClickListener(this);
    translate.setOnClickListener(this);


}

@Override
public void onClick(View v) {
    switch (v.getId()) {
        case R.id.appha:
            Animation animation1 = AnimationUtils.loadAnimation(MainActivity.this, R.anim.alpha_animation);
            iv.startAnimation(animation1);
            break;
        case R.id.rotate:
            Animation animation2 = AnimationUtils.loadAnimation(MainActivity.this, R.anim.rotate_animation);
            iv.startAnimation(animation2);
            break;
        case R.id.scale:
            Animation animation3 = AnimationUtils.loadAnimation(MainActivity.this, R.anim.scale_animation);
            iv.startAnimation(animation3);
            break;
        case R.id.translate:
            Animation animation4 = AnimationUtils.loadAnimation(MainActivity.this, R.anim.translate_animation);
            iv.startAnimation(animation4);
            break;
    }
}
}
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
经导师精心指导并认可、获 98 分的毕业设计项目!【项目资源】:微信小程序。【项目说明】:聚焦计算机相关专业毕设及实战操练,可作课程设计与期末大作业,含全部源码,能直用于毕设,经严格调试,运行有保障!【项目服务】:有任何使用上的问题,欢迎随时与博主沟通,博主会及时解答。 经导师精心指导并认可、获 98 分的毕业设计项目!【项目资源】:微信小程序。【项目说明】:聚焦计算机相关专业毕设及实战操练,可作课程设计与期末大作业,含全部源码,能直用于毕设,经严格调试,运行有保障!【项目服务】:有任何使用上的问题,欢迎随时与博主沟通,博主会及时解答。 经导师精心指导并认可、获 98 分的毕业设计项目!【项目资源】:微信小程序。【项目说明】:聚焦计算机相关专业毕设及实战操练,可作课程设计与期末大作业,含全部源码,能直用于毕设,经严格调试,运行有保障!【项目服务】:有任何使用上的问题,欢迎随时与博主沟通,博主会及时解答。 经导师精心指导并认可、获 98 分的毕业设计项目!【项目资源】:微信小程序。【项目说明】:聚焦计算机相关专业毕设及实战操练,可作课程设计与期末大作业,含全部源码,能直用于毕设,经严格调试,运行有保障!【项目服务】:有任何使用上的问题,欢迎随时与博主沟通,博主会及时解答。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值