Android 动画与实战

﹏ヽ暗。殇╰゛Y 2023-02-11 07:11 6阅读 0赞

## 动画与实战 ##

参考链接：https://www.runoob.com/w3cnote/android-tutorial-animation.html

**1.帧动画概念以及用法**

帧动画非常容易理解，其实就是简单的由N张静态图片收集起来，然后我们通过控制依次显示 这些图片，因为人眼"视觉残留"的原因，会让我们造成动画的"错觉"，跟放电影的原理一样！

而Android中实现帧动画，一般我们会用到前面讲解到的一个Drawable：AnimationDrawable 先编写好Drawable，然后代码中调用start()以及stop()开始或停止播放动画~

当然我们也可以在Java代码中创建逐帧动画，创建AnimationDrawable对象，然后调用 addFrame(Drawable frame,int duration)向动画中添加帧，接着调用start()和stop()而已

**2、补间动画**

补间动画(Tween)，和前面学的帧动画不同，帧动画 是通过连续播放图片来模拟动画效果，而补间动画开发者只需指定动画开始，以及动画结束"关键帧"， 而动画变化的"中间帧"则由系统计算并补齐！

<table> 
 <thead> 
  <tr> 
   <th>动画</th> 
   <th>效果</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>AlphaAnimation：</td> 
   <td>透明度渐变效果，创建时许指定开始以及结束透明度，还有动画的持续 时间，透明度的变化范围(0,1)，0是完全透明，1是完全不透明；对应标签！</td> 
  </tr> 
  <tr> 
   <td>ScaleAnimation：</td> 
   <td>缩放渐变效果，创建时需指定开始以及结束的缩放比，以及缩放参考点， 还有动画的持续时间；对应标签！</td> 
  </tr> 
  <tr> 
   <td>TranslateAnimation：</td> 
   <td>位移渐变效果，创建时指定起始以及结束位置，并指定动画的持续 时间即可；对应标签！</td> 
  </tr> 
  <tr> 
   <td>}RotateAnimation：</td> 
   <td>旋转渐变效果，创建时指定动画起始以及结束的旋转角度，以及动画 持续时间和旋转的轴心；对应标签</td> 
  </tr> 
 </tbody> 
</table>

**3、补间动画实战**

activity\_main.xml

<?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" android:layout_marginBottom="5dp" tools:context=".MainActivity">
    
        <ImageView android:layout_width="100dp" android:layout_height="100dp" android:src="@drawable/tt" android:layout_centerInParent="true" android:id="@+id/iv_bean"/>
        <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_alignParentBottom="true" >
            <Button android:id="@+id/btn_one" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="1" android:text="渐变" />
            <Button android:id="@+id/btn_two" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="1" android:text="旋转" />
            <Button android:id="@+id/btn_three" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="1" android:text="缩放" />
            <Button android:id="@+id/btn_four" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="1" android:text="移动" />
        </LinearLayout>
    
    
    </RelativeLayout>

MainActivity.java

package com.example.tween;
    
    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 MainActivity extends AppCompatActivity implements View.OnClickListener{ 
    
        private Button btnOne;
        private Button btnTwo;
        private Button btnThree;
        private Button btnFour;
        private ImageView ivBean;
    
        @Override
        protected void onCreate(Bundle savedInstanceState) { 
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_main);
            //初始化组件并添加点击事件
            btnOne = (Button)findViewById(R.id.btn_one);
            btnTwo = (Button)findViewById(R.id.btn_two);
            btnThree = (Button)findViewById(R.id.btn_three);
            btnFour = (Button)findViewById(R.id.btn_four);
    
    
            ivBean = (ImageView)findViewById(R.id.iv_bean);
            btnOne.setOnClickListener(this);
            btnTwo.setOnClickListener(this);
            btnThree.setOnClickListener(this);
            btnFour.setOnClickListener(this);
        }
    
        public void onClick(View view){ 
            switch (view.getId()){ 
                case R.id.btn_one:
                    //调用AnimationUnits的loadAnimation()方法加载动画
                    //单击按钮使图片渐变
                    Animation alpha = AnimationUtils.loadAnimation(this,R.anim.alpha_animation);
                    ivBean.startAnimation(alpha);
                    break;
                case R.id.btn_two:
                    //单击按钮使图片旋转
                    Animation rotate = AnimationUtils.loadAnimation(this,R.anim.rotate_animation);
                    ivBean.startAnimation(rotate);
                    break;
                case R.id.btn_three:
                    //单击按钮使图片缩放
                    Animation scale = AnimationUtils.loadAnimation(this,R.anim.scale_animation);
                    ivBean.startAnimation(scale);
                    break;
                case R.id.btn_four:
    
                    //单击按钮使图片移动
                    Animation translate = AnimationUtils.loadAnimation(this,R.anim.translate_animation);
                    ivBean.startAnimation(translate);
                    break;
            }
        }
    }

运行截图：

渐变  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzUyMDY3MA_size_16_color_FFFFFF_t_70]

旋转

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzUyMDY3MA_size_16_color_FFFFFF_t_70 1]  
缩放

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzUyMDY3MA_size_16_color_FFFFFF_t_70 2]

移动  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzUyMDY3MA_size_16_color_FFFFFF_t_70 3]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzUyMDY3MA_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200522091855740.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzUyMDY3MA==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzUyMDY3MA_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200522091905883.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzUyMDY3MA==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzUyMDY3MA_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20200522091911969.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzUyMDY3MA==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzUyMDY3MA_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20200522091917810.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzUyMDY3MA==,size_16,color_FFFFFF,t_70