Android之高仿微信“开门动画”（六）

最新推荐文章于 2021-05-26 07:26:00 发布

原创最新推荐文章于 2021-05-26 07:26:00 发布 · 2.6k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#android #开门动画

Android 专栏收录该内容

11 篇文章

订阅专栏

本文介绍了如何在Android中创建类似微信的开门动画效果。详细讲解了动画的三个关键步骤：左侧门向左滑动、右侧门向右滑动以及中间文字逐渐放大。通过相对布局和ImageView、TextView实现界面，并对每个动画过程进行编程实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

此节内容是对第（五）节内容中WhatsDoor.class类的实现。

首先是效果图：

微信的开门动画的想法真心不错，而且也非常酷炫。仔细观察，可以发现，整个开门动画里，包括3个动画过程：

1、左边的门——从右到左。

2、右边的门——从左到右。

3、中间的字——从小到大。

知道了这3个动画过程之后，就非常简单了。

对于界面布局，采用相对布局，然后在里面放置2个ImageView和1个TextView即可。

一、界面布局：

layout\whatsdoor.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    <ImageView android:id="@+id/imageLeft"
         android:scaleType="fitXY"
         android:layout_width="fill_parent"
         android:layout_height="fill_parent"
         android:layout_alignParentLeft="true"            
         android:src="@drawable/w_left" 
         />
        
    <ImageView android:id="@+id/imageRight"
         android:visibility="visible"
         android:scaleType="fitXY"
         android:layout_width="fill_parent"
         android:layout_height="fill_parent"
         android:layout_alignParentRight="true"            
         android:src="@drawable/w_right" 
         />
        
    <TextView android:id="@+id/animText"
         android:layout_width="fill_parent" 
         android:layout_height="wrap_content" 
         android:gravity="center" 
         android:layout_alignParentTop="true"
         android:layout_marginTop="35dp"
         android:text=" \n \n微信，是一个生活方式\n \n "         	
         android:textSize="22sp"
         android:textColor="#fff" 
        />

</RelativeLayout>

二、java代码，对这3个动画分别实现动画过程：

WhatsDoor.xml

package t.first;

import android.app.Activity;
import android.content.Intent;
import android.os.Bundle;
import android.os.Handler;
import android.view.animation.AlphaAnimation;
import android.view.animation.Animation;
import android.view.animation.AnimationSet;
import android.view.animation.ScaleAnimation;
import android.view.animation.TranslateAnimation;
import android.widget.ImageView;
import android.widget.TextView;

public class WhatsDoor extends Activity{
	
	public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        	
            setContentView(R.layout.whatsdoor);	
        	
                //获取控件
        	ImageView left = (ImageView) findViewById(R.id.imageLeft);
        	ImageView right = (ImageView) findViewById(R.id.imageRight);
        	TextView text = (TextView) findViewById(R.id.animText);
        	
        	
        	
        	//也可以在XML中实现
        	//左边动画
        	AnimationSet left_anim = new AnimationSet(true);               //动画集合，对加入的动画都有效
        	
        	TranslateAnimation left_translate = new TranslateAnimation(
        			Animation.RELATIVE_TO_SELF,
        			0f,
        			Animation.RELATIVE_TO_SELF,
        			-1f,
        			Animation.RELATIVE_TO_SELF,
        			0f,
        			Animation.RELATIVE_TO_SELF,
        			0f);
        	left_translate.setDuration(1500);
        	
        	left_anim.addAnimation(left_translate);
        	left_anim.setStartOffset(800);   		
    		left_anim.setFillAfter(true);
    		
    		left.startAnimation(left_anim);
    		
    		
    		//右边动画
    		AnimationSet right_anim = new AnimationSet(true);
    		
    		TranslateAnimation right_translate = new TranslateAnimation(
    				Animation.RELATIVE_TO_SELF,
    				0f,
    				Animation.RELATIVE_TO_SELF,
    				+1f,
    				Animation.RELATIVE_TO_SELF,
    				0f,
    				Animation.RELATIVE_TO_SELF,
    				0f);
    		right_translate.setDuration(1500);
    		
    		right_anim.addAnimation(right_translate);
    		right_anim.setStartOffset(800);
    		right_anim.setFillAfter(true);
    		
    		right.startAnimation(right_anim);
        	
        	//字体动画
    		AnimationSet text_anim = new AnimationSet(true);
    		
    		ScaleAnimation text_scale = new ScaleAnimation(
    				1f,
    				3f,
    				1f,
    				3f,
    				Animation.RELATIVE_TO_SELF,
    				0.5f,
    				Animation.RELATIVE_TO_SELF,
    				0.5f);
    		text_scale.setDuration(1000);    		
    		AlphaAnimation text_alpha = new AlphaAnimation(1,0.0001f);
    		text_alpha.setDuration(1500);
    		
    		text_anim.addAnimation(text_scale);
    		text_anim.addAnimation(text_alpha);
    		text_anim.setFillAfter(true);
    		
    		text.startAnimation(text_anim);
    		
        	
    		
    		
    		//延时一段时间后开启主界面
    		new Handler().postDelayed(new Runnable(){
    			public void run(){
    				
    				Intent intent = new Intent (WhatsDoor.this,MainWidget.class);//进入主界面，在第（七）节内容中实现该类		
    				startActivity(intent);			
    				
    				WhatsDoor.this.finish();
    				
    			}
    		}, 1500);
        	
        	
        	
        }

}

三、在AndroidManifest.xml里设置以下语句，无标题、全屏、淡入淡出：

 <activity android:name=".WhatsDoor" android:theme="@style/Fullscreen_Notitle_Fade"/> <!-- 此自定义主题样式在第（二）节内容中有详细介绍 -->

四、所用素材：