Android动画(帧动画、补间动画、属性动画)讲解
首先我们来看看啥是帧动画、补间动画、属性动画。
介绍:
帧动画:是一种常见的动画形式(Frame By Frame),其原理是在“连续的关键帧”中分解动画动作,也就是在时间轴的每帧上逐帧绘制不同的内容,使其连续播放而成动画。
补间动画:指的是做FLASH动画时,在两个关键帧中间需要做“补间动画”,才能实现图画的运动;
属性动画:帧动画与补间动画实现了对View进行移动、缩放、旋转和淡入淡出的效果。但对于android开发师来说是不够的,同时移动、缩放、旋转和淡入淡出的效果也不再只是一种视觉上的动画效果了。所以从Android 3.0版本开始,系统给我们提供了一种全新的动画模式,属性动画(property animation)。
所以今天我们来看看,这些动画是怎样实现的。
帧动画(我们先来看看效果)
首先我们创建我们要的素材,把他们导入到drawable文件夹下,如图。
然后在drawable文件新建from.xml文件,写入代码,这里的作用可以理解为,我们把图片
放到一个集合里面去了,要用的时候我们直接调用from。
然后在activity_main.xml文件里写入
<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/tl" android:layout_width="match_parent" android:layout_height="match_parent" android:background="@drawable/from"> </RelativeLayout> 然后在MainActivity.java文件写入代码 package com.example.a2022324; import androidx.appcompat.app.AppCompatActivity; import android.graphics.drawable.AnimationDrawable; import android.graphics.drawable.Drawable; import android.os.Bundle; import android.view.View; import android.widget.RelativeLayout; public class MainActivity extends AppCompatActivity { private boolean flag; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); RelativeLayout relativelayout = findViewById(R.id.tl); //获取activity——main的RelativeLayout 的id AnimationDrawable anim = (AnimationDrawable) relativelayout.getBackground(); // anim作用获取背景,这里我们的被禁就是我们设置的图片集合(from) relativelayout.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View view) { if(flag){//用开关来实现点击动与不动的效果 anim.start(); flag = false; }else{ anim.stop(); flag = true; } } }); } }
我们点击运行完成了效果。
补间动画
alpha:图片渐渐地显示,渐渐地消失的效果。
rotat:图片的以某一点为中心,旋转xx度
scale:图片的放大与缩小
translate:图片的平移
然后我们来看看补间动画,首先来看看效果。
我们在res文件先创建amin目录在分别创建alpha、rotate、scale、tranlslate.xml文件。
先看看alpha.xml和activity.xml文件
<?xml version="1.0" encoding="utf-8"?> <set xmlns:android="http://schemas.android.com/apk/res/android"> <alpha android:duration="2000" android:fromAlpha="0" android:toAlpha="1" /> </set> <?xml version="1.0" encoding="utf-8"?> <RelativeLayout 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:ignore="MissingClass"> <ImageView android:id="@+id/iv" android:src="@drawable/background" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerInParent="true"//说明一下,第一个属性,只要你容器是RelativeLayout的时候才有。此时设置为RelativeLayout里的子控件属性为android:layout_centerInParent=”true“,就是水平垂直都居中。 android:adjustViewBounds="true"//调整ImageView的边界,使得ImageView和图片有一样的长宽比例。 android:maxHeight="300dp" android:maxWidth="300dp"/> </RelativeLayout>
android:adjustViewBounds的用法这里可以看看这位小哥哥的[我是连接]
再看看MainActivity.java文件,这里我把其他功能也加了上去,避免代码冗余,不过注释掉了,不会影响结果。
package com.example.a2022324; import androidx.appcompat.app.AppCompatActivity; import android.graphics.drawable.AnimationDrawable; import android.graphics.drawable.Drawable; import android.os.Bundle; import android.view.View; import android.view.animation.Animation; import android.view.animation.AnimationUtils; import android.widget.ImageView; import android.widget.RelativeLayout; public class MainActivity extends AppCompatActivity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); ImageView imageview = findViewById(R.id.iv);//获取id值 imageview.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View view) {//通过animation来加载alpha文件,下面的原理同理 Animation animation = AnimationUtils.loadAnimation(MainActivity.this, R.anim.alpha); // Animation animation = AnimationUtils.loadAnimation(MainActivity.this, // R.anim.rotate); // Animation animation = AnimationUtils.loadAnimation(MainActivity.this, // R.anim.scale); // Animation animation = AnimationUtils.loadAnimation(MainActivity.this, // R.anim.translate); imageview.startAnimation(animation); } }); } }
属性动画
我们先来看看效果。
这里我们可以看出,文字渐隐出现,我们直接看代码
activity_main
<?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:ignore="MissingClass"> <TextView android:id="@+id/tv" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="快看我,我要变化了" android:textSize="20sp" app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintRight_toRightOf="parent" app:layout_constraintTop_toTopOf="parent" app:layout_constraintBottom_toBottomOf="parent"/> </androidx.constraintlayout.widget.ConstraintLayout>
这里我们用到了==androidx.constraintlayout.widget.ConstraintLayout==这一坨玩意,
如果你的包红了,那是因为没用引入库。在app->的build.gradle文件的dependencies写入==implementation 'androidx.constraintlayout:constraintlayout:1.1.3'==这一坨玩意。如图。
我们再来看看,mainactivity代码:
package com.example.a2022324; import androidx.appcompat.app.AppCompatActivity; import android.animation.ObjectAnimator; import android.animation.ValueAnimator; import android.graphics.drawable.AnimationDrawable; import android.graphics.drawable.Drawable; import android.os.Bundle; import android.view.View; import android.view.animation.Animation; import android.view.animation.AnimationUtils; import android.widget.ImageView; import android.widget.RelativeLayout; import android.widget.TextView; public class MainActivity extends AppCompatActivity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); ValueAnimator valueAnimator = ValueAnimator.ofFloat(0f, 1f);//改变float的值,0f是透明的,1f是不透明的 // ValueAnimator.ofArgb() valueAnimator.setDuration(2000); valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() { @Override public void onAnimationUpdate(ValueAnimator valueAnimator) { float value = (float) valueAnimator.getAnimatedValue(); } }); valueAnimator.start(); TextView textView = findViewById(R.id.tv); ObjectAnimator objectAnimator = ObjectAnimator.ofFloat(textView, "alpha", 0f, 1f);//objectAnimator 作用是 让我们的textView的透明度从0f到1f objectAnimator.setDuration(4000);//从0f到1f要4秒 objectAnimator.start();//启动 } }
ValueAnimator的用法可以看看这位大佬的用法[我是连接]