注册

Android仿微信红包动画平移动画

Android 仿微信红包动画 平移动画

先看效果图:

在这里插入图片描述

简单思路:

先找好素材,一张红包封面和 “开”这个图片,先用ps将红包图片P成两部分,两个椭圆的样子。“开”要有不同角度的,因为要由帧动画完成。开完之后背景设个随机数。红包封面可以用ps软件p出来,用椭圆选框工具即可。

素材:

在这里插入图片描述

目录图:

在这里插入图片描述

详细完全代码:
1. xml开动画——用帧动画完成。

这节课有详细讲解 mooc讲解的视频教程保证能听懂,简单易学

<?xml version="1.0" encoding="utf-8"?>

<animation-list xmlns:android="http://schemas.android.com/apk/res/android"
android:oneshot="true">

<item android:drawable="@drawable/open1" android:duration="150"></item>
<item android:drawable="@drawable/open2" android:duration="150"></item>
<item android:drawable="@drawable/open3" android:duration="150"></item>
<item android:drawable="@drawable/open5" android:duration="150"></item>
<item android:drawable="@drawable/open6" android:duration="150"></item>
<item android:drawable="@drawable/open1" android:duration="150"></item>
<item android:drawable="@drawable/open2" android:duration="150"></item>
<item android:drawable="@drawable/open3" android:duration="150"></item>
<item android:drawable="@drawable/open5" android:duration="150"></item>
<item android:drawable="@drawable/open6" android:duration="150"></item>
<item android:drawable="@drawable/open1" android:duration="150"></item>
</animation-list>`
2. 布局代码:
<?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"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:tools="http://schemas.android.com/tools"
tools:context=".MainActivity">


<TextView
android:id="@+id/textView"
android:layout_width="wrap_content"
android:layout_height="50dp"
android:layout_alignParentStart="true"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:layout_alignParentEnd="true"
android:layout_alignParentRight="true"
android:layout_alignParentBottom="true"
android:layout_marginStart="59dp"
android:layout_marginLeft="59dp"
android:layout_marginTop="193dp"
android:layout_marginEnd="55dp"
android:layout_marginRight="55dp"
android:layout_marginBottom="268dp"
android:gravity="center"
android:text="恭喜同学,获得随机红包:"
android:textSize="20dp" />


<TextView
android:id="@+id/text"
android:layout_width="130dp"
android:layout_height="50dp"
android:layout_alignParentStart="true"
android:layout_alignParentLeft="true"
android:layout_alignParentEnd="true"
android:layout_alignParentRight="true"
android:layout_alignParentBottom="true"
android:layout_marginStart="130dp"
android:layout_marginLeft="130dp"
android:layout_marginEnd="124dp"
android:layout_marginRight="124dp"
android:layout_marginBottom="231dp"
android:gravity="center"
android:text="TextView"
android:textColor="@color/colorAccent"
android:textSize="25dp" />


<ImageView
android:id="@+id/bg1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentStart="true"
android:layout_alignParentTop="true"
android:layout_marginTop="0dp"
android:scaleType="fitXY"
app:srcCompat="@drawable/start55" />


<ImageView
android:id="@+id/bg2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentStart="true"
android:layout_alignParentBottom="true"
android:layout_marginStart="0dp"
android:layout_marginBottom="0dp"
android:background="@drawable/start66"
android:scaleType="fitXY" />


<ImageView
android:id="@+id/open"
android:layout_width="wrap_content"
android:layout_height="43dp"
android:layout_alignTop="@+id/bg2"
android:layout_alignParentStart="true"
android:layout_alignParentLeft="true"
android:layout_alignParentEnd="true"
android:layout_alignParentRight="true"
android:layout_alignParentBottom="true"
android:layout_marginStart="133dp"
android:layout_marginLeft="133dp"
android:layout_marginTop="323dp"
android:layout_marginEnd="134dp"
android:layout_marginRight="134dp"
android:layout_marginBottom="145dp"
android:background="@drawable/open_rotate" />



</RelativeLayout>

3.最后Maintivity详细代码:
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.graphics.drawable.AnimationDrawable;
import android.os.Handler;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.view.animation.Animation;
import android.view.animation.TranslateAnimation;
import android.widget.ImageView;
import android.widget.TextView;
import java.util.Random;

public class MainActivity extends AppCompatActivity implements View.OnClickListener {
private ImageView open,bg1,bg2;
private AnimationDrawable animationDrawable;
private Animation animation = null;
private Bitmap bitmap;
private TextView text;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
open=(ImageView)findViewById(R.id.open);
bg1 =(ImageView)findViewById(R.id.bg1);
bg2 =(ImageView)findViewById(R.id.bg2);

//设置随机数---用作金额
text=(TextView) (findViewById(R.id.text));
Random ra =new Random();
int bb= ra.nextInt(88889+1);
text.setText(String.valueOf(bb));
text.setTextSize(40);

//"开"——帧动画
animationDrawable =(AnimationDrawable) open.getBackground();
open.setOnClickListener(this);
}
public void onClick(View v) {
// TODO Auto-generated method stub
switch (v.getId()) {
case R.id.open:
animationDrawable.start();//开——帧动画
//线程延时运行
Handler handler = new Handler();
handler.postDelayed(new Runnable() {
@Override
public void run() {
//上+开 背景动画
final TranslateAnimation openAnimation = new TranslateAnimation(
TranslateAnimation.RELATIVE_TO_SELF, 0, TranslateAnimation.RELATIVE_TO_SELF, 0,
TranslateAnimation.RELATIVE_TO_SELF, 0, TranslateAnimation.RELATIVE_TO_SELF, -0.5f);
openAnimation.setDuration(1000); //设置动画的时间
bg1.postDelayed(new Runnable() {
@Override
public void run() {
bg1.setVisibility(View.VISIBLE);
openAnimation.setFillAfter(true);//设置动画结束后位置保持不东
bg1.startAnimation(openAnimation);
}
}, 0);//设置开始动画的准备时间
open.postDelayed(new Runnable() {
@Override
public void run() {
open.setVisibility(View.VISIBLE);
openAnimation.setFillAfter(true);//设置动画结束后位置保持不东
open.startAnimation(openAnimation);
}
}, 0);//设置开始动画的准备时间

//下 背景动画
final TranslateAnimation ctrlAnimation = new TranslateAnimation(
TranslateAnimation.RELATIVE_TO_SELF, 0, TranslateAnimation.RELATIVE_TO_SELF, 0,
TranslateAnimation.RELATIVE_TO_SELF, 0, TranslateAnimation.RELATIVE_TO_SELF, 0.4f);
ctrlAnimation.setDuration(1000); //设置动画的时间
bg2.postDelayed(new Runnable() {
@Override
public void run() {
bg2.setVisibility(View.VISIBLE);
ctrlAnimation.setFillAfter(true);//设置动画结束后位置保持不东
bg2.startAnimation(ctrlAnimation);

}
}, 0);//设置开始动画的准备时间
}
}, 1500);//3秒后执行Runnable中的run方法
break;
}
}
}

复制到Android studio 里面应该是可以直接运行的,关键部分代码有备注,不懂的代码可以复制问du娘。其中有用到线程作用是延时运行代码,是为了先让“开”动画运行完,然后“开”和上背景同时上移,代码很简单,祝各位能get到知识。

0 个评论

要回复文章请先登录注册