需要图片集和源码请点赞关注收藏后评论区留言~~~
一、补间动画的种类
Android提供了补间动画，它允许开发者实现某个视图的动态变换，具体包括四种动画效果，分别是灰度动画，平移动画，缩放动画和旋转动画。因为开发者提供动画的起始状态值与终止状态值，然后系统按照时间推移计算中间的状态值，并自动把中间状态的视图补充到起止视图的变化过程中，自动补充中间视图的动画就被简称为补间动画
四种补间动画有不同的初始化方式 具体说明如下
1：灰度动画 在构造方法中指定视图透明度的前后数值
2：平移动画 指定平移前后左上角的坐标值
3：缩放动画 指定视图的前后缩放比例
4：旋转动画 指定视图的旋转角度
可在下拉框中选择不同的动画效果 演示视频已上传至我的主页 有需要可自行观看
代码如下
Java类
package com.example.animation; import android.os.Bundle; import androidx.appcompat.app.AppCompatActivity; import android.view.View; import android.view.animation.AlphaAnimation; import android.view.animation.Animation; import android.view.animation.Animation.AnimationListener; import android.view.animation.RotateAnimation; import android.view.animation.ScaleAnimation; import android.view.animation.TranslateAnimation; import android.widget.AdapterView; import android.widget.ArrayAdapter; import android.widget.ImageView; import android.widget.Spinner; import android.widget.AdapterView.OnItemSelectedListener; import com.example.animation.util.Utils; public class TweenAnimActivity extends AppCompatActivity implements AnimationListener { private ImageView iv_tween_anim; // 声明一个图像视图对象 private Animation alphaAnim, translateAnim, scaleAnim, rotateAnim; // 声明四个补间动画对象 @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_tween_anim); iv_tween_anim = findViewById(R.id.iv_tween_anim); initTweenAnim(); // 初始化补间动画 initTweenSpinner(); // 初始化动画类型下拉框 } // 初始化补间动画 private void initTweenAnim() { // 创建一个灰度动画。从完全透明变为即将不透明 alphaAnim = new AlphaAnimation(1.0f, 0.1f); alphaAnim.setDuration(3000); // 设置动画的播放时长 alphaAnim.setFillAfter(true); // 设置维持结束画面 // 创建一个平移动画。向左平移100dp translateAnim = new TranslateAnimation(1.0f, Utils.dip2px(this, -100), 1.0f, 1.0f); translateAnim.setDuration(3000); // 设置动画的播放时长 translateAnim.setFillAfter(true); // 设置维持结束画面 // 创建一个缩放动画。宽度不变，高度变为原来的二分之一 scaleAnim = new ScaleAnimation(1.0f, 1.0f, 1.0f, 0.5f); scaleAnim.setDuration(3000); // 设置动画的播放时长 scaleAnim.setFillAfter(true); // 设置维持结束画面 // 创建一个旋转动画。围绕着圆心顺时针旋转360度 rotateAnim = new RotateAnimation(0f, 360f, Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f); rotateAnim.setDuration(3000); // 设置动画的播放时长 rotateAnim.setFillAfter(true); // 设置维持结束画面 } // 初始化动画类型下拉框 private void initTweenSpinner() { ArrayAdapter<String> tweenAdapter = new ArrayAdapter<>(this, R.layout.item_select, tweenArray); Spinner sp_tween = findViewById(R.id.sp_tween); sp_tween.setPrompt("请选择补间动画类型"); sp_tween.setAdapter(tweenAdapter); sp_tween.setOnItemSelectedListener(new TweenSelectedListener()); sp_tween.setSelection(0); } private String[] tweenArray = {"灰度动画", "平移动画", "缩放动画", "旋转动画"}; class TweenSelectedListener implements OnItemSelectedListener { public void onItemSelected(AdapterView<?> arg0, View arg1, int arg2, long arg3) { playTweenAnim(arg2); // 播放指定类型的补间动画 } public void onNothingSelected(AdapterView<?> arg0) {} } // 播放指定类型的补间动画 private void playTweenAnim(int type) { if (type == 0) { // 灰度动画 iv_tween_anim.startAnimation(alphaAnim); // 开始播放灰度动画 // 给灰度动画设置动画事件监听器 alphaAnim.setAnimationListener(TweenAnimActivity.this); } else if (type == 1) { // 平移动画 iv_tween_anim.startAnimation(translateAnim); // 开始播放平移动画 // 给平移动画设置动画事件监听器 translateAnim.setAnimationListener(TweenAnimActivity.this); } else if (type == 2) { // 缩放动画 iv_tween_anim.startAnimation(scaleAnim); // 开始播放缩放动画 // 给缩放动画设置动画事件监听器 scaleAnim.setAnimationListener(TweenAnimActivity.this); } else if (type == 3) { // 旋转动画 iv_tween_anim.startAnimation(rotateAnim); // 开始播放旋转动画 // 给旋转动画设置动画事件监听器 rotateAnim.setAnimationListener(TweenAnimActivity.this); } } // 在补间动画开始播放时触发 @Override public void onAnimationStart(Animation animation) {} // 在补间动画结束播放时触发 @Override public void onAnimationEnd(Animation animation) { if (animation.equals(alphaAnim)) { // 灰度动画 // 创建一个灰度动画。从即将不透明变为完全透明 Animation alphaAnim2 = new AlphaAnimation(0.1f, 1.0f); alphaAnim2.setDuration(3000); // 设置动画的播放时长 alphaAnim2.setFillAfter(true); // 设置维持结束画面 iv_tween_anim.startAnimation(alphaAnim2); // 开始播放灰度动画 } else if (animation.equals(translateAnim)) { // 平移动画 // 创建一个平移动画。向右平移100dp Animation translateAnim2 = new TranslateAnimation(Utils.dip2px(this, -100), 1.0f, 1.0f, 1.0f); translateAnim2.setDuration(3000); // 设置动画的播放时长 translateAnim2.setFillAfter(true); // 设置维持结束画面 iv_tween_anim.startAnimation(translateAnim2); // 开始播放平移动画 } else if (animation.equals(scaleAnim)) { // 缩放动画 // 创建一个缩放动画。宽度不变，高度变为原来的两倍 Animation scaleAnim2 = new ScaleAnimation(1.0f, 1.0f, 0.5f, 1.0f); scaleAnim2.setDuration(3000); // 设置动画的播放时长 scaleAnim2.setFillAfter(true); // 设置维持结束画面 iv_tween_anim.startAnimation(scaleAnim2); // 开始播放缩放动画 } else if (animation.equals(rotateAnim)) { // 旋转动画 // 创建一个旋转动画。围绕着圆心逆时针旋转360度 Animation rotateAnim2 = new RotateAnimation(0f, -360f, Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f); rotateAnim2.setDuration(3000); // 设置动画的播放时长 rotateAnim2.setFillAfter(true); // 设置维持结束画面 iv_tween_anim.startAnimation(rotateAnim2); // 开始播放旋转动画 } } // 在补间动画重复播放时触发 @Override public void onAnimationRepeat(Animation animation) {} }
XML文件
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical"> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="horizontal"> <TextView android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="1" android:gravity="right" android:text="补间动画类型：" android:textColor="@color/black" android:textSize="17sp" /> <Spinner android:id="@+id/sp_tween" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="1" android:spinnerMode="dialog" /> </LinearLayout> <ImageView android:id="@+id/iv_tween_anim" android:layout_width="match_parent" android:layout_height="300dp" android:src="@drawable/oval" /> </LinearLayout>
二、补间动画的原理以及钟摆的实现
补间动画只提供了基本的动态变换，如果想要复杂的动画效果，比如像钟摆一样左摆一下右摆一下，就要对它进行改造 钟摆的操作主要由以下三段动作组成
1：以上面端点为圆心 转到左边某个角度停住
2：从左边向右边旋转 转到右边某个角度停住
3：从右再向左转 完成一个周期
效果如下 动画演示视频已上传至个人主页 有需要可自行前往观看
代码如下
Java类
package com.example.animation; import com.example.animation.widget.SwingAnimation; import android.os.Bundle; import androidx.appcompat.app.AppCompatActivity; import android.view.animation.Animation; import android.widget.ImageView; public class SwingAnimActivity extends AppCompatActivity { private ImageView iv_swing; // 声明一个图像视图对象 @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_swing_anim); iv_swing = findViewById(R.id.iv_swing); findViewById(R.id.ll_swing).setOnClickListener(v -> showSwingAnimation()); showSwingAnimation(); // 开始播放摇摆动画 } // 开始播放摇摆动画 private void showSwingAnimation() { // 创建一个摇摆动画 // 参数取值说明：中间度数、摆到左侧的度数、摆到右侧的度数、圆心X坐标类型、圆心X坐标相对比例、圆心Y坐标类型、圆心Y坐标相对比例 // 坐标类型有三种：ABSOLUTE 绝对坐标，RELATIVE_TO_SELF 相对自身的坐标，RELATIVE_TO_PARENT 相对上级视图的坐标 // X坐标相对比例，为0时表示左边顶点，为1表示右边顶点，为0.5表示水平中心点 // Y坐标相对比例，为0时表示上边顶点，为1表示下边顶点，为0.5表示垂直中心点 SwingAnimation swingAnimation = new SwingAnimation( 0f, 60f, -60f, Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.0f); swingAnimation.setDuration(4000); // 设置动画的播放时长 swingAnimation.setRepeatCount(0); // 设置动画的重播次数 swingAnimation.setFillAfter(false); // 设置维持结束画面 swingAnimation.setStartOffset(500); // 设置动画的启动延迟 iv_swing.startAnimation(swingAnimation); // 开始播放摇摆动画 } }
XML文件
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/ll_swing" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical"> <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/clock_top" /> <RelativeLayout android:layout_width="wrap_content" android:layout_height="wrap_content"> <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerInParent="true" android:src="@drawable/clock_bg" /> <ImageView android:id="@+id/iv_swing" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerInParent="true" android:src="@drawable/clock_bottom" /> </RelativeLayout> </LinearLayout>
创作不易 觉得有帮助请点赞关注收藏~~~
