Android动画(翻牌抽奖)
Android动画(翻牌抽奖)
由于公司产品的需求,需要写一个翻牌抽奖的功能,故而写了一个.走了不少弯路,用了三种方法,最终用了最为简单的一种,现将三种方法记录如下：
老规矩,先上效果图!
下面分几个步骤来讲解,主要有布局文件/动画文件/调用方法/点击后的处理等!
布局及动画
xml布局:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:background="#fff"
android:layout_width="match_parent"
android:layout_height="match_parent">
<RelativeLayout
android:id="@+id/relativeLayout_Title_Draw"
android:layout_width="match_parent"
android:layout_height="50dp"
android:background="#fff">
<ImageView
android:id="@+id/imageView_DrawTitle_Return"
android:layout_width="30dp"
android:layout_height="30dp"
android:layout_centerVertical="true"
android:layout_margin="10dp"
android:padding="5dp"
android:src="@mipmap/user_back" />
<TextView
android:id="@+id/textView_DrawTitle_Title"
android:layout_width="wrap_content"
android:layout_height="30dp"
android:layout_centerInParent="true"
android:ellipsize="end"
android:gravity="center"
android:singleLine="true"
android:text="好礼送不停"
android:textColor="#222"
android:textSize="16sp" />
<LinearLayout
android:orientation="horizontal"
android:layout_alignParentRight="true"
android:layout_marginRight="16dp"
android:layout_width="wrap_content"
android:layout_height="match_parent">
<ImageView
android:id="@+id/imageView_DrawTitle"
android:src="@mipmap/mine_hb"
android:layout_gravity="center"
android:layout_width="30dp"
android:layout_height="30dp" />
LinearLayout>
<View
android:layout_width="match_parent"
android:layout_height="1px"
android:layout_alignParentBottom="true"
android:background="#dbdbdb" />
RelativeLayout>
<ImageView
android:id="@+id/imageView_Draw_Background"
android:background="@mipmap/bg_draw"
android:layout_marginTop="50dp"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<ImageView
android:id="@+id/imageView_Draw_Rule"
android:src="@mipmap/prize_rule"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:layout_marginLeft="10dp"
android:layout_marginTop="55dp"
android:padding="10dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<ImageView
android:id="@+id/imageView_Draw_MinePrize"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:layout_marginTop="50dp"
android:layout_width="60dp"
android:layout_height="60dp" />
<TextView
android:id="@+id/textView_Draw_Nums"
android:gravity="center"
android:textColor="#ffffff"
android:textSize="14sp"
android:text="今日剩余抽奖次数 8 次"
android:layout_marginTop="230dp"
android:layout_width="match_parent"
android:layout_height="30dp" />
<GridView
android:id="@+id/drawview_Draw_Detail"
android:gravity="center"
android:verticalSpacing="20dp"
android:layout_marginTop="260dp"
android:padding="10dp"
android:numColumns="3"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<LinearLayout
android:id="@+id/linearLayout_Prize_Draw"
android:layout_alignParentBottom="true"
android:layout_width="match_parent"
android:layout_height="70dp">
<ImageView
android:layout_weight="1"
android:padding="12dp"
android:src="@mipmap/cup"
android:layout_width="0dp"
android:layout_height="match_parent" />
<ImageView
android:layout_weight="1"
android:padding="12dp"
android:src="@mipmap/bear"
android:layout_width="0dp"
android:layout_height="match_parent" />
<ImageView
android:layout_weight="1"
android:padding="12dp"
android:src="@mipmap/gift"
android:layout_width="0dp"
android:layout_height="match_parent" />
<ImageView
android:layout_weight="1"
android:padding="12dp"
android:src="@mipmap/hb"
android:layout_width="0dp"
android:layout_height="match_parent" />
<ImageView
android:layout_weight="1"
android:padding="12dp"
android:src="@mipmap/phone"
android:layout_width="0dp"
android:layout_height="match_parent" />
LinearLayout>
<ImageView
android:id="@+id/imageView_Cards_Animation"
android:visibility="gone"
android:src="@mipmap/xg"
android:layout_centerVertical="true"
android:layout_centerHorizontal="true"
android:layout_centerInParent="true"
android:layout_width="220dp"
android:layout_height="260dp" />
RelativeLayout>
主要布局就是GridView!其中的6个item就是用于翻拍的纸牌!注意最下面的ImageView,初始时设置他的visibility=”gone”,当点击到gridview的item时,再显示出来并进行反转,即为大图的反转效果!
动画xml:
动画效果展示,可以通过xml配置,也可以在代码中设置.另外再推荐一个第三方库文件,也可以进行翻转,并且更加酷炫,不过他的翻转效果只能展示一次,和我的需求不同,虽然功能很强大,但是对我的项目没啥帮助,不过以后有人有这种需求的话可以直接使用,貌似是一个德国人写的库,git的链接在这里Rotatable()!
我先将xml配置的方法写下:
<translate xmlns:android="http://schemas.android.com/apk/res/android"
android:interpolator="@android:anim/overshoot_interpolator"
android:fromXDelta="0"
android:toXDelta="-200"
android:fromYDelta="0"
android:toYDelta="-200"
android:duration="2000"
android:fillAfter="true"
/>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<objectAnimator
android:duration="0"
android:propertyName="alpha"
android:valueFrom="1.0"
android:valueTo="0.0"/>
<objectAnimator
android:duration="600"
android:propertyName="rotationY"
android:valueFrom="-180"
android:valueTo="0"/>
<objectAnimator
android:duration="0"
android:propertyName="alpha"
android:startOffset="300"
android:valueFrom="0.0"
android:valueTo="1.0"/>
set>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:fillAfter="false">
<scale
android:duration="300"
android:fromXScale="1"
android:fromYScale="1"
android:pivotX="50%"
android:pivotY="50%"
android:startOffset="300"
android:toXScale="0.5"
android:toYScale="0.5" />
<scale
android:duration="300"
android:fromXScale="1"
android:fromYScale="1"
android:pivotX="50%"
android:pivotY="50%"
android:toXScale="2"
android:toYScale="2" />
set>主要就使用到了这三个动画!
- 代码
思路如下,首先是自定义adapter,设置好item的布局,在adapter中设定好点击事件,当用户点击时出现大图进行反转!talk is shit, show you code!
建议将adapter和点击事件单独取出为一个类文件!
Adapter文件如下
public class GridViewAdapter extends BaseAdapter {
List cardsList = new ArrayList<>();
public boolean refreshGridData(List list) {
if (list != null && list.size() > 0) {
cardsList.clear();
cardsList.addAll(list);
notifyDataSetChanged();
return true;
}
return false;
}
@Override
public int getCount() {
return cardsList == null ? 0 : cardsList.size();
}
@Override
public Object getItem(int position) {
return cardsList == null ? null : cardsList.get(position);
}
@Override
public long getItemId(int position) {
return position;
}
GridViewAdapter.ViewHolder holder = null;
@Override
public View getView(int position, View convertView, ViewGroup parent) {
// 1、如果没有可利用item时，找出所有控件
if (convertView == null) {
holder = new GridViewAdapter.ViewHolder();
convertView = LayoutInflater.from(MainActivity.this)
.inflate(R.layout.doubledealer_gv_item, parent, false);
// holder.textView = (TextView) convertView.findViewById(R.id.tv);
holder.imageView = convertView.findViewById(R.id.imageView_Cards);
holder.myLayout = convertView
.findViewById(R.id.myLayout);
holder.drawView = convertView.findViewById(R.id.drawView);
convertView.setTag(holder);
} else {
// 3、有可利用的item时就获取赋值使用
holder = (GridViewAdapter.ViewHolder) convertView.getTag();
}
if (mFlag) {
// 监听点击事件
holder.myLayout.setClickable(true);
holder.myLayout.setOnClickListener(new
MyClickListener(holder, cardsList, position));
} else {
// 监听点击事件
holder.myLayout.setClickable(false);
if (clickPosition != position) {
holder.drawView.start();
// holder.drawView.setCardBackground(Color.parseColor("#B0E2FF"));
// holder.drawView.setText(cardsList.get(position) + "");
// holder.imageView.setVisibility(View.VISIBLE);
// holder.drawView.setImage(BitmapFactory.decodeResource(
// getResources(), R.mipmap.cup
// ));
// imageView_Cards_Animation.setVisibility(View.VISIBLE);
setOvershotAnim();
}
}
return convertView;
}
private class ViewHolder {
ImageView imageView;
LinearLayout myLayout;
DrawView drawView;
}
}
点击事件的方法类也是类似,这个相信很简单了,不贴了,累死了……….
然后就是在Activity中进行调取,包括动画效果的调取和逻辑处理等:
/********************动画效果**************************/
// 插值器设置 OvershootInterpolator
private Animation overshotAnim;
@SuppressLint("ResourceType")
private void setOvershotAnim() {
overshotAnim = AnimationUtils.loadAnimation(this, R.anim.scaleanim_overshot);
imageView_Cards_Animation.startAnimation(overshotAnim);
largeAnimStart();
}
@SuppressLint("ResourceType")
private void largeAnimStart() {
imageView_Cards_Animation.setVisibility(View.VISIBLE);
// 放大
Animation largeAnim;
largeAnim = AnimationUtils.loadAnimation(this, R.animator.enlarge);
imageView_Cards_Animation.startAnimation(largeAnim);
imageAnimationStart();
}
// 旋转
private Handler handler;
private final int ANIM_DURATION = 3000;
private void imageAnimationStart() {
handler = new Handler();
runAnimation(R.id.imageView_Cards_Animation, Rotatable.ROTATE_Y,
360, 100);
}
/**
* 动画进程
*
* @param resID 位置
* @param direction 方向
* @param degree 度数
* @param delay 延时
*/
private void runAnimation(final int resID, final int direction,
final int degree, int delay) {
handler.postDelayed(new Runnable() {
@Override
public void run() {
Rotatable rotatable = new Rotatable.Builder(findViewById(resID))
.direction(Rotatable.ROTATE_BOTH)
.build();
rotatable.rotate(direction, degree, ANIM_DURATION);
}
}, delay);
// 开启弹窗
// startDialog();
}
此时我大图的旋转用的就是那个开源库,很舒服,可惜后面产品更换了需求,加了一个纸牌不停更换的功能,我就换了一种逻辑进行处理了.
此时的话,核心代码都已经贴出来了,另外在代码中
直接添加动画的代码是:
private final int ANIM_DURATION = 1000;
private ObjectAnimator animator;
private void imageAnimationStart() {
imageView_Cards_Animation_Test.setImageBitmap(BitmapFactory.decodeResource(
getResources(), R.mipmap.xg
));
animator = ObjectAnimator.ofFloat(imageView_Cards_Animation_Test,
View.ROTATION_Y, 0, 360).setDuration(ANIM_DURATION);
animator.start();
至此的话,这个功能就能实现了,大家可以多多思考下,想直接要源码的话也可以,我把源码放在了我的github上了,clone的话可以,就是不要忘了给我加星星哦!