Android 仿卡片消消除

    最近产品看到一个儿童趣味匹配游戏,叫**match,然后就叫客户端直接实现,然后新增到APP里的一个小模块里,看到这个也挺有意思的,就记录下来,下面先看看效果图吧:

Android 仿卡片消消除

效果看着挺简单,主要难点有两个,第一个动画处理,设计到旋转,缩放,透明度的处理;第二个难点就是这个item是放在recyclerview中的,因此这个数量是不固定的,可以自己增加,也可以改变gridview的摆放样子。

首先来看看动画方面吧,首先将一个卡片分为背面和正面两部分,点击卡片时候,卡片的旋转也是正面和背面的旋转,比如一个是从0到180度的旋转,那另外一个就是负的180度到0度的旋转,这样就能给人感觉是一体的,然后就是一个透明度的同时进行,一个是从不透明到透明的转变,另外一个是从透明到不透明的变化,如果正面和背面一起执行这样的变化,那么就整保证无缝连接的卡片旋转了。那么就来看看这个animator的xml是如何实现的吧:

card_in.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<!--在开始时是隐藏, 逆向旋转, 当旋转一半时, 显示卡片-->

<!--完全透明-->
<objectAnimator
android:propertyName="alpha"
android:valueFrom="1.0"
android:valueTo="0"
android:duration="0"
/>

<!--旋转-->
<objectAnimator
android:propertyName="rotationY"
android:valueFrom="-180"
android:valueTo="0"
android:duration="1000"
/>

<!--显示出来-->
<objectAnimator
android:propertyName="alpha"
android:valueFrom="0.0"
android:valueTo="1.0"
android:duration="0"
android:startOffset="500"
/>

</set>

card_out.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<!--旋转180°, 当旋转一半时, 卡片消失.-->

<!--旋转180-->
<objectAnimator
android:propertyName="rotationY"
android:valueFrom="0"
android:valueTo="180"
android:duration="1000"
/>

<!--变成透明-->
<objectAnimator
android:propertyName="alpha"
android:valueFrom="1.0"
android:valueTo="0"
android:startOffset="500"
android:duration="0"
/>

</set>

然后就是逻辑处理,遇到不相同卡片时候就将这个动画反着再执行一次,就能恢复到最开始点击之前的样子了。如果点击到相同的卡片,那么这时两卡片就要同时消失,这里需要一个消失的动画,及X轴和Y轴同时从1到0的缩放,透明度也是从1到0的缩放,这样就能让其消失了:

card_disappear.xml

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

<objectAnimator
android:propertyName="scaleX"
android:valueFrom="1.0"
android:valueTo="0"
android:duration="1000"
/>
<objectAnimator
android:propertyName="scaleY"
android:valueFrom="1.0"
android:valueTo="0"
android:duration="1000"
/>

<!--变成透明-->
<objectAnimator
android:propertyName="alpha"
android:valueFrom="1.0"
android:valueTo="0"
android:startOffset="1000"
android:duration="0"
/>

</set>

第二个麻烦点就是给适配器增加一个接口回调,给卡片一个点击事件,但是这个点击事件要控制住两点,第一,正在执行动画的时候是不能点击的,要不然动画就会紊乱,第二,两个相同卡片消失之后也是不能继续点击的,这么就需要给卡片实体赋值一个变量,消失之后就改变这个变量,当再次点击就直接return掉就行了。对于第一个正在执行的动画,得在监听动画执行完毕之后,再通过适配器公共出来的api去改变这个flag标记,让其可以继续点击。下面就是适配器里的代码:

package com.leo.matchdemo;

import android.view.View;
import android.widget.ImageView;
import android.widget.RelativeLayout;

import com.bumptech.glide.Glide;
import com.chad.library.adapter.base.BaseQuickAdapter;
import com.chad.library.adapter.base.viewholder.BaseViewHolder;

import java.util.List;

public class MatchAdapter extends BaseQuickAdapter<MatchBean, BaseViewHolder> {

public MatchAdapter(List<MatchBean> data) {
super(R.layout.item_match, data);
}

private boolean isCanClick = true;

public void setClickAble(boolean isCanClick) {
this.isCanClick = isCanClick;
}

@Override
protected void convert(final BaseViewHolder helper, final MatchBean result) {
if (result == null) {
return;
}
final RelativeLayout rl_content = helper.getView(R.id.rl_content);
final ImageView im_back = helper.getView(R.id.im_back);
final ImageView im_front = helper.getView(R.id.im_front);
Glide.with(getContext()).asBitmap().load(result.getImgUrl()).into(im_back);
if (result.isShowing()) {
im_back.setVisibility(View.VISIBLE);
im_front.setVisibility(View.VISIBLE);
} else {
im_back.setVisibility(View.GONE);
im_front.setVisibility(View.GONE);
}
rl_content.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
if (isCanClick && result.isShowing()) {
if (null != itemClickAction) {
if (!result.isFrontFlag()) {
itemClickAction.frontClick(result.getTargetId(), rl_content, im_back, im_front);
result.setFrontFlag(!result.isFrontFlag());
}

}
}

}
});

}

private ItemClickAction itemClickAction;

public void setItemClickAction(ItemClickAction itemClickAction) {
this.itemClickAction = itemClickAction;

}

public interface ItemClickAction {
void frontClick(String matchingId, RelativeLayout contentView, ImageView backImg, ImageView frontImg);

}

}

但很重要很重要的一点就是在卡片相同匹配之后,不要notify适配器,这样就又会恢复原状了,这就达不到这个效果了。因此就直接将接口回调给页面里的view进行显示与消失的操作就行了。

如果需要demo下载,这里也附上下载链接:

https://download.csdn.net/download/greatdaocaoren/12752108

 

 

 

 

 

原创:https://www.panoramacn.com
源码网提供WordPress源码,帝国CMS源码discuz源码,微信小程序,小说源码,杰奇源码,thinkphp源码,ecshop模板源码,微擎模板源码,dede源码,织梦源码等。

专业搭建小说网站,小说程序,杰奇系列,微信小说系列,app系列小说

Android 仿卡片消消除

免责声明,若由于商用引起版权纠纷,一切责任均由使用者承担。

您必须遵守我们的协议,如果您下载了该资源行为将被视为对《免责声明》全部内容的认可-> 联系客服 投诉资源
www.panoramacn.com资源全部来自互联网收集,仅供用于学习和交流,请勿用于商业用途。如有侵权、不妥之处,请联系站长并出示版权证明以便删除。 敬请谅解! 侵权删帖/违法举报/投稿等事物联系邮箱:2640602276@qq.com
未经允许不得转载:书荒源码源码网每日更新网站源码模板! » Android 仿卡片消消除
关注我们小说电影免费看
关注我们,获取更多的全网素材资源,有趣有料!
120000+人已关注
分享到:
赞(0) 打赏

评论抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

您的打赏就是我分享的动力!

支付宝扫一扫打赏

微信扫一扫打赏