UI开发
目录
3.2.3.1 具体解释(例如各方法的属性值,方法构造的参数值)
3 动画
这期效果有点难展示,效果图需要搞成gif图才能直观反映,展示直接运行算了
3.1 帧动画
准备帧动画资源:在res
目录下的drawable的文件夹中,将帧动画的每一帧以递增的命名方式放入文件夹中。确保所有帧的命名规则保持一致。创建动画资源文件:创建一个XML文件作为动画资源文件。创建一个名为frame_animation.xml
的文件。在动画资源文件中定义帧动画:在frame_animation.xml
文件中使用animation-list
元素来定义帧动画序列。如下:
<?xml version="1.0" encoding="utf-8"?>
<animation-list xmlns:android="http://schemas.android.com/apk/res/android"
android:oneshot="false">
<item android:drawable="@drawable/img_1" android:duration="500"/>
<item android:drawable="@drawable/img_2" android:duration="500"/>
<item android:drawable="@drawable/img_3" android:duration="500"/>
<item android:drawable="@drawable/img_4" android:duration="500"/>
<item android:drawable="@drawable/img_5" android:duration="500"/>
<item android:drawable="@drawable/img_6" android:duration="500"/>
</animation-list>
android:drawable
属性指定了每一帧的图像资源,android:duration
属性指定了每一帧的持续时间(以毫秒为单位)。
在布局文件中添加控件:
<?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">
<!--一开始没动起来的图-->
<ImageView
android:id="@+id/img_show"
android:layout_width="300dp"
android:layout_height="300dp"
android:src="@drawable/img_1"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.498"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.336" />
<ImageView
android:id="@+id/img_waitToShow"
android:layout_width="300dp"
android:layout_height="300dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.498"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.336" />
<Button
android:id="@+id/btn_start"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="**,启动!"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.498"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/img_waitToShow"
app:layout_constraintVertical_bias="0.281" />
</androidx.constraintlayout.widget.ConstraintLayout>
在代码中加载并启动帧动画:在你的Java代码中,通过ImageView
的实例来加载并启动帧动画。例如:
package com.gxy.animator_test;
import androidx.appcompat.app.AppCompatActivity;
import android.graphics.drawable.AnimationDrawable;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.ImageView;
public class MainActivity extends AppCompatActivity {
private Button button;
private ImageView imageView,imageView2;
private int cnt = 1;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
imageView = findViewById(R.id.img_waitToShow);
imageView2 = findViewById(R.id.img_show);
button = findViewById(R.id.btn_start);
imageView.setBackgroundResource(R.drawable.frame_animation);
AnimationDrawable animationDrawable = (AnimationDrawable) imageView.getBackground();
button.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
if(cnt == 1){
animationDrawable.start();
imageView2.setVisibility(View.INVISIBLE);
//将最开始不动的图不可视
cnt--;
}else{
animationDrawable.stop();
cnt++;
}
}
});
}
}
我们使用setBackgroundResource()
方法将动画资源文件设置为ImageView
的背景。然后,通过将背景转换为AnimationDrawable
对象,并调用start()
方法来启动帧动画。点击相应的按钮时,就会显示帧动画
3.2 补间动画
3.2.1 分类
透明度动画(AlphaAnimation
)、缩放动画(ScaleAnimation
)、旋转动画(RotateAnimation
)、位移动画(TranslateAnimation
)
3.2.2 用xml实现补间动画
基本步骤:在anim
文件夹里面创建一个对应动画的xml
文件,然后在Java文件里面使用loadAnimation()
方法从XML文件加载动画
3.2.2.1 透明度动画
-
在
res
目录下的anim
文件夹中创建一个XML文件,用于定义透明度动画效果。创建一个名为fade_in.xml
的文件。 -
在XML文件中定义透明度动画效果。使用
alpha
标签来设置透明度的起始值、结束值和动画持续时间。以下是一个示例,展示了一个从完全透明到完全不透明的淡入效果:
<?xml version="1.0" encoding="utf-8"?>
<alpha xmlns:android="http://schemas.android.com/apk/res/android"
android:fromAlpha="0.0"
android:toAlpha="1.0"
android:duration="1000" />
在代码中加载并启动透明度动画。在你的Java代码中,通过加载XML文件来获取透明度动画对象,并将其应用到指定的视图上。:
//ImageView imageView = findViewById(R.id.imageView);
//Animation animation = AnimationUtils.loadAnimation(this, R.anim.fade);
//imageView.startAnimation(animation);
package com.gxy.animator_test;
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.ImageView;
public class alpha_test extends AppCompatActivity {
private ImageView imageView;
private Button btn1;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_alpha_test);
imageView = findViewById(R.id.img_1);
btn1 = findViewById(R.id.btn_1);
btn1.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
Animation animation = AnimationUtils.loadAnimation(alpha_test.this, R.anim.fade_in);
imageView.startAnimation(animation);
}
});
}
}
3.2.2.2 缩放动画
-
在
res
目录下的anim
文件夹中创建一个XML文件,名为scale_animation.xml。 -
在
scale_animation.xml
文件中定义缩放动画的属性和值。下面实现了一个从原始大小缩放到两倍大小的动画效果:
fromXScale
:动画开始时的X轴缩放比例。fromYScale
:动画开始时的Y轴缩放比例。toXScale
:动画结束时的X轴缩放比例。toYScale
:动画结束时的Y轴缩放比例。pivotX
:缩放的中心点X坐标,可以使用百分比或具体数值。pivotY
:缩放的中心点Y坐标,可以使用百分比或具体数值。duration
:动画持续时间,以毫秒为单位。fillAfter
:动画结束后是否保持最终状态。
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<scale
android:fromXScale="1.0"
android:fromYScale="1.0"
android:toXScale="2.0"
android:toYScale="2.0"
android:pivotX="50%"
android:pivotY="50%"
android:duration="1000"
android:fillAfter="true" />
</set>
在java
代码使用loadAnimation()
方法
btn2.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
Animation animation = AnimationUtils.loadAnimation(alpha_test.this, R.anim.scale_animation);
imageView.startAnimation(animation);
}
});
3.2.2.3 旋转动画
-
在
res
目录下的anim
文件夹中创建一个XML文件,rotate_animation.xml
。 -
在
rotate_animation.xml
文件中定义旋转动画的属性和值。下面实现了实现了一个沿着Z轴顺时针旋转360度的动画效果:
fromDegrees
:动画开始时的旋转角度。toDegrees
:动画结束时的旋转角度。pivotX
:旋转的中心点X坐标,可以使用百分比或具体数值。pivotY
:旋转的中心点Y坐标,可以使用百分比或具体数值。duration
:动画持续时间,以毫秒为单位。interpolator
:动画的插值器,用于控制动画的速度变化。在示例中,我们使用了默认的线性插值器。repeatCount
:动画重复的次数
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<rotate
android:fromDegrees="0"
android:toDegrees="360"
android:pivotX="50%"
android:pivotY="50%"
android:duration="1000"
android:interpolator="@android:anim/linear_interpolator"
android:repeatCount="infinite" />
</set>
在Java代码使用loadAnimation
类
btn3.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
Animation animation = AnimationUtils.loadAnimation(alpha_test.this,R.anim.rotate_animation);
imageView.startAnimation(animation);
}
});
3.2.2.4 平移动画
-
在
res
目录下的anim
文件夹中创建一个XML文件,例如translate_animation.xml
。 -
在
translate_animation.xml
文件中定义平移动画的属性和值。下面实现了一个沿着X轴正方向平移200个像素的动画效果:
fromXDelta
:动画开始时的X轴平移距离。toXDelta
:动画结束时的X轴平移距离。duration
:动画持续时间,以毫秒为单位。interpolator
:动画的插值器,用于控制动画的速度变化。在示例中,我们使用了默认的加速减速插值器。
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<translate
android:fromXDelta="0"
android:toXDelta="200"
android:duration="1000"
android:interpolator="@android:anim/accelerate_decelerate_interpolator" />
</set>
Java代码中使用AnimationUtils.loadAnimation()
方法加载并应用平移动画。
btn4.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
Animation animation = AnimationUtils.loadAnimation(alpha_test.this,R.anim.translate_animation);
imageView.startAnimation(animation);
}
});
综合上面几个:
xml文件:
<?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=".alpha_test">
<Button
android:id="@+id/btn_1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="透明度动画"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.034"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.083" />
<Button
android:id="@+id/btn_2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="缩放动画"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.043"
app:layout_constraintStart_toEndOf="@+id/btn_1"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.083" />
<Button
android:id="@+id/btn_3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="旋转动画"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.072"
app:layout_constraintStart_toEndOf="@+id/btn_2"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.083" />
<Button
android:id="@+id/btn_4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="位移动画"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.242"
app:layout_constraintStart_toEndOf="@+id/btn_3"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.083" />
<ImageView
android:id="@+id/img_1"
android:layout_width="200dp"
android:layout_height="200dp"
android:src="@drawable/img_1"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.498"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.694" />
</androidx.constraintlayout.widget.ConstraintLayout>
java代码:
package com.gxy.animator_test;
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.ImageView;
public class alpha_test extends AppCompatActivity {
private ImageView imageView;
private Button btn1,btn2,btn3,btn4;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_alpha_test);
imageView = findViewById(R.id.img_1);
btn1 = findViewById(R.id.btn_1);
btn2 = findViewById(R.id.btn_2);
btn3 = findViewById(R.id.btn_3);
btn4 = findViewById(R.id.btn_4);
btn1.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
Animation animation = AnimationUtils.loadAnimation(alpha_test.this, R.anim.fade_in);
imageView.startAnimation(animation);
}
});
btn2.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
Animation animation = AnimationUtils.loadAnimation(alpha_test.this,R.anim.scale_animation);
imageView.startAnimation(animation);
}
});
btn3.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
Animation animation = AnimationUtils.loadAnimation(alpha_test.this,R.anim.rotate_animation);
imageView.startAnimation(animation);
}
});
btn4.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
Animation animation = AnimationUtils.loadAnimation(alpha_test.this,R.anim.translate_animation);
imageView.startAnimation(animation);
}
});
}
}
3.2.3 在Java代码中实现补间动画
当在Java代码中实现四种动画时,可以使用AnimationSet
类结合AlphaAnimation
、ScaleAnimation
、RotateAnimation
和TranslateAnimation
来实现组合动画效果。
3.2.3.1 具体解释(例如各方法的属性值,方法构造的参数值)
(1)透明度动画 (AlphaAnimation):
AlphaAnimation(float fromAlpha, float toAlpha)
-
fromAlpha
: 动画开始时的透明度,取值范围为0.0到1.0,其中0.0表示完全透明,1.0表示完全不透明。 -
toAlpha
: 动画结束时的透明度,取值范围也为0.0到1.0。
(2)缩放动画 (ScaleAnimation):
ScaleAnimation(float fromX, float toX, float fromY, float toY)
设置动画的水平和垂直方向的缩放比例。fromX
和fromY
是起始缩放比例,toX
和toY
是结束缩放比例。例如,fromX = 1.0f, toX = 0.5f, fromY = 1.0f, toY = 0.5f
表示从原始大小缩放到水平方向缩小一半,垂直方向缩小一半
ScaleAnimation(float fromX, float toX, float fromY, float toY, int pivotXType, float pivotXValue, int pivotYType, float pivotYValue)
-
fromX
: 动画开始时水平方向的缩放比例,1.0为原大小。 -
toX
: 动画结束时水平方向的缩放比例。 -
fromY
: 动画开始时垂直方向的缩放比例,1.0表示原大小。 -
toY
: 动画结束时垂直方向的缩放比例。 -
pivotXType
: 定义pivotXValue
的类型,旋转中心点的X坐标类型,可以是以下三个常量之一:-
Animation.RELATIVE_TO_SELF
:表示相对于自身的比例值(0表示视图顶边缘,1表示视图底边缘)。 -
Animation.ABSOLUTE
:表示绝对坐标值。 -
Animation.RELATIVE_TO_PARENT
表示相对于父容器的比例值(0表示父容器顶边缘,1表示父容器底边缘)。
-
-
pivotXValue
: 旋转中心点的X坐标值,具体取值根据pivotXType
来确定:如果pivotXType
为Animation.RELATIVE_TO_SELF
,则pivotXValue
表示相对于视图宽度的比例值,例如,0.5表示视图的水平中心点。 -
pivotYType
: 定义pivotYValue
的类型,可选值为Animation.ABSOLUTE
、Animation.RELATIVE_TO_SELF
或Animation.RELATIVE_TO_PARENT
。 -
pivotYValue
: -
旋转中心点的Y坐标值,具体取值根据
pivotYType
来确定:-
如果
pivotYType
为Animation.RELATIVE_TO_SELF
,则pivotYValue
表示相对于视图高度的比例值,例如,0.5表示视图的垂直中心点。 -
如果
pivotYType
为Animation.ABSOLUTE
,则pivotYValue
表示绝对的Y坐标值。
-
(3)旋转动画 (RotateAnimation):
RotateAnimation(float fromDegrees, float toDegrees, int pivotXType, float pivotXValue, int pivotYType, float pivotYValue)
-
fromDegrees
:动画的起始旋转角度,单位为度(degrees)。 -
toDegrees
:动画的结束旋转角度,单位为度(degrees)。剩下同上一个动画解释
(4)平移动画 (TranslateAnimation):
TranslateAnimation(float fromXDelta, float toXDelta, float fromYDelta, float toYDelta)
-
fromXDelta
: 动画开始时X轴方向的平移距离,可以是正值表示向右平移,负值表示向左平移。 -
toXDelta
: 动画结束时X轴方向的平移距离,同样可以是正值或负值。 -
fromYDelta
: 动画开始时Y轴方向的平移距离,可以是正值表示向下平移,负值表示向上平移。 -
toYDelta
: 动画结束时Y轴方向的平移距离,同样可以是正值或负值。
通过理解这些构造参数的含义,你可以根据需要调整每个动画的效果,创建出适合你的动画效果。
推荐博客:(18条消息) 【Android】补间动画用法最全详解android 补间动画Teacher.Hu的博客-CSDN博客
package com.gxy.animator_test;
import android.os.Bundle;
import android.view.View;
import android.view.animation.AlphaAnimation;
import android.view.animation.Animation;
import android.view.animation.AnimationSet;
import android.view.animation.RotateAnimation;
import android.view.animation.ScaleAnimation;
import android.view.animation.TranslateAnimation;
import android.widget.Button;
import android.widget.ImageView;
import androidx.appcompat.app.AppCompatActivity;
import androidx.appcompat.widget.AppCompatImageView;
public class java_animation extends AppCompatActivity {
private ImageView imageView;
private Button btnStart;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_java_animation);
imageView = findViewById(R.id.img_ii);
btnStart = findViewById(R.id.btn_start);
btnStart.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
startAnimation();
}
});
}
private void startAnimation() {
// 创建动画集合
AnimationSet animationSet = new AnimationSet(true);
// 创建透明度动画
Animation alphaAnimation = new AlphaAnimation(1.0f, 0.0f);
alphaAnimation.setDuration(1000);
alphaAnimation.setFillAfter(true);
// 创建缩放动画
Animation scaleAnimation = new ScaleAnimation(1.0f, 0.5f, 1.0f, 0.5f,
Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f);
scaleAnimation.setDuration(1000);
scaleAnimation.setFillAfter(true);
// 创建旋转动画
Animation rotateAnimation = new RotateAnimation(0, 180,
Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f);
rotateAnimation.setDuration(1000);
rotateAnimation.setFillAfter(true);
// 创建平移动画
Animation translateAnimation = new TranslateAnimation(0, 200, 0, 200);
translateAnimation.setDuration(1000);
translateAnimation.setFillAfter(true);
// 将四种动画添加到动画集合中
animationSet.addAnimation(alphaAnimation);
animationSet.addAnimation(scaleAnimation);
animationSet.addAnimation(rotateAnimation);
animationSet.addAnimation(translateAnimation);
// 启动动画集合
imageView.startAnimation(animationSet);
}
}
上述代码创建了一个包含透明度、缩放、旋转和平移动画的动画集合AnimationSet
。每个动画都有自己的设置,如起始值、结束值、持续时间和是否保持最后状态。然后,我们将这四种动画添加到动画集合中,并通过调用startAnimation()
方法启动动画集合,将组合动画效果应用到imageView
上。
3.3 属性动画
搁置一下下。。。。
学习:Android-Animation-Set/property-animation at master · OCNYang/Android-Animation-Set · GitHub
1 属性动画是Android中一种强大的动画机制,用于实现对任意对象的属性进行动画效果的修改。与传统的补间动画相比,属性动画可以对任意对象的属性进行动画操作,而不仅限于View对象。
2 属性动画使用ValueAnimator
、ObjectAnimator
等类来创建和管理动画,并通过AnimatorSet
来组合多个动画一起播放。以下是属性动画的几个关键类:
-
ValueAnimator
:用于在一定时间范围内对属性值进行平滑的动画过渡。 -
ObjectAnimator
:是ValueAnimator
的子类,用于对一个对象的指定属性进行动画效果的修改。 -
AnimatorSet
:用于组合多个动画一起播放,并可以设置动画的播放顺序(顺序播放、同时播放、先后播放等)。
3 属性动画的使用步骤:
-
创建
ValueAnimator
或ObjectAnimator
对象:根据需求创建对应的动画对象,指定目标对象、属性、起始值和结束值等参数。 -
设置动画的监听器(可选):通过设置动画的监听器来监听动画的状态变化,例如动画开始、结束、重复等。
-
启动动画:调用动画对象的
start()
方法启动动画,动画系统会自动计算属性值的变化,并在动画时间内平滑地将属性值过渡到目标值,实现动画效果。
后面继续学习其他的动画,具体会参照这个学习GitHub - OCNYang/Android-Animation-Set: 📚 Android 所有动画系列详尽教程。 Explain all animations in Android.